@sapudex/web-components 2.1.1 → 2.3.0

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -1,7 +1,4 @@
-import UDExBreadcrumbs from "../../src/Breadcrumbs.js";
-import UDExBreadcrumbsItem from "../../src/BreadcrumbsItem.js";
-import UDExButton from "../../src/Button.js";
-import UDExSecondaryNavigation from "../../src/SecondaryNavigation.js";
+import { UDExBreadcrumbs, UDExBreadcrumbsItem, UDExButton, UDExSecondaryNavigation } from "../support/component-imports.js";
 import navItems, { additionalNavItems } from "../fixtures/secondary-navigation-items.js";
 
 const defaultSecondaryNavigation = <UDExSecondaryNavigation
@@ -29,60 +26,49 @@ const secondaryNavigationWithoutBreadcrumbs = <UDExSecondaryNavigation
 </UDExSecondaryNavigation>
 
 describe("Desktop", () => {
-  let itemClickHandler;
-  let navigation: Cypress.Chainable<JQuery<HTMLElement>>
-  let navigationItems: Cypress.Chainable<JQuery<HTMLElement>>;
-  let firstNavItem: Cypress.Chainable<JQuery<HTMLElement>>
-
   beforeEach( () => {
-    cy.mount(defaultSecondaryNavigation)
     cy.viewport(1920, 1080)
-    navigation = cy.get("#secondary-nav")
-    navigationItems = navigation.shadow().find("udex-secondary-navigation-item");
-    firstNavItem = navigationItems.first();
-    itemClickHandler = cy.stub().as("itemClickHandler");
-    document.addEventListener("item-click", itemClickHandler);
-  });
-
-  afterEach( () => {
-    navigation = null;
-    navigationItems = null;
-    firstNavItem = null;
-    document.removeEventListener("item-click", itemClickHandler);
-    itemClickHandler = null;
+    cy.mount(defaultSecondaryNavigation)
+    const itemClickHandler = cy.stub().as("itemClickHandler");
+    cy.get("#secondary-nav").then($navigation => {
+      $navigation[0].addEventListener("item-click", itemClickHandler)
+    })
   });
 
   it("correctly renders", () => {
-    navigation.shadow().find(".udex-secondary-navigation__root").should("exist")
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__root").should("exist")
   });
 
   it("renders breadcrumbs slot", () => {
-    navigation.shadow().find("slot[slot='breadcrumbs'][name='breadcrumbs']").should("exist")
+    cy.get("#secondary-nav").shadow().find("slot[name='breadcrumbs']").should("exist")
   });
 
   it("renders buttons slot", () => {
-    navigation.shadow().find("slot[slot='buttons'][name='buttons']").should("exist")
+    cy.get("#secondary-nav").shadow().find("slot[name='buttons']").should("exist")
   });
 
   it("renders heading", () => {
-    navigation.shadow().find(".udex-secondary-navigation__title").should("have.text", "Secondary title")
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__title").should("have.text", "Secondary title")
   });
 
   it("tests if component renders heading as a link", () => {
-    navigation.shadow().find(".udex-secondary-navigation__title").click()
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__title").then($headingLink => {
+      $headingLink[0].removeAttribute("href")
+    }).click()
   });
 
   it("tests if component renders visible items", () => {
-    navigation.shadow().find(".udex-secondary-navigation__list-item").should("have.length", 7)
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__list-item").should("have.length", 7)
   });
 
   it("item component renders label", () => {
-    firstNavItem.should("have.text", "Secondary Navigation 1");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .should("have.attr", "label", "Secondary Navigation 1");
   });
 
   it("item component renders dropdown after clicking", () => {
-    firstNavItem.click();
-    firstNavItem.shadow().find(".udex-secondary-navigation__dropdown").should("be.visible")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible")
   });
 
   it("emits 'item-click' event and displays item info", () => {
@@ -91,126 +77,137 @@ describe("Desktop", () => {
       target: "_self",
     }
 
-    navigationItems.first().click()
-    cy.get("@itemClickHandler").should("have.been.called").its("firstCall.args.0.detail.clickedItem").should("include", expectedDetails)
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include", expectedDetails)
   });
 
   it("closes dropdown after clicking outside", () => {
-    firstNavItem.click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click();
     cy.get("html").click()
 
-    firstNavItem.should("not.have.attr", "is-open")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().should("not.have.attr", "is-open")
   });
 
   it("closes dropdown after clicking on another item", () => {
-    firstNavItem.click();
-    navigationItems.eq(1).click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1).click();
 
-    firstNavItem.shadow().get(".udex-secondary-navigation__dropdown").should("not.exist")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().get(".udex-secondary-navigation__dropdown").should("not.exist")
   });
 
