Skip to content

Commit

Permalink
tests: various fix in Dropdown tests
Browse files Browse the repository at this point in the history 
Changes:
* split tests about `open()` or mouse events
* tests triggered events instead of method calling for mouse events
* add missing `done()` when test is asynchronous
* rely on options passed to plugin instead of in the HTML
* test the Id of the focused element instead of the whole HTML (it can change)
* improve various tests names
  • Loading branch information
@ncoden
ncoden committed Mar 6, 2018
1 parent f0c68ec commit a67ffe6
Showing 1 changed file with 60 additions and 40 deletions.
100 changes: 60 additions & 40 deletions test/javascript/components/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ describe('Dropdown', function() {
const getDropdownContainer = (dropdownClasses = '') =>
`<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown</div>`;

const getHoverDropdownContainer = (dropdownClasses = '') =>
`<div class="${dropdownClasses}" data-dropdown data-hover="true" data-hover-pane="true" id="my-dropdown">Dropdown</div>`;

const getAutoFocusDropdownContainer = (dropdownClasses = '') =>
`<div class="${dropdownClasses}" data-dropdown data-auto-focus="true" id="my-dropdown">Dropdown<input type="text" placeholder="should auto focus" id="focus-text" /></div>`;
const getFocusableInput = (inputId = '') =>
`<input type="text" placeholder="should auto focus" id="${inputId}" />`;
const getAutoFocusDropdownContainer = (dropdownClasses = '', inputId = '') =>
`<div class="${dropdownClasses}" data-dropdown data-auto-focus="true" id="my-dropdown">Dropdown${getFocusableInput(inputId)}</div>`;

afterEach(function() {
plugin.destroy();
Expand All @@ -31,65 +30,56 @@ describe('Dropdown', function() {
});
});

describe('open()', function() {
it('traps focus if trapFocus option is true', function() {
describe('open()', function () {
it('fires show.zf.dropdown event', function () {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {trapFocus: true});
plugin = new Foundation.Dropdown($dropdownContainer, {});

let spy = sinon.spy();
$dropdownContainer.on('show.zf.dropdown', spy);

let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
plugin.open();

sinon.assert.called(spy);
Foundation.Keyboard.trapFocus.restore();
});

it('should open dropdown on button click', function() {
it('make the dropdown visible', function (done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
plugin.open();

$dropdownController.on('show.zf.dropdown', function() {
$dropdownContainer.on('show.zf.dropdown', function () {
$('#my-dropdown').should.not.be.hidden;
$('#my-dropdown').should.have.attr('aria-hidden', 'false');
$('#my-dropdown').should.have.class('is-open');
done();
});
plugin.close();
plugin.open();
});

it('should open dropdown on hover', function() {
it('traps focus accoding to trapFocus option', function () {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getHoverDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { trapFocus: true });

let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
plugin.open();

$dropdownController.on('show.zf.dropdown', function() {
$('#my-dropdown').should.not.be.hidden;
$('#my-dropdown').should.have.attr('aria-hidden', 'false');
$('#my-dropdown').should.have.class('is-open');
done();
});
plugin.close();
sinon.assert.called(spy);
Foundation.Keyboard.trapFocus.restore();
});

it('should autofocus input on open', function() {
it('should autofocus according to autoFocus option', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getAutoFocusDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
plugin.open();

$focusedElement = '<input type="text" placeholder="should auto focus" id="focus-text" />';
$dropdownContainer = $(getAutoFocusDropdownContainer('', 'inputToFocus')).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { autoFocus: true });

$dropdownController.on('show.zf.dropdown', function() {
$('#my-dropdown').should.not.be.hidden;
$('#my-dropdown').should.have.attr('aria-hidden', 'false');
$('#my-dropdown').should.have.class('is-open');
document.activeElement.should.be.equal($focusedElement);
$dropdownContainer.on('show.zf.dropdown', function() {
document.activeElement.id.should.be.equal('inputToFocus');
done();
});
plugin.close();
plugin.open();
});
});

Expand Down Expand Up @@ -142,16 +132,46 @@ describe('Dropdown', function() {
plugin.open();

let spy = sinon.spy(plugin, 'close');
plugin.$element.trigger('click');

plugin.$element.trigger("click");

setTimeout(function() {
setTimeout(() => {
sinon.assert.notCalled(spy);
done();
}, 2);
}, 0);
});
});

describe('mouse events', function() {
it('opens the dropdown on button click', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});

let spy = sinon.spy(plugin, 'open');
$dropdownController.trigger('click');

setTimeout(() => {
sinon.assert.called(spy);
done();
}, 0);
});

it('opens the dropdown on button hover', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { hover: true, hoverDelay: 42 });

let spy = sinon.spy(plugin, 'open');
$dropdownController.trigger('mouseenter');

setTimeout(() => {
sinon.assert.called(spy);
done();
}, 42);
});

});

describe('keyboard events', function () {
it('opens Dropdown on SPACE', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
Expand Down

0 comments on commit a67ffe6

Please sign in to comment.