191 lines
7.4 KiB
JavaScript
191 lines
7.4 KiB
JavaScript
describe('Accordion', function() {
|
|
var plugin;
|
|
var $html;
|
|
var template = `<ul class="accordion" data-accordion>
|
|
<li class="accordion-item is-active" data-accordion-item>
|
|
<a href="#" class="accordion-title">Accordion 1</a>
|
|
<div class="accordion-content" data-tab-content >
|
|
<p>Panel 1. Lorem ipsum dolor</p>
|
|
<a href="#">Nowhere to Go</a>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Accordion 2</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
<textarea></textarea>
|
|
<button class="button">I do nothing!</button>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Accordion 3</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
Pick a date!
|
|
<input type="date"></input>
|
|
</div>
|
|
</li>
|
|
</ul>`;
|
|
|
|
afterEach(function() {
|
|
plugin.destroy();
|
|
document.activeElement.blur();
|
|
$html.remove();
|
|
});
|
|
|
|
describe('constructor()', function() {
|
|
it('stores the element and plugin options', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
plugin.$element.should.be.an('object');
|
|
plugin.options.should.be.an('object');
|
|
});
|
|
});
|
|
|
|
describe('up()', function(done) {
|
|
it('closes the targeted container if allowAllClosed is true', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
|
|
|
|
plugin.up($html.find('.accordion-content').eq(0));
|
|
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
|
|
$html.on('up.zf.accordion', function() {
|
|
$html.find('.accordion-content').eq(0).should.be.hidden;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('toggles attributes of title of the targeted container', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
|
|
|
|
plugin.up($html.find('.accordion-content').eq(0));
|
|
$html.find('.accordion-title').eq(0).should.have.attr('aria-expanded', 'false');
|
|
$html.find('.accordion-title').eq(0).should.have.attr('aria-selected', 'false');
|
|
});
|
|
|
|
it('not closes the open container if allowAllClosed is false', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {allowAllClosed: false});
|
|
|
|
plugin.up($html.find('.accordion-content').eq(0));
|
|
$html.find('.accordion-content').eq(0).should.be.visible;
|
|
// Element has aria-hidden="false" not set if it has not been actively toggled so far
|
|
// Therefor check if it has not aria-hidden="true"
|
|
$html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
|
|
});
|
|
});
|
|
|
|
describe('down()', function() {
|
|
it('opens the targeted container', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
plugin.down($html.find('.accordion-content').eq(1));
|
|
$html.find('.accordion-content').eq(1).should.be.visible;
|
|
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
|
|
});
|
|
|
|
it('toggles attributes of title of the targeted container', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
plugin.down($html.find('.accordion-content').eq(1));
|
|
$html.find('.accordion-title').eq(1).should.have.attr('aria-expanded', 'true');
|
|
$html.find('.accordion-title').eq(1).should.have.attr('aria-selected', 'true');
|
|
});
|
|
|
|
it('closes open container if multiExpand is false', function(done) {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {multiExpand: false});
|
|
|
|
plugin.down($html.find('.accordion-content').eq(1));
|
|
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
|
|
$html.on('up.zf.accordion', function() {
|
|
$html.find('.accordion-content').eq(0).should.be.hidden;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('not closes open container if multiExpand is true', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {multiExpand: true});
|
|
|
|
plugin.down($html.find('.accordion-content').eq(1));
|
|
$html.find('.accordion-content').eq(0).should.be.visible;
|
|
// Element has aria-hidden="false" not set if it has not been actively toggled so far
|
|
// Therefor check if it has not aria-hidden="true"
|
|
$html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
|
|
});
|
|
});
|
|
|
|
describe('toggle()', function(done) {
|
|
it('closes the only open container if allowAllClosed is true', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
|
|
|
|
plugin.toggle($html.find('.accordion-content').eq(0));
|
|
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
|
|
$html.on('up.zf.accordion', function() {
|
|
$html.find('.accordion-content').eq(0).should.be.hidden;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('not closes the only open container if allowAllClosed is false', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {allowAllClosed: false});
|
|
|
|
plugin.toggle($html.find('.accordion-content').eq(0));
|
|
$html.find('.accordion-content').eq(0).should.be.visible;
|
|
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'false');
|
|
});
|
|
});
|
|
|
|
describe('keyboard events', function() {
|
|
it('opens next panel on ARROW_DOWN', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
$html.find('.accordion-title').eq(0).focus()
|
|
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
|
|
|
|
$html.find('.accordion-content').eq(1).should.be.visible;
|
|
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
|
|
// Check if focus was moved
|
|
$html.find('.accordion-title').eq(1)[0].should.be.equal(document.activeElement);
|
|
});
|
|
it('opens previous panel on ARROW_UP', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
$html.find('.accordion-title').eq(2).focus()
|
|
.trigger(window.mockKeyboardEvent('ARROW_UP'));
|
|
|
|
$html.find('.accordion-content').eq(1).should.be.visible;
|
|
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
|
|
// Check if focus was moved
|
|
$html.find('.accordion-title').eq(1)[0].should.be.equal(document.activeElement);
|
|
});
|
|
it('opens related panel on ENTER', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
$html.find('.accordion-title').eq(1).focus()
|
|
.trigger(window.mockKeyboardEvent('ENTER'));
|
|
|
|
$html.find('.accordion-content').eq(1).should.be.visible;
|
|
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
|
|
});
|
|
it('opens related panel on SPACE', function() {
|
|
$html = $(template).appendTo('body');
|
|
plugin = new Foundation.Accordion($html, {});
|
|
|
|
$html.find('.accordion-title').eq(1).focus()
|
|
.trigger(window.mockKeyboardEvent('SPACE'));
|
|
|
|
$html.find('.accordion-content').eq(1).should.be.visible;
|
|
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
|
|
});
|
|
});
|
|
});
|