-  it("dropdown renders items",  () => {
-    firstNavItem.click();
-
-    const firstLevelItems = firstNavItem.shadow().find("udex-secondary-navigation-sub-item");
-    firstLevelItems.eq(0).should("have.text", "secondary nested 1")
-    firstLevelItems.eq(1).should("have.text", "secondary nested 2")
-    firstLevelItems.eq(2).should("have.text", "secondary nested 3")
+  it("dropdown renders items", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "label", "secondary nested 1")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "secondary nested 2")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "secondary nested 3")
   });
 
-  it("dropdown renders nested items after clicking on the nested item",  () => {
-    firstNavItem.click();
+  it("dropdown renders nested items after clicking on the nested item", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").first().click()
 
-    const firstLevelItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first()
-    firstLevelItem.click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "label", "secondary nested 1")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "tertiary nested 1")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "tertiary nested 2")
 
-    const secondLevelItems = firstNavItem.shadow().find("udex-secondary-navigation-sub-item");
-    secondLevelItems.eq(0).should("have.text", "secondary nested 1")
-    secondLevelItems.eq(1).should("have.text", "tertiary nested 1")
-    secondLevelItems.eq(2).should("have.text", "tertiary nested 2")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(2).click();
 
-    secondLevelItems.eq(2).click();
-
-    const thirdLevelItems = firstNavItem.shadow().find("udex-secondary-navigation-sub-item");
-    thirdLevelItems.eq(0).should("have.text", "tertiary nested 2");
-    thirdLevelItems.eq(1).should("have.text", "quatenary nested 1");
-    thirdLevelItems.eq(2).should("have.text", "quatenary nested 2");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "label", "tertiary nested 2");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "quaternary nested 1");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "quaternary nested 2");
   });
 
-  it("tests if the dropdown renders previous nested items after clicking back on the nested item",  () => {
-    firstNavItem.click();
+  it("dropdown renders previous nested items after clicking back on the nested item", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click();
 
-    const firstLevelItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first();
-    firstLevelItem.click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find("udex-secondary-navigation-sub-item").first()
+    .click();
 
-    const secondLevelBackItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first();
-    secondLevelBackItem.click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").first().click()
 
-    const items = firstNavItem.shadow().find("udex-secondary-navigation-sub-item");
-    items.eq(0).should("have.text", "secondary nested 1")
-    items.eq(1).should("have.text", "secondary nested 2")
-    items.eq(2).should("have.text", "secondary nested 3")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "label", "secondary nested 1")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "secondary nested 2")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "secondary nested 3")
   });
 
   it("opens dropdown on Enter key press", () => {
-  navigation.shadow()
-    .find(".udex-secondary-navigation__title")
+    cy.get("#secondary-nav").shadow()
+    .find(".udex-secondary-navigation__title").then($headingLink => {
+      $headingLink[0].removeAttribute("href")
+    })
     .click()
     .realPress("Tab").realPress("Enter");
 
-  firstNavItem.shadow()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow()
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible");
   });
 
   it("closes dropdown on Esc key press", () => {
-  navigation.shadow()
-    .find(".udex-secondary-navigation__title")
+    cy.get("#secondary-nav").shadow()
+    .find(".udex-secondary-navigation__title").then($headingLink => {
+      $headingLink[0].removeAttribute("href")
+    })
     .click()
     .realPress("Tab").realPress("Escape");
 
-  firstNavItem.shadow()
+  cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow()
     .find(".udex-secondary-navigation__dropdown")
-    .should("not.be.visible");
+    .should("not.exist");
   });
 
   it("moves focus to next item with ArrowRight", () => {
-    const secondNavItem = cy.get("#secondary-nav").shadow().find("li").eq(1).find("udex-secondary-navigation-item")
-    secondNavItem.click().realPress("{rightarrow}").realPress("Enter");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
+    .click().realPress("{rightarrow}").realPress("Enter");
 
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include", {title: "Secondary Navigation 3"})
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", {clickedIndex: 2})
   });
 
   it("moves focus to previous item with ArrowLeft", () => {
-    const secondNavItem = cy.get("#secondary-nav").shadow().find("li").eq(1).find("udex-secondary-navigation-item")
-    secondNavItem.click().realPress("{leftarrow}").realPress("Enter");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
+    .click().realPress("{leftarrow}").realPress("Enter");
 
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 1"})
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", {clickedIndex: 0})
   });
 
   it("navigates right into nested item", () => {
-    firstNavItem.click().realPress("{rightarrow}").shadow()
-    .find("udex-secondary-navigation-sub-item")
-    .first()
-    .should("have.attr", "is-back");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .click()
+    .realPress("{downarrow}").realPress("Enter")
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2"})
   });
 
   it("navigates left back from nested item", () => {
-    firstNavItem.click().realPress("{downarrow}").realPress("{rightarrow}").realPress("{leftarrow}").shadow()
-    .find("udex-secondary-navigation-sub-item")
-    .first()
-    .should("have.text", "secondary nested 1");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .click().shadow().find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
+    .realPress("{downarrow}").realPress("{rightarrow}").realPress("{leftarrow}").realPress("Enter")
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2"})
   });
 
   it("renders button when path is missing", () => {
-    firstNavItem.shadow().find(".udex-secondary-navigation__item")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find(".udex-secondary-navigation__item")
     .should("have.prop", "tagName").and("eq", "BUTTON");
   });
 
   it("renders anchor when path is present", () => {
-    navigationItems.eq(2)
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2)
     .shadow()
     .find(".udex-secondary-navigation__item")
     .should("have.prop", "tagName")
@@ -218,42 +215,39 @@ describe("Desktop", () => {
   });
 
   it("button has 'active' attribute after click", () => {
-    firstNavItem.click()
-    .should("have.attr", "active");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1).click()
+    .should("have.attr", "active")
   });
 
   it("link has 'active' attribute after click", () => {
-    navigationItems.eq(2).click()
-    .should("have.attr", "active");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2).click()
+    .should("have.attr", "active")
   });
 
-  it("closes navigation and focuses previous item", () => {
+  it("closes navigation and focuses Secondary title on Shift+Tab", () => {
     cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5)
-    .click().realPress("{downarrow}").realPress("{downarrow}").realPress(["Shift", "Tab"]).realPress("Enter");
+    .click().realPress("{downarrow}").realPress("{downarrow}").realPress(["Shift", "Tab"]);
 
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 5" })
+    cy.get("udex-secondary-navigation").shadow().find(".udex-secondary-navigation__title").should("be.focused");
   });
 
-  it("moves focus to next item on Tab", () => {
-    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(3).click().realPress("Tab").realPress("Enter");
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 5" })
-  });
-
-  it("moves focus to previous item on Shift+Tab", () => {
-    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(1).click().realPress(["Shift", "Tab"]).realPress("Enter");
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 1" })
+  it("moves focus to Buy now button on Tab", () => {
+    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5).click().realPress("Tab");
+    cy.get("#buy-now").should("be.focused");
   });
 
   it("moves focus to next item on `More option`", () => {
-    navigationItems.eq(6).click().realPress("{downarrow}").realPress("Tab").realPress("Enter").should("have.focus")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6).click().realPress("{downarrow}").realPress("Tab").realPress("Enter")
+    cy.get("#secondary-nav").find("udex-button").then($button => {
+        const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after")
+        expect(buttonBorder).to.eq('rgb(0, 100, 217)');
+      })
   });
 
   it("dynamically changed nav-items attribute is applied", () => {
-    navigation.invoke("attr", "nav-items", JSON.stringify(additionalNavItems));
+    cy.get("#secondary-nav").invoke("attr", "nav-items", JSON.stringify(additionalNavItems));
 
-    navigation.shadow().find(".udex-secondary-navigation__list-item").should("have.length", 3)
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__list-item").should("have.length", 3)
   });
 
   it("dynamically changes navigation visible items", () => {
@@ -273,7 +267,7 @@ describe("Desktop", () => {
       cy.mount(secondaryNavigationWithoutBreadcrumbs)
       cy.viewport(1080, 640);
     })
-  
+
     it("has the attr \"data-horizontal-align=`right`\" when doesn't fit", () => {
       const moreNavItem = cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5);
       moreNavItem.click();
@@ -292,19 +286,19 @@ describe("Desktop", () => {
     });
   })
 
-  it("closes dropdown and focuses next item", () => {
-    navigationItems.first().click()
-    firstNavItem.shadow()
+  it("closes dropdown and focuses buy now button", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible")
-    .realPress("Tab").realPress("{enter}")
+    .realPress("Tab")
 
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 2" })
+    cy.get("#buy-now").should("be.focused");
   });
 
-  it("navigates deep dropdown and focuses next item", () => {
-    navigationItems.first().click()
-    firstNavItem.shadow()
+  it("navigates deep dropdown and focuses buy now button", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible")
     .realPress("{downarrow}")
@@ -314,16 +308,14 @@ describe("Desktop", () => {
     .realPress("{rightarrow}")
     .realPress("{downarrow}")
     .realPress("{downarrow}")
-    .realPress("Tab")
-    .realPress("Tab")
-    .realPress("{enter}");
+    .realPress("Tab");
 
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 3" })
+    cy.get("#buy-now").should("be.focused");
   });
 
   it("focuses last dropdown item with End key", () => {
-    navigationItems.first().click()
-    firstNavItem.shadow()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible")
     .realPress("{downarrow}")
@@ -334,8 +326,8 @@ describe("Desktop", () => {
   });
 
   it("focuses first dropdown item on Home key", () => {
-    navigationItems.first().click()
-    firstNavItem.shadow()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible")
     .realPress("{downarrow}")
@@ -347,7 +339,10 @@ describe("Desktop", () => {
   });
 
   it("moves focus down in dropdown with ArrowDown", () => {
-    navigationItems.first().click()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
     .realPress("{downarrow}")
     .realPress("{downarrow}")
     .realPress("{enter}");
@@ -356,7 +351,10 @@ describe("Desktop", () => {
   });
 
   it("moves focus up in dropdown with ArrowUp", () => {
-    navigationItems.first().click()
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+    .shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
     .realPress("{downarrow}")
     .realPress("{downarrow}")
     .realPress("{uparrow}")
@@ -364,4 +362,4 @@ describe("Desktop", () => {
 
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2", path: "#secondary_nested_2"})
   });
-});
+});

package/cypress/specs/SecondaryNavigationMobile.cy.tsx

@@ -1,7 +1,4 @@
-import UDExBreadcrumbs from "../../src/Breadcrumbs.js";
-import UDExBreadcrumbsItem from "../../src/BreadcrumbsItem.js";
-import UDExButton from "../../src/Button.js";
-import UDExSecondaryNavigation from "../../src/SecondaryNavigation.js";
+import { UDExBreadcrumbs, UDExBreadcrumbsItem, UDExButton, UDExSecondaryNavigation } from "../support/component-imports.js";
 import navItems from "../fixtures/secondary-navigation-items.js";
 
 const defaultSecondaryNavigation = <UDExSecondaryNavigation
@@ -23,70 +20,62 @@ const defaultSecondaryNavigation = <UDExSecondaryNavigation
 
 describe("SecondaryNavigation", () => {
   describe("Mobile", () => {
-    let mobileNavOpener: Cypress.Chainable<JQuery<HTMLElement>>;
 
     beforeEach(() => {
-      cy.mount(defaultSecondaryNavigation)
       cy.viewport(979, 1080)
-      mobileNavOpener = cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav");
-    });
-
-    afterEach( () => {
-      mobileNavOpener = null;
+      cy.mount(defaultSecondaryNavigation)
     });
 
     it("mobile opener visible", () => {
-      mobileNavOpener.should("be.visible")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").should("be.visible")
     });
 
     it("mobile dropdown hidden", () => {
-      mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown").should("not.exist")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__dropdown").should("not.exist")
     });
 
     it("renders \"mobileLinkTitle\" for the item", () => {
-      mobileNavOpener.click();
-      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
-      const mobileItems = mobileDropdown.shadow().find("udex-secondary-navigation-sub-item");
-      mobileItems.first().should("have.text", "Secondary Navigation 1 mobile")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click()
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+      .shadow().find("udex-secondary-navigation-sub-item").first()
+      .should("have.attr", "mobile-link-title", "Secondary Navigation 1 mobile")
     });
 
     it("renders \"title\" for the item when no \"mobileLinkTitle\"", () => {
-      mobileNavOpener.click();
-      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
-      const mobileItems = mobileDropdown.shadow().find("udex-secondary-navigation-sub-item");
-      mobileItems.eq(1).should("have.text", "Secondary Navigation 2")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click()
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+      .shadow().find("udex-secondary-navigation-sub-item").eq(1)
+      .should("have.attr", "label", "Secondary Navigation 2")
     });
 
     it("opens/closes by pressing the mobile button", () => {
-      mobileNavOpener.click();
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
 
-      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
-      mobileDropdown.should("be.visible")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__dropdown")
+      .should("be.visible")
 
-      mobileNavOpener.click();
-      mobileDropdown.should("not.be.visible")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__dropdown")
+      .should("not.exist")
     });
 
     it("closes after pressing the mobile navigation item", () => {
-      mobileNavOpener.click();
-
-      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
-      const mobileItems = mobileDropdown.shadow().find("udex-secondary-navigation-sub-item");
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
 
-      mobileItems.eq(2).click();
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__dropdown")
+      .should("be.visible")
 
-      mobileDropdown.should("not.be.visible")
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find("udex-secondary-navigation-sub-item").eq(2).click();
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__dropdown")
+      .should("not.exist")
     });
 
     it("active title changes when pressing navigation item", () => {
-      mobileNavOpener.click();
-
-      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
-      const mobileItems = mobileDropdown.shadow().find("udex-secondary-navigation-sub-item");
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
 
-      mobileItems.eq(2).click();
+      cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find("udex-secondary-navigation-sub-item").eq(2).click();
 
-      const subTitle = mobileNavOpener.find(".udex-secondary-navigation__item-sub-title");
+      const subTitle = cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").shadow().find(".udex-secondary-navigation__item-sub-title");
       subTitle.should("have.text", "Secondary Navigation 3 mobile");
     });
   });