@sapudex/web-components 2.32.1 → 2.34.0

package/cypress/specs/MastheadShell.cy.tsx

@@ -0,0 +1,645 @@
+import {
+  UDExMastheadShell,
+  UDExMastheadItem,
+  UDExMastheadMenu,
+  UDExMastheadMobileMenu,
+  UDExMastheadProfileMenu,
+  UDExAvatar,
+  UDExSearch,
+} from "../support/component-imports.js";
+import { profileLoggedInUser, profileLinks, subItemsExplore, subItemsProduct } from "../fixtures/masthead-shell.js";
+
+const logoUrl = "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg";
+const homeUrl = "https://sap.com";
+const siteLabelUrl = "https://jobs.sap.com";
+
+const defaultMastheadShell = (
+  <UDExMastheadShell
+    id="mastheadShellDefault"
+    site-label-url={siteLabelUrl}
+    home-url={homeUrl}
+    logo-url={logoUrl}
+    site-label="Site Label"
+    homepage-aria-label="SAP Homepage"
+    site-label-aria-label="SAP Homepage"
+    close-button-accessible-name="Close Search"
+    mobile-close-button-accessible-name="Close Menu"
+    logo-alt="SAP Logo"
+    logo-title="SAP Title"
+    style="z-index: 11">
+    <UDExMastheadItem id="product-item" accessible-name="Products">
+      Products
+      <UDExMastheadMenu id="product-menu" menu-title="Menu Heading" slot="dropdown" subItems={JSON.stringify(subItemsProduct)}></UDExMastheadMenu>
+    </UDExMastheadItem>
+    <UDExMastheadItem id="support-item" accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem id="learning-item" accessible-name="Learning">Learning</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Partners">Partners</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="About">About</UDExMastheadItem>
+    <UDExSearch id="search" label="Search" mode={"Home Search" as any} slot="search" />
+    <UDExMastheadItem accessible-name="Explore SAP" slot="exploreSAP">
+      Explore SAP
+      <UDExMastheadMenu id="explore-menu" menu-title="Explore all areas of SAP" slot="dropdown" subItems={JSON.stringify(subItemsExplore)}/>
+    </UDExMastheadItem>
+    <UDExMastheadItem id="joule-item" icon="da" slot="joule" />
+    <UDExMastheadItem id="cart-item" icon="cart" slot="cart" />
+    <UDExMastheadItem id="support-item-icon" icon="sap-icon://sys-help" accessible-name="Get Help" slot="support">
+      <UDExMastheadMenu id="support-menu" slot="dropdown" />
+    </UDExMastheadItem>
+    <UDExMastheadItem id="profile-item" slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+      <UDExMastheadProfileMenu id="profile-menu" slot="dropdown" links={JSON.stringify(profileLinks)} loggedInUser={JSON.stringify(profileLoggedInUser)}/>
+    </UDExMastheadItem>
+    <UDExMastheadMobileMenu slot="mobileMenu">
+      <UDExMastheadItem id="product-mobile-item" accessible-name="Products" subItems={JSON.stringify(subItemsProduct)}>Products</UDExMastheadItem>
+      <UDExMastheadItem accessible-name="Support" href="https://www.sap.com/services-support.html">Support</UDExMastheadItem>
+      <UDExMastheadItem accessible-name="Learning" href="https://www.sap.com/training-certification.html">Learning</UDExMastheadItem>
+    </UDExMastheadMobileMenu>
+  </UDExMastheadShell>
+);
+
+const mastheadShellWithoutLogo = (
+  <UDExMastheadShell
+    id="mastheadShellWithoutLogo"
+    home-url={homeUrl}
+    site-label="Site Label">
+    <UDExMastheadItem accessible-name="Products">Products</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem icon="cart" slot="cart" />
+    <UDExMastheadItem slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+    </UDExMastheadItem>
+  </UDExMastheadShell>
+);
+
+const mastheadShellWithoutHomepageLink = (
+  <UDExMastheadShell
+    id="mastheadShellWithoutHomepageLink"
+    open-search-button-accessible-name="Open Search"
+    logo-url={logoUrl}
+    site-label="Site Label">
+    <UDExMastheadItem accessible-name="Products">Products</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Learning">Learning</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Partners">Partners</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="About">About</UDExMastheadItem>
+    <UDExMastheadItem slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+    </UDExMastheadItem>
+  </UDExMastheadShell>
+);
+
+const mastheadShellWithoutSiteLabel = (
+  <UDExMastheadShell
+    id="mastheadShellWithoutSiteLabel"
+    home-url={homeUrl}
+    logo-url={logoUrl}>
+    <UDExMastheadItem accessible-name="Products">Products</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+    </UDExMastheadItem>
+  </UDExMastheadShell>
+);
+
+const mastheadShellWithoutSearch = (
+  <UDExMastheadShell
+    id="mastheadShellWithoutSearch"
+    home-url={homeUrl}
+    logo-url={logoUrl}
+    site-label="Site Label">
+    <UDExMastheadItem accessible-name="Products">Products</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem icon="cart" slot="cart" />
+    <UDExMastheadItem slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+    </UDExMastheadItem>
+  </UDExMastheadShell>
+);
+
+const mastheadShellMApproach = (
+  <UDExMastheadShell
+    id="mastheadShellMApproach"
+    site-label-url={siteLabelUrl}
+    home-url={homeUrl}
+    logo-url={logoUrl}
+    site-label="Site Label"
+    homepage-aria-label="SAP Homepage"
+    site-label-aria-label="SAP Homepage"
+    close-button-accessible-name="Close Search"
+    logo-alt="SAP Logo"
+    logo-title="SAP Title"
+    style="z-index: 11">
+    <UDExMastheadItem id="product-item" accessible-name="Products">Products list</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support team</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Learning">Learning portal</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Partners">Partners portal</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="About">About us</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Community">Community team</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Industries">Industries</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="SAP Business">SAP Business</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="AI capabilities">AI capabilities</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Learning extra">Learning extra</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Partner Programs">Partner Programs</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="About">About us</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Community">Community team</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Industries">Industries</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="SAP Business">SAP Business</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="AI capabilities">AI capabilities</UDExMastheadItem>
+    <UDExSearch id="search-m" label="Search" mode={"Home Search" as any} slot="search" />
+    <UDExMastheadItem accessible-name="Explore SAP" slot="exploreSAP">
+      Explore SAP
+      <UDExMastheadMenu id="explore-menu" menu-title="Explore all areas of SAP" slot="dropdown" />
+    </UDExMastheadItem>
+    <UDExMastheadItem id="cart-item" icon="cart" slot="cart" />
+    <UDExMastheadItem id="profile-item" slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+      <UDExMastheadProfileMenu
+        id="profile-menu"
+        slot="dropdown">
+      </UDExMastheadProfileMenu>
+    </UDExMastheadItem>
+    <UDExMastheadMobileMenu slot="mobileMenu">
+      <UDExMastheadItem id="product-mobile-item" accessible-name="Products">Products</UDExMastheadItem>
+      <UDExMastheadItem accessible-name="Support" href="https://www.sap.com/services-support.html">Support</UDExMastheadItem>
+      <UDExMastheadItem accessible-name="Learning" href="https://www.sap.com/services-support.html">Learning</UDExMastheadItem>
+    </UDExMastheadMobileMenu>
+  </UDExMastheadShell>
+);
+
+const mastheadShellSearchDefault = (
+  <UDExMastheadShell
+    id="mastheadShellSearchDefault"
+    show-search-by-default
+    site-label-url={siteLabelUrl}
+    home-url={homeUrl}
+    logo-url={logoUrl}
+    site-label="Site Label"
+    homepage-aria-label="SAP Homepage"
+    site-label-aria-label="SAP Homepage"
+    close-button-accessible-name="Close Search"
+    logo-alt="SAP Logo"
+    logo-title="SAP Title"
+    style="z-index: 11">
+    <UDExMastheadItem accessible-name="Products">
+      Products
+      <UDExMastheadMenu menu-title="Menu Heading" slot="dropdown" />
+    </UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Support">Support</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Learning">Learning</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="Partners">Partners</UDExMastheadItem>
+    <UDExMastheadItem accessible-name="About">About</UDExMastheadItem>
+    <UDExSearch id="search-sd" label="Search" mode={"Home Search" as any} slot="search" />
+    <UDExMastheadItem accessible-name="Explore SAP" slot="exploreSAP">
+      Explore SAP
+      <UDExMastheadMenu menu-title="Explore all areas of SAP" slot="dropdown" />
+    </UDExMastheadItem>
+    <UDExMastheadItem icon="cart" slot="cart" />
+    <UDExMastheadItem slot="profile">
+      <UDExAvatar size="XS" initials="JS" color-scheme="Neutral" interactive />
+    </UDExMastheadItem>
+  </UDExMastheadShell>
+);
+
+describe("MastheadShell Default component", () => {
+  describe('"XL-L" screen sizes (1920x1080)', () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(defaultMastheadShell);
+      cy.get("#mastheadShellDefault").shadow().as("shell");
+    });
+
+    it("is correctly rendered", () => {
+      cy.get("@shell").find("header.udex-masthead-shell").should("exist");
+    });
+
+    it("logo is rendered", () => {
+      cy.get("@shell").find(".udex-masthead-shell__logo").should("be.visible");
+    });
+
+    it("logo is not rendered when logo-url property is not set", () => {
+      cy.mount(mastheadShellWithoutLogo);
+      cy.get("#mastheadShellWithoutLogo").shadow().find(".udex-masthead-shell__logo").should("not.exist");
+    });
+
+    it("logo is not a link when home-url property is not set", () => {
+      cy.mount(mastheadShellWithoutHomepageLink);
+      cy.get("#mastheadShellWithoutHomepageLink").shadow().find(".udex-masthead-shell__logo--link").should("not.exist");
+    });
+
+    it("logo is a link with correct href and target when home-url is set", () => {
+      cy.get("@shell").find(".udex-masthead-shell__logo--link")
+        .should("be.visible")
+        .and("have.attr", "href", "https://sap.com")
+        .and("have.attr", "target", "_self");
+    });
+
+    it("logo image src is correctly set", () => {
+      cy.get("@shell").find(".udex-masthead-shell__logo img")
+        .should("have.attr", "src", logoUrl);
+    });
+
+    it("site label text is 'Site Label'", () => {
+      cy.get("@shell").find(".udex-masthead-shell__site-label")
+        .should("have.text", "Site Label");
+    });
+
+    it("site label is not displayed when site-label property is not set", () => {
+      cy.mount(mastheadShellWithoutSiteLabel);
+      cy.get("#mastheadShellWithoutSiteLabel").shadow().find(".udex-masthead-shell__site-label").should("not.exist");
+    });
+
+    it("site label is a link with href='https://jobs.sap.com' when site-label-url is set", () => {
+      cy.get("@shell").find(".udex-masthead-shell__site-label--link")
+        .should("be.visible")
+        .and("have.attr", "href", "https://jobs.sap.com");
+    });
+
+    it("site label is not a link when home-url is not set", () => {
+      cy.mount(mastheadShellWithoutHomepageLink);
+      cy.get("#mastheadShellWithoutHomepageLink").shadow().find(".udex-masthead-shell__site-label--link").should("not.exist");
+    });
+
+    it("main menu renders 5 items", () => {
+      cy.get("@shell").find(".udex-masthead-shell__main-menu .udex-masthead-shell__item")
+        .should("have.length", 5);
+    });
+
+    it("'Explore SAP' item slot is rendered", () => {
+      cy.get("@shell").find(".udex-masthead-shell__explore slot[name='exploreSAP']").should("exist");
+    });
+
+    it("search icon item is displayed", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-icon").should("be.visible");
+    });
+
+    it("open search icon has default accessible name 'Search'", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-btn")
+        .should("have.attr", "accessible-name", "Search");
+    });
+
+    it("open search icon has custom accessible name when openSearchButtonAccessibleName is set to 'Open Search'", () => {
+      cy.get("#mastheadShellDefault").invoke("attr", "open-search-button-accessible-name", "Open Search");
+      cy.get("@shell").find(".udex-masthead-shell__search-btn")
+        .should("have.attr", "accessible-name", "Open Search");
+    });
+
+    it("search icon is not displayed when search slot is empty", () => {
+      cy.mount(mastheadShellWithoutSearch);
+      cy.get("#mastheadShellWithoutSearch").shadow().find(".udex-masthead-shell__search-icon").should("not.exist");
+    });
+
+    it("exploreSAP slot is rendered", () => {
+      cy.get("@shell").find('slot[name="exploreSAP"]').should("exist");
+    });
+
+    it("profile slot is rendered", () => {
+      cy.get("@shell").find('slot[name="profile"]').should("exist");
+    });
+
+    it("mobileMenu slot is rendered", () => {
+      cy.get("@shell").find('slot[name="mobileMenu"]').should("exist");
+    });
+
+    it("cart slot is rendered", () => {
+      cy.get("@shell").find('slot[name="cart"]').should("exist");
+    });
+
+    it("joule slot is rendered", () => {
+      cy.get("@shell").find('slot[name="joule"]').should("exist");
+    });
+
+    it("clicking an item with a dropdown shows the sub-menu", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+    });
+
+    it("logo title attribute is 'SAP Title'", () => {
+      cy.get("@shell").find(".udex-masthead-shell__logo")
+        .should("have.attr", "title", "SAP Title");
+    });
+
+    it("clicking search icon shows the search container", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-icon").click();
+      cy.get("@shell").find(".udex-masthead-shell__search-container").should("be.visible");
+    });
+
+    it("main menu is hidden while search container is open", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-icon").click();
+      cy.get("@shell").find(".udex-masthead-shell__main-menu").should("not.exist");
+    });
+
+    it("clicking the close icon hides the search container", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-icon").click();
+      cy.get("@shell").find("udex-control-button").click();
+      cy.get("@shell").find(".udex-masthead-shell__search-container").should("not.exist");
+    });
+
+    it("main menu is visible again after the search container is closed", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-icon").click();
+      cy.get("@shell").find("udex-control-button").click();
+      cy.get("@shell").find(".udex-masthead-shell__main-menu").should("be.visible");
+    });
+  });
+
+  describe('"S-XS" screen sizes (970x1080)', () => {
+    beforeEach(() => {
+      cy.viewport(970, 1080);
+      cy.mount(defaultMastheadShell);
+    });
+
+    it("logo is hidden when mobile menu opener is clicked", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__menu-btn").click();
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__logo").should("not.be.visible");
+    });
+
+    it("accessible name for mobile close button is 'Close Menu'", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__menu-btn").click();
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__close-btn")
+        .should("have.attr", "accessible-name", "Close Menu");
+    });
+  });
+
+  describe("Accessibility", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(defaultMastheadShell);
+    });
+
+    it("dropdown closes after pressing Escape key inside dropdown", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      cy.realPress("Escape");
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("not.exist");
+    });
+
+    it("focus returns to the item after pressing Escape inside dropdown", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      cy.realPress("Escape");
+      cy.get("#product-item").should("be.focused");
+    });
+
+    it("dropdown opens after clicking item (Enter-equivalent activation)", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+    });
+
+    it("aria-label for homepage link is 'SAP Homepage'", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__site-label--link")
+        .should("have.attr", "aria-label", "SAP Homepage");
+    });
+
+    it("accessible-name for search close button is 'Close Search'", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__search-icon").click();
+      cy.get("#mastheadShellDefault").shadow().find("udex-control-button")
+        .should("have.attr", "accessible-name", "Close Search");
+    });
+
+    it("alt attribute for logo image is 'SAP Logo'", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__logo img")
+        .should("have.attr", "alt", "SAP Logo");
+    });
+
+    it("Tab/Shift+Tab keyboard navigation on main menu items", () => {
+      cy.get("#support-item").realClick();
+      cy.realPress("Tab");
+      cy.get("#learning-item").should("be.focused");
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("#support-item").should("be.focused");
+    });
+  });
+
+  describe("Component events", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(defaultMastheadShell);
+
+      cy.document().then(doc => {
+        doc.addEventListener("click", (e: MouseEvent) => {
+          const anchor = e.composedPath().find((el) => (el as HTMLElement).tagName === "A");
+          if (anchor) {
+            e.preventDefault();
+          }
+        }, { capture: true });
+      });
+
+      cy.document().then(doc => {
+        ["eventComp", "eventSearchOpenClose"].forEach(id => {
+          if (!doc.getElementById(id)) {
+            const div = doc.createElement("div");
+            div.id = id;
+            doc.body.appendChild(div);
+          }
+        });
+      });
+
+      cy.get("#mastheadShellDefault").then($el => {
+        const shell = $el[0];
+
+        const capture = (id: string) => (e: Event) => {
+          const el = document.getElementById(id);
+          if (el) el.innerText = e.type;
+        };
+
+        const trackMain = capture("eventComp");
+        const trackOpenClose = capture("eventSearchOpenClose");
+
+        [
+          "ui5-search-click",
+          "ui5-support-click",
+          "ui5-search-close-click",
+          "ui5-cart-click",
+          "ui5-joule-click",
+          "ui5-profile-click",
+          "ui5-logo-click",
+          "ui5-site-label-click",
+          "ui5-mobile-menu-open",
+          "ui5-mobile-menu-close",
+        ].forEach(name => shell.addEventListener(name, trackMain));
+
+        ["ui5-search-opened", "ui5-search-closed"]
+          .forEach(name => shell.addEventListener(name, trackOpenClose));
+      });
+    });
+
+    afterEach(() => {
+      cy.document().then(doc => {
+        doc.getElementById("eventComp")?.remove();
+        doc.getElementById("eventSearchOpenClose")?.remove();
+      });
+    });
+
+    it("'ui5-cart-click' emits when clicking cart item", () => {
+      cy.get("#cart-item").click();
+      cy.get("#eventComp").should("have.text", "ui5-cart-click");
+    });
+
+    it("'ui5-joule-click' emits when clicking joule item", () => {
+      cy.get("#joule-item").click();
+      cy.get("#eventComp").should("have.text", "ui5-joule-click");
+    });
+
+    it("'ui5-support-click' emits when clicking support item", () => {
+      cy.get("#support-item-icon").click();
+      cy.get("#eventComp").should("have.text", "ui5-support-click");
+    });
+
+    it("'ui5-search-click' and 'ui5-search-opened' emit when clicking the search button", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__search-btn").click();
+      cy.get("#eventComp").should("have.text", "ui5-search-click");
+      cy.get("#eventSearchOpenClose").should("have.text", "ui5-search-opened");
+    });
+
+    it("'ui5-search-close-click' and 'ui5-search-closed' emit when clicking the close search button", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__search-icon").click();
+      cy.get("#mastheadShellDefault").shadow().find("udex-control-button").click();
+      cy.get("#eventComp").should("have.text", "ui5-search-close-click");
+      cy.get("#eventSearchOpenClose").should("have.text", "ui5-search-closed");
+    });
+
+    it("'ui5-profile-click' emits when clicking profile item", () => {
+      cy.get("#profile-item").click();
+      cy.get("#eventComp").should("have.text", "ui5-profile-click");
+    });
+
+    it("'ui5-logo-click' emits when clicking the logo", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__logo").click();
+      cy.get("#eventComp").should("have.text", "ui5-logo-click");
+    });
+
+    it("'ui5-site-label-click' emits when clicking the site label", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__site-label").click();
+      cy.get("#eventComp").should("have.text", "ui5-site-label-click");
+    });
+
+    it("'ui5-mobile-menu-open' emits at 970x1080 when clicking the mobile menu open button", () => {
+      cy.viewport(970, 1080);
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__menu-btn").click();
+      cy.get("#eventComp").should("have.text", "ui5-mobile-menu-open");
+    });
+
+    it("'ui5-mobile-menu-close' emits at 970x1080 when clicking the mobile menu close button", () => {
+      cy.viewport(970, 1080);
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__menu-btn").click();
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__close-btn").click();
+      cy.get("#eventComp").should("have.text", "ui5-mobile-menu-close");
+    });
+  });
+});
+
+describe("MastheadShell mobile mode", () => {
+  describe("desktop mode — items fit in available width", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(defaultMastheadShell);
+      cy.wait(500);
+    });
+
+    it("does not set _is-mobile-mode when 5 items fit at 1920px", () => {
+      cy.get("#mastheadShellDefault").should("not.have.attr", "_is-mobile-mode");
+    });
+
+    it("hamburger menu button is not visible when items fit", () => {
+      cy.get("#mastheadShellDefault").shadow().find(".udex-masthead-shell__menu-btn")
+        .should("not.be.visible");
+    });
+
+    it("main menu items are visible when items fit", () => {
+      cy.get("#mastheadShellDefault").shadow()
+        .find(".udex-masthead-shell__main-menu .udex-masthead-shell__item")
+        .should("be.visible");
+    });
+
+    it("component is visible (opacity 1) after handleMobileMode runs", () => {
+      cy.get("#mastheadShellDefault").should("have.css", "opacity", "1");
+    });
+  });
+
+  describe("mobile mode — items overflow available width", () => {
+    it("component is visible (opacity 1) after handleMobileMode runs", () => {
+      cy.viewport(1920, 1080);
+      cy.mount(mastheadShellMApproach);
+      cy.wait(1000);
+      cy.get("#mastheadShellMApproach").should("have.css", "opacity", "1");
+    });
+  });
+
+  describe("transition — mobile mode removed when viewport is widened", () => {
+    it("removes _is-mobile-mode when viewport grows to fit items", () => {
+      cy.viewport(400, 1080);
+      cy.mount(defaultMastheadShell);
+      cy.wait(500);
+      cy.viewport(1920, 1080);
+      cy.wait(500);
+      cy.get("#mastheadShellDefault").should("not.have.attr", "_is-mobile-mode");
+    });
+
+    it("hamburger button is hidden after resizing back to desktop width", () => {
+      cy.viewport(400, 1080);
+      cy.mount(defaultMastheadShell);
+      cy.wait(500);
+      cy.viewport(1920, 1080);
+      cy.wait(500);
+      cy.get("#mastheadShellDefault").shadow()
+        .find(".udex-masthead-shell__menu-btn")
+        .should("not.be.visible");
+    });
+  });
+});
+
+describe("MastheadShell Search-Focused", () => {
+  describe('"XL-M" screen sizes (1920x1080) — search open by default', () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(mastheadShellSearchDefault);
+      cy.get("#mastheadShellSearchDefault").shadow().as("shell");
+    });
+
+    it("search container is displayed by default", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-container").should("be.visible");
+    });
+
+    it("search open button is not visible when search is shown by default", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-btn").should("not.be.visible");
+    });
+
+    it("main navigation is not visible when search is shown by default", () => {
+      cy.get("@shell").find(".udex-masthead-shell__main-menu").should("not.exist");
+    });
+  });
+
+  describe('"S" screen sizes (970x1080)', () => {
+    beforeEach(() => {
+      cy.viewport(970, 1080);
+      cy.mount(mastheadShellSearchDefault);
+      cy.get("#mastheadShellSearchDefault").shadow().as("shell");
+    });
+
+    it("search is not visible at small viewport", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-container").should("not.be.visible");
+    });
+
+    it("search open button is visible at small viewport", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-btn").should("be.visible");
+    });
+
+    it("search is visible after clicking the search open button", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-btn").click();
+      cy.get("@shell").find(".udex-masthead-shell__search-container").should("be.visible");
+    });
+
+    it("logo is visible after clicking the search open button", () => {
+      cy.get("@shell").find(".udex-masthead-shell__search-btn").click();
+      cy.get("@shell").find(".udex-masthead-shell__logo").should("be.visible");
+    });
+  });
+
+  describe('"XS" screen sizes (630x1080)', () => {
+    it("logo is not visible after clicking the search open button at XS viewport", () => {
+      cy.viewport(630, 1080);
+      cy.mount(mastheadShellSearchDefault);
+      cy.get("#mastheadShellSearchDefault").shadow().find(".udex-masthead-shell__search-btn").click();
+      cy.get("#mastheadShellSearchDefault").shadow().find(".udex-masthead-shell__logo").should("not.be.visible");
+    });
+  });
+});