Add test for block-grid accordion.

diff --git a/spec/accordion/accordion.js b/spec/accordion/accordion.js
index 5f85b50bfdadfea36bda4fa3f05e9dce7e46323f..e26f2395c1e5ab71a28e51f5a8a20fb1cd2cfa02 100644 (file)
--- a/spec/accordion/accordion.js
+++ b/spec/accordion/accordion.js
@@ -39,4 +39,32 @@ describe('accordion:', function() {
       expect($('#panel3')).toBeHidden();
     });
   });
+
+  describe('embedded grid accordion', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/accordion/grid.html'];
+    });
+
+    it('should switch to the clicked section', function() {
+      $(document).foundation();
+
+      $('#panel1c').prev().click();
+
+      expect($('#panel1c')).toBeVisible();
+      expect($('#panel2c')).toBeHidden();
+      expect($('#panel3c')).toBeHidden();
+      expect($('#panel4c')).toBeHidden();
+      expect($('#panel5c')).toBeHidden();
+      expect($('#panel6c')).toBeHidden();
+
+      $('#panel4c').prev().click();
+
+      expect($('#panel1c')).toBeHidden();
+      expect($('#panel2c')).toBeHidden();
+      expect($('#panel3c')).toBeHidden();
+      expect($('#panel4c')).toBeVisible();
+      expect($('#panel5c')).toBeHidden();
+      expect($('#panel6c')).toBeHidden();
+    });
+  });
 });

diff --git a/spec/accordion/grid.html b/spec/accordion/grid.html
new file mode 100644 (file)
index 0000000..236c99a
--- /dev/null
+++ b/spec/accordion/grid.html
@@ -0,0 +1,44 @@
+<dl class="accordion" data-accordion>
+  <ul class="small-block-grid-1 medium-block-grid-3">
+    <li>
+      <dd>
+        <a href="#panel1c">Accordion 1</a>
+        <div id="panel1c" class="content">
+          Panel 1. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel2c">Accordion 2</a>
+        <div id="panel2c" class="content">
+          Panel 2. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel3c">Accordion 3</a>
+        <div id="panel3c" class="content">
+          Panel 3. Lorem ipsum dolor
+        </div>
+      </dd>
+    </li>
+    <li>
+      <dd>
+        <a href="#panel4c">Accordion 4</a>
+        <div id="panel4c" class="content">
+          Panel 4. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel5c">Accordion 5</a>
+        <div id="panel5c" class="content">
+          Panel 5. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel6c">Accordion 6</a>
+        <div id="panel6c" class="content">
+          Panel 6. Lorem ipsum dolor
+        </div>
+      </dd>
+    </li>
+  </ul>
+</dl>