Add test for nested accordions expanding their parents when remotely …

…activated (#22) Add a new test which confirms that when a nested accordion is expanded via event (or deep link, which also triggers the respective event), the event bubbles up to parent accordions and ensures they are also expanded.
webfactory · Jan 2, 2024 · f4eaed0 · f4eaed0
1 parent ea134e8
commit f4eaed0
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 2 deletions.
diff --git a/tests/basic-integration.test.js b/tests/basic-integration.test.js
@@ -1,6 +1,6 @@
 import { simulateClick } from './helpers/interactions';
 import { isExpanded, isCollapsed } from './helpers/state';
-import { createAccordionGroup } from "./mocks/accordion.html";
+import { createAccordionGroup, createNestedAccordionGroup } from "./mocks/accordion.html";
 import { wfaccordionsInit } from '../src/accordion';
 
 describe('Simple accordion e2e tests', () => {
@@ -116,6 +116,29 @@ describe('Simple accordion e2e tests', () => {
         expect(isExpanded(accordion)).toBeTruthy();
     });
 
+    test('Nested accordion expands parent accordion if nested accordion is remotely opened', () => {
+        const customOuterId = 'outer-accordion';
+        const customInnerId = 'nested-inner-accordion';
+
+        createNestedAccordionGroup({
+            outerId: customOuterId,
+            innerId: customInnerId,
+        });
+
+        delete window.location;
+        window.location = new URL(`https://www.example.com#${customInnerId}`);
+
+        wfaccordionsInit();
+
+        const outerAccordionTrigger = document.getElementById(customOuterId);
+        const outerAccordion = outerAccordionTrigger.closest('.js-accordion');
+
+        const innerAccordionTrigger = document.getElementById(customInnerId);
+        const innerAccordion = innerAccordionTrigger.closest('.js-accordion');
+
+        expect(isExpanded(outerAccordion) && isExpanded(innerAccordion)).toBeTruthy();
+    });
+
     test('Accordion can be disabled and have no panel', () => {
         createAccordionGroup({dataAttr: 'data-wf-accordion-disabled', hasPanel: false});
 

diff --git a/tests/mocks/accordion.html.js b/tests/mocks/accordion.html.js
@@ -28,7 +28,7 @@ export function createAccordionGroup(options) {
 
     document.body.innerHTML = `
         <div class="js-accordion-group">
-            <div ${htmlId} class="js-accordion js-accordion--cke" ${htmlDataAttr}>
+            <div ${htmlId} class="js-accordion" ${htmlDataAttr}>
                 <div class="js-accordion__header">
                     ${placeholderOuterHtml}
                 </div>
@@ -38,6 +38,59 @@ export function createAccordionGroup(options) {
       `;
 }
 
+export function createNestedAccordionGroup(options) {
+    // set defaults
+    options = {
+        ...{
+            outerId: undefined,
+            outerDataAttr: undefined,
+            outerPlaceholder: undefined,
+            outerPlaceholderContent: undefined,
+            outerHasPanel: true,
+
+            innerId: undefined,
+            innerDataAttr: undefined,
+            innerPlaceholder: undefined,
+            innerPlaceholderContent: undefined,
+            innerHasPanel: true,
+        },
+        ...options
+    }
+    let outerHtmlId = options.outerId ? `id="${options.outerId}"` : '';
+    let outerHtmlDataAttr = options.outerDataAttr ?? '';
+    let outerPlaceholderInnerHtml = options.outerPlaceholderContent ? options.outerPlaceholderContent : `Outer title`;
+    let outerPlaceholderOuterHtml = options.outerPlaceholder ? options.outerPlaceholder : `<div class="js-accordion__trigger">${outerPlaceholderInnerHtml}</div>`;
+
+    let innerHtmlId = options.innerId ? `id="${options.innerId}"` : '';
+    let innerHtmlDataAttr = options.innerDataAttr ?? '';
+    let innerPanel = options.innerHasPanel ? `<div class="js-accordion__panel">Inner text</div>` : '';
+
+        let outerPanel = options.outerHasPanel ?
+            `<div class="js-accordion__panel">
+                <p>Outer Text</p>
+                <div class="js-accordion-group">
+                    <div ${innerHtmlId} class="js-accordion nested-inner" ${innerHtmlDataAttr}>
+                        <div class="js-accordion__header">
+                            <div class="js-accordion__trigger">Inner title</div>
+                        </div>
+                        ${innerPanel}
+                    </div>
+                </div>
+            </div>` : '';
+
+    document.body.innerHTML = `
+        <div class="js-accordion-group">
+            <div ${outerHtmlId} class="js-accordion nested-outer" ${outerHtmlDataAttr}>
+                <div class="js-accordion__header">
+                    ${outerPlaceholderOuterHtml}
+                </div>
+                ${outerPanel}
+            </div>
+        </div>
+      `;
+}
+
 export default {
     createAccordionGroup,
+    createNestedAccordionGroup,
 };