@sapudex/web-components 0.225.0 → 2.0.0

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -0,0 +1,367 @@
+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 navItems, { additionalNavItems } from "../fixtures/secondary-navigation-items.js";
+
+const defaultSecondaryNavigation = <UDExSecondaryNavigation
+  id="secondary-nav"
+  heading="Secondary title"
+  navItems={JSON.stringify(navItems)}
+  headingHref="www.sap.com"
+  style="z-index: 11">
+    <UDExBreadcrumbs show-items="5" slot="breadcrumbs">
+      <UDExBreadcrumbsItem href="https://www.sap.com" icon="home" target="_blank" accessibleName="Home page">SAP Home</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Second level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Third level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fourth level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fifth level</UDExBreadcrumbsItem>
+    </UDExBreadcrumbs>
+    <UDExButton id="buy-now" size="Small" design="Secondary" slot="buttons">Buy Now</UDExButton>
+    <UDExButton size="Small" slot="buttons">Request Demo</UDExButton>
+</UDExSecondaryNavigation>
+
+const secondaryNavigationWithoutBreadcrumbs = <UDExSecondaryNavigation
+  id="secondary-nav-without-breadcrumbs"
+  heading="Secondary title"
+  navItems={JSON.stringify(navItems)}
+  style="z-index: 11">
+</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;
+  });
+
+  it("correctly renders", () => {
+    navigation.shadow().find(".udex-secondary-navigation__root").should("exist")
+  });
+
+  it("renders breadcrumbs slot", () => {
+    navigation.shadow().find("slot[slot='breadcrumbs'][name='breadcrumbs']").should("exist")
+  });
+
+  it("renders buttons slot", () => {
+    navigation.shadow().find("slot[slot='buttons'][name='buttons']").should("exist")
+  });
+
+  it("renders heading", () => {
+    navigation.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()
+  });
+
+  it("tests if component renders visible items", () => {
+    navigation.shadow().find(".udex-secondary-navigation__list-item").should("have.length", 7)
+  });
+
+  it("item component renders label", () => {
+    firstNavItem.should("have.text", "Secondary Navigation 1");
+  });
+
+  it("item component renders dropdown after clicking", () => {
+    firstNavItem.click();
+    firstNavItem.shadow().find(".udex-secondary-navigation__dropdown").should("be.visible")
+  });
+
+  it("emits 'item-click' event and displays item info", () => {
+    const expectedDetails = {
+      title: "Secondary Navigation 1",
+      target: "_self",
+    }
+
+    navigationItems.first().click()
+    cy.get("@itemClickHandler").should("have.been.called").its("firstCall.args.0.detail.clickedItem").should("include", expectedDetails)
+  });
+
+  it("closes dropdown after clicking outside", () => {
+    firstNavItem.click();
+    cy.get("html").click()
+
+    firstNavItem.should("not.have.attr", "is-open")
+  });
+
+  it("closes dropdown after clicking on another item", () => {
+    firstNavItem.click();
+    navigationItems.eq(1).click();
+
+    firstNavItem.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 nested items after clicking on the nested item",  () => {
+    firstNavItem.click();
+
+    const firstLevelItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first()
+    firstLevelItem.click();
+
+    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")
+
+    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");
+  });
+
+  it("tests if the dropdown renders previous nested items after clicking back on the nested item",  () => {
+    firstNavItem.click();
+
+    const firstLevelItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first();
+    firstLevelItem.click();
+
+    const secondLevelBackItem = firstNavItem.shadow().find("udex-secondary-navigation-sub-item").first();
+    secondLevelBackItem.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")
+  });
+
+  it("opens dropdown on Enter key press", () => {
+  navigation.shadow()
+    .find(".udex-secondary-navigation__title")
+    .click()
+    .realPress("Tab").realPress("Enter");
+
+  firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible");
+  });
+
+  it("closes dropdown on Esc key press", () => {
+  navigation.shadow()
+    .find(".udex-secondary-navigation__title")
+    .click()
+    .realPress("Tab").realPress("Escape");
+
+  firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("not.be.visible");
+  });
+
+  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("@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("@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");
+  });
+
+  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");
+  });
+
+  it("renders button when path is missing", () => {
+    firstNavItem.shadow().find(".udex-secondary-navigation__item")
+    .should("have.prop", "tagName").and("eq", "BUTTON");
+  });
+
+  it("renders anchor when path is present", () => {
+    navigationItems.eq(2)
+    .shadow()
+    .find(".udex-secondary-navigation__item")
+    .should("have.prop", "tagName")
+    .should("eq", "A");
+  });
+
+  it("button has 'active' attribute after click", () => {
+    firstNavItem.click()
+    .should("have.attr", "active");
+  });
+
+  it("link has 'active' attribute after click", () => {
+    navigationItems.eq(2).click()
+    .should("have.attr", "active");
+  });
+
+  it("closes navigation and focuses previous item", () => {
+    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5)
+    .click().realPress("{downarrow}").realPress("{downarrow}").realPress(["Shift", "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 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 next item on `More option`", () => {
+    navigationItems.eq(6).click().realPress("{downarrow}").realPress("Tab").realPress("Enter").should("have.focus")
+  });
+
+  it("dynamically changed nav-items attribute is applied", () => {
+    navigation.invoke("attr", "nav-items", JSON.stringify(additionalNavItems));
+
+    navigation.shadow().find(".udex-secondary-navigation__list-item").should("have.length", 3)
+  });
+
+  it("dynamically changes navigation visible items", () => {
+    cy.mount(defaultSecondaryNavigation)
+    cy.viewport(1024, 640);
+    cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__list-item").should("have.length", 4)
+  });
+
+  it("has class when no breadcrumbs", () => {
+    cy.mount(secondaryNavigationWithoutBreadcrumbs)
+    const rootClass = "udex-secondary-navigation__root udex-secondary-navigation__root_centered";
+    cy.get("#secondary-nav-without-breadcrumbs").shadow().find("div").first().should("have.attr", "class", rootClass)
+  });
+
+  describe("Direction atributes", () => {
+    beforeEach(() => {
+      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();
+      moreNavItem.shadow().find(".udex-secondary-navigation__dropdown")
+      .should("have.attr", "data-horizontal-align", "right")
+    });
+
+    it("has the attr \"data-horizontal-align=`left`\" when doesn't fit in the \"rtl\" mode", () => {
+      cy.get("body").invoke("attr", "dir", "rtl");
+      const moreNavItem = cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5);
+      moreNavItem.
+      click()
+      .shadow()
+      .find(".udex-secondary-navigation__dropdown")
+      .should("have.attr", "data-horizontal-align", "left")
+    });
+  })
+
+  it("closes dropdown and focuses next item", () => {
+    navigationItems.first().click()
+    firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
+    .realPress("Tab").realPress("{enter}")
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 2" })
+  });
+
+  it("navigates deep dropdown and focuses next item", () => {
+    navigationItems.first().click()
+    firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
+    .realPress("{downarrow}")
+    .realPress("{rightarrow}")
+    .realPress("{downarrow}")
+    .realPress("{downarrow}")
+    .realPress("{rightarrow}")
+    .realPress("{downarrow}")
+    .realPress("{downarrow}")
+    .realPress("Tab")
+    .realPress("Tab")
+    .realPress("{enter}");
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 3" })
+  });
+
+  it("focuses last dropdown item with End key", () => {
+    navigationItems.first().click()
+    firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
+    .realPress("{downarrow}")
+    .realPress("End")
+    .realPress("{enter}");
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 3", path: "#secondary_nested_3" })
+  });
+
+  it("focuses first dropdown item on Home key", () => {
+    navigationItems.first().click()
+    firstNavItem.shadow()
+    .find(".udex-secondary-navigation__dropdown")
+    .should("be.visible")
+    .realPress("{downarrow}")
+    .realPress("{downarrow}")
+    .realPress("Home")
+    .realPress("{enter}");
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 1", path: "#secondary_nested_1"})
+  });
+
+  it("moves focus down in dropdown with ArrowDown", () => {
+    navigationItems.first().click()
+    .realPress("{downarrow}")
+    .realPress("{downarrow}")
+    .realPress("{enter}");
+
+    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 3", path: "#secondary_nested_3"})
+  });
+
+  it("moves focus up in dropdown with ArrowUp", () => {
+    navigationItems.first().click()
+    .realPress("{downarrow}")
+    .realPress("{downarrow}")
+    .realPress("{uparrow}")
+    .realPress("{enter}");
+
+    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

@@ -0,0 +1,93 @@
+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 navItems from "../fixtures/secondary-navigation-items.js";
+
+const defaultSecondaryNavigation = <UDExSecondaryNavigation
+  id="secondary-nav"
+  heading="Secondary title"
+  navItems={JSON.stringify(navItems)}
+  headingHref="www.sap.com"
+  style="z-index: 11">
+    <UDExBreadcrumbs show-items="5" slot="breadcrumbs">
+      <UDExBreadcrumbsItem href="https://www.sap.com" icon="home" target="_blank" accessibleName="Home page">SAP Home</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Second level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Third level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fourth level</UDExBreadcrumbsItem>
+      <UDExBreadcrumbsItem href="htttps://www.sap.com" target="_blank">Fifth level</UDExBreadcrumbsItem>
+    </UDExBreadcrumbs>
+    <UDExButton id="buy-now" size="Small" design="Secondary" slot="buttons">Buy Now</UDExButton>
+    <UDExButton size="Small" slot="buttons">Request Demo</UDExButton>
+</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;
+    });
+
+    it("mobile opener visible", () => {
+      mobileNavOpener.should("be.visible")
+    });
+
+    it("mobile dropdown hidden", () => {
+      mobileNavOpener.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")
+    });
+
+    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")
+    });
+
+    it("opens/closes by pressing the mobile button", () => {
+      mobileNavOpener.click();
+
+      const mobileDropdown = mobileNavOpener.shadow().find(".udex-secondary-navigation__dropdown");
+      mobileDropdown.should("be.visible")
+
+      mobileNavOpener.click();
+      mobileDropdown.should("not.be.visible")
+    });
+
+    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");
+
+      mobileItems.eq(2).click();
+
+      mobileDropdown.should("not.be.visible")
+    });
+
+    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");
+
+      mobileItems.eq(2).click();
+
+      const subTitle = mobileNavOpener.find(".udex-secondary-navigation__item-sub-title");
+      subTitle.should("have.text", "Secondary Navigation 3 mobile");
+    });
+  });
+})