Skip to content

Commit

Permalink
tests: replace duplicate code in the toggler test
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanielRuf
DanielRuf committed Mar 17, 2018
1 parent e84e7d1 commit dd96a42
Showing 1 changed file with 18 additions and 52 deletions.
70 changes: 18 additions & 52 deletions test/javascript/components/toggler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ describe('Toggler', function() {
$html.remove();
});

function appendTriggers() {
return $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body')
}

describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
Expand Down Expand Up @@ -42,47 +50,29 @@ describe('Toggler', function() {

it('adds Aria attributes to click triggers', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});

$triggers.find('[data-open]').should.have.attr('aria-controls', 'toggler');
$triggers.find('[data-close]').should.have.attr('aria-controls', 'toggler');
$triggers.find('[data-toggle]').should.have.attr('aria-controls', 'toggler');
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-controls', 'toggler');

$triggers.remove();
});

it('sets aria-expanded to true if the element is visible', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});

$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');
});

it('sets aria-expanded to false if the element is invisible', function() {
var $css = $('<style>#toggler { display: none }</style>').appendTo('body');
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});

$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'false');
$css.remove();
});
});
Expand All @@ -106,22 +96,14 @@ describe('Toggler', function() {

it('updates aria-expanded after the class is toggled', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});

plugin._toggleClass();
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');

plugin._toggleClass();
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'false');
});
});

Expand All @@ -130,41 +112,25 @@ describe('Toggler', function() {
it('animates an invisible element in', function(done) {
var $css = $('<style>#toggler { display: none; }</style>').appendTo('body');
$html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');

plugin = new Foundation.Toggler($html, {});

$html.on('on.zf.toggler', function() {
$('#toggler').should.be.visible;
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'true');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'true');
$css.remove();
done();
});

plugin._toggleAnimate();
});

it('animates an visible element out', function(done) {
it('animates a visible element out', function(done) {
$html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
var $triggers = $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body');

plugin = new Foundation.Toggler($html, {});

$html.on('off.zf.toggler', function() {
$('#toggler').should.be.hidden;
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-close]').should.have.attr('aria-expanded', 'false');
$triggers.find('[data-open]').should.have.attr('aria-expanded', 'false');
done();
});

Expand Down

0 comments on commit dd96a42

Please sign in to comment.