Use pull request foundation#10968 from alliclemens/alliclemens-dropdo…

…wn-unit-tests for v6.5.0

2d56de0 Add scroll to browser test display to allow viewing of all test results
c25c7f0 Tests added for dropdown open
f0c68ec clean: remove console.log in Dropdown tests
a67ffe6 tests: various fix in Dropdown tests
87c0f45 Revert "Add scroll to browser test display to allow viewing of all test results"

Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr>
Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

test/javascript/components/dropdown.js

@@ -8,6 +8,11 @@ describe('Dropdown', function() {
   const getDropdownContainer = (dropdownClasses = '') =>
     `<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown</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();
     $dropdownController.remove();
@@ -25,18 +30,57 @@ 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);
+
+      plugin.open();
+
+      sinon.assert.called(spy);
+    });
+
+    it('make the dropdown visible', function (done) {
+      $dropdownController = $(getDropdownController()).appendTo('body');
+      $dropdownContainer = $(getDropdownContainer()).appendTo('body');
+      plugin = new Foundation.Dropdown($dropdownContainer, {});
+
+      $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.open();
+    });
+
+    it('traps focus accoding to trapFocus option', function () {
+      $dropdownController = $(getDropdownController()).appendTo('body');
+      $dropdownContainer = $(getDropdownContainer()).appendTo('body');
+      plugin = new Foundation.Dropdown($dropdownContainer, { trapFocus: true });
 
       let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
       plugin.open();
 
       sinon.assert.called(spy);
       Foundation.Keyboard.trapFocus.restore();
     });
+
+    it('should autofocus according to autoFocus option', function(done) {
+      $dropdownController = $(getDropdownController()).appendTo('body');
+      $dropdownContainer = $(getAutoFocusDropdownContainer('', 'inputToFocus')).appendTo('body');
+      plugin = new Foundation.Dropdown($dropdownContainer, { autoFocus: true });
+
+      $dropdownContainer.on('show.zf.dropdown', function() {
+        document.activeElement.id.should.be.equal('inputToFocus');
+        done();
+      });
+      plugin.open();
+    });
   });
 
   describe('close()', function() {
@@ -88,14 +132,44 @@ 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 () {