tests: various fix in Dropdown tests

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

diff --git a/test/javascript/components/dropdown.js b/test/javascript/components/dropdown.js
index e21467f8f39e5157bd0aaf12139de982010866f4..85c95684e6660ebaf9910f4f7b04fa0a39506353 100644 (file)
--- a/test/javascript/components/dropdown.js
+++ b/test/javascript/components/dropdown.js
@@ -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();
@@ -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();
     });
   });
 
@@ -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');