test: add unit test for the Drilldown height when reopened from a submenu #11416

See https://github.com/zurb/foundation-sites/issues/11416

diff --git a/test/javascript/components/drilldown.js b/test/javascript/components/drilldown.js
index f8f8bd8689f19abab7b3ff678ef7d7b50e053cd5..d8b45adee265f03a60531ab1fdd6671b24f0ab4c 100644 (file)
--- a/test/javascript/components/drilldown.js
+++ b/test/javascript/components/drilldown.js
@@ -4,12 +4,11 @@ describe('Drilldown Menu', function() {
   var template = `<ul class="menu" data-drilldown style="width: 200px" id="m1">
     <li>
       <a href="#">Item 1</a>
-      <ul class="menu">
+      <ul id="Menu-1" class="menu">
         <li>
           <a href="#">Item 1A</a>
-          <ul class="menu">
+          <ul id="Menu-1A" class="menu">
             <li><a href="#Item-1Aa">Item 1Aa</a></li>
-            <li><a href="#Item-1Ba">Item 1Ba</a></li>
           </ul>
         </li>
         <li><a href="#Item-1B">Item 1B</a></li>
@@ -18,7 +17,7 @@ describe('Drilldown Menu', function() {
     </li>
     <li>
       <a href="#">Item 2</a>
-      <ul class="menu">
+      <ul id="Menu-2" class="menu">
         <li><a href="#Item-2A">Item 2A</a></li>
         <li><a href="#Item-2B">Item 2B</a></li>
       </ul>
@@ -248,6 +247,7 @@ describe('Drilldown Menu', function() {
       // Open the Drilldown
       $trigger.focus().trigger('click');
 
+      // 3 items (including the back button) is around 115px height
       $wrapper.height().should.be.within(110, 120);
     });
 
@@ -259,6 +259,19 @@ describe('Drilldown Menu', function() {
       $wrapper.height().should.be.equal(0);
     });
 
+    it('correctly resize when reopened on a submenu', function () {
+      // Open the Drilldown
+      $trigger.focus().trigger('click');
+      // Show a submenu with a smaller height
+      plugin._showMenu($html.find('#Menu-1A'));
+      // Close then reopen the the Drilldown
+      $trigger.focus().trigger('click');
+      $trigger.focus().trigger('click');
+
+      // 2 items (including the back button) is around 75px height
+      $wrapper.height().should.be.within(70, 80);
+    });
+
     afterEach(function () {
       togglerPlugin.destroy();
     });