chore(components, documentation): add e2e tests for nested accordions (…

…#3634)
swisspost · Oct 11, 2024 · 585990b · 585990b
1 parent e4c188f
commit 585990b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/packages/components/cypress/e2e/accordion.cy.ts b/packages/components/cypress/e2e/accordion.cy.ts
@@ -48,16 +48,42 @@ describe('accordion', () => {
   describe('nested', () => {
     beforeEach(() => {
       cy.getComponent('accordion', ACCORDION_ID, 'nested');
-      cy.get('@accordion').find('post-accordion post-accordion-item').as('nestedCollapsibles');
+      cy.get('@accordion').find('post-accordion-item').as('collapsibles');
+    });
+
+    it('should show the first nested element of the first element', () => {
+      cy.get('@collapsibles').eq(1).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(2).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(2).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should show the first nested element wrapped in a div in the second parent accordion element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(5).click();
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element wrapped in a div as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(7).click();
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(7).shadow().find('post-collapsible').should('be.visible');
     });
 
     it('should not propagate "postToggle" event from nested post-accordion', () => {
       cy.document().then(document => {
         const EventHandlerMock = cy.spy();
         Cypress.$(document.querySelector('post-accordion')).on('postToggle', EventHandlerMock);
 
-        cy.get('@nestedCollapsibles')
-          .last()
+        cy.get('@collapsibles')
+          .eq(3)
           .click()
           .then(() => {
             expect(EventHandlerMock).to.not.be.called;

diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -113,6 +113,7 @@ export const Nested: Story = {
       <post-accordion-item>
         ${getAccordionItemContent(mainAccordionIndex + 1, args.headingLevel)}
         ${mainAccordionIndex === 0 ? getNestedAccordion() : nothing}
+        <div>${mainAccordionIndex === 1 ? getNestedAccordion() : nothing}</div>
       </post-accordion-item>
     `;
   }),