@sapudex/web-components 2.30.0 → 2.32.0

package/cypress/specs/Breadcrumbs.cy.tsx

@@ -46,6 +46,32 @@ describe("Breadcrumbs", () => {
     cy.mount(breadcrumbs);
   });
 
+  describe("item-click event source", () => {
+    beforeEach(() => {
+      const itemClickHandler = cy.stub().as("itemClickHandler");
+      cy.get("#breadcrumbs").then($breadcrumbs => {
+        $breadcrumbs[0].addEventListener("item-click", itemClickHandler);
+      });
+    });
+
+    it("fires item-click with source 'main' when clicking a visible breadcrumb link", () => {
+      cy.get("#breadcrumbs").shadow().find("[udex-link].udex-breadcrumbs__item--visible").first().click();
+      cy.get("@itemClickHandler")
+        .should("have.been.called")
+        .its("lastCall.args.0.detail.source")
+        .should("equal", "main");
+    });
+
+    it("fires item-click with source 'dropdown' when clicking an item inside the dropdown", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+      cy.get("#breadcrumbs").shadow().find("[udex-link].udex-breadcrumbs__item--hidden").first().click();
+      cy.get("@itemClickHandler")
+        .should("have.been.called")
+        .its("lastCall.args.0.detail.source")
+        .should("equal", "dropdown");
+    });
+  });
+
   it("tests if web component is correctly rendered", () => {
     cy.get("#breadcrumbs").shadow().find(".ui5-breadcrumbs-root").should("be.visible");
   });

package/cypress/specs/ListItem.cy.tsx

@@ -5,7 +5,7 @@ import { UDExAvatarSize } from "../../src/Avatar.js";
 import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
 
-const defaultListItem = <UDExListItem         
+const defaultListItem = <UDExListItem
   id="listItem"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -20,7 +20,7 @@ const defaultListItem = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemSuccess = <UDExListItem         
+const listItemSuccess = <UDExListItem
   id="listItemSuccess"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -33,7 +33,7 @@ const listItemSuccess = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemError = <UDExListItem         
+const listItemError = <UDExListItem
   id="listItemError"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -46,7 +46,7 @@ const listItemError = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWarning = <UDExListItem         
+const listItemWarning = <UDExListItem
   id="listItemWarning"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -59,7 +59,7 @@ const listItemWarning = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWithIcons = <UDExListItem         
+const listItemWithIcons = <UDExListItem
   id="listItemIcons"
   accessible-name="accessible-name"
   supporting-text="Supporting text"
@@ -80,36 +80,32 @@ describe("ListItem", () => {
         cy.get("[udex-list-item]").should("exist");
       });
     });
-  
+
     describe("Basic attributes", () => {
       beforeEach(() => {
         cy.mount(defaultListItem);
       });
-  
+
       it("has correct supporting text", () => {
         cy.get("#listItem").shadow().find(".udex-list__supporting-text").should("have.text", "Supporting text");
       });
-  
+
       it("has correct avatar", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("exist");
       });
-  
+
       it("has avatar of size M", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "size", "M");
       });
-  
+
       it("has avatar of shape Square", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "shape", "Square");
       });
-  
+
       it("has avatar with alternative text", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").find("img").should("have.attr", "alt", "Person Avatar");
       });
-  
-      it("renders bullet marker at the start of the item", () => {
-        cy.get("#listItem").shadow().find(".udex-list__circle").should("exist");
-      });
-  
+
       it("has correct accessibleName", () => {
         cy.get("#listItem").shadow().find(".udex-list__content-wrap").should(($wrapper) => {
           const itemId = $wrapper.attr("_id");
@@ -126,51 +122,51 @@ describe("ListItem", () => {
         cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "size", UDExAvatarSize.M);
       });
     });
-  
+
     describe("With Icons", () => {
       beforeEach(() => {
         cy.mount(listItemWithIcons);
       });
-  
+
       it("renders first and second icons when both slots are filled", () => {
         cy.get("#listItemIcons").find("udex-button").should("have.length", 2);
       });
-  
+
       it("becomes selected when clicking", () => {
         cy.get("#listItemIcons").shadow().find(".udex-list__item").click();
         cy.get("#listItemIcons").should("have.attr", "selected");
       });
-  
+
       it("pressing Enter sets data-selected", () => {
         cy.realPress("Enter");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
-  
+
       it("pressing Space sets data-selected", () => {
         cy.realPress("Space");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
     });
-  
+
     describe("Additional Text States", () => {
       it("shows Information state", () => {
         cy.mount(defaultListItem);
         cy.get("#listItem").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(0, 64, 176)");
       });
-  
+
       it("shows Success state", () => {
         cy.mount(listItemSuccess);
         cy.get("#listItemSuccess").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(30, 89, 47)");
       });
-  
+
       it("shows Error state", () => {
         cy.mount(listItemError);
         cy.get("#listItemError").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(132, 6, 6)");
       });
-  
+
       it("shows Warning state", () => {
         cy.mount(listItemWarning);
         cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");
       });
     });
-});  
+});

package/cypress/specs/MediaPlayer.cy.tsx

@@ -0,0 +1,209 @@
+import { UDExMediaPlayer } from "../support/component-imports.js";
+
+// A real video source is not needed for plugin tests — VideoJS initialises
+// its player regardless of whether the source resolves, so we use a
+// lightweight placeholder that avoids network requests in CI.
+const BLANK_SOURCE = "about:blank";
+const BLANK_TYPE = "video/mp4";
+
+const basicPlayer = (
+  <UDExMediaPlayer
+    id="test-media-player"
+    source={BLANK_SOURCE}
+    type={BLANK_TYPE}
+  />
+);
+
+describe("MediaPlayer — custom plugin support", () => {
+  describe("videojsReady event", () => {
+    it("fires before the player is created", () => {
+      // Attach a window-level listener BEFORE mounting so we never miss the
+      // event regardless of how quickly the videojs import resolves.
+      // videojsReady has bubbles:true so it reaches the window.
+      let playerExistedAtEventTime = true; // pessimistic default
+
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", (e: Event) => {
+          const el = (e as CustomEvent).target as any;
+          playerExistedAtEventTime = !!el?.player;
+        }, { once: true });
+      });
+
+      cy.mount(basicPlayer);
+
+      // Wait for the player to eventually be created, then verify the captured
+      // flag shows the player did NOT exist when the event fired.
+      cy.get("#test-media-player").should(() => {
+        expect(
+          (Cypress.$("#test-media-player")[0] as any).player,
+          "player should be created after videojsReady"
+        ).to.exist;
+      });
+
+      cy.then(() => {
+        expect(playerExistedAtEventTime, "player.player must be null when videojsReady fires").to.be.false;
+      });
+    });
+
+    it("provides the videojs constructor in event detail", () => {
+      let capturedVideojs: any = null;
+
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", (e: Event) => {
+          capturedVideojs = (e as CustomEvent).detail.videojs;
+        }, { once: true });
+      });
+
+      cy.mount(basicPlayer);
+
+      cy.get("#test-media-player").should(() => {
+        expect(capturedVideojs, "videojs must be received in event detail").to.be.a("function");
+        expect(capturedVideojs.registerPlugin).to.be.a("function");
+        expect(capturedVideojs.getPlugin).to.be.a("function");
+      });
+    });
+
+    it("allows registering a plugin that is available on the player", () => {
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", (e: Event) => {
+          const videojs = (e as CustomEvent).detail.videojs;
+          videojs.registerPlugin("eventListenerPlugin", function (this: any) {
+            this.addClass("plugin-applied");
+          });
+        }, { once: true });
+      });
+
+      cy.mount(
+        <UDExMediaPlayer
+          id="plugin-player"
+          source={BLANK_SOURCE}
+          type={BLANK_TYPE}
+          options={JSON.stringify({ plugins: { eventListenerPlugin: {} } })}
+        />,
+      );
+
+      // hasPlugin() returns true once the plugin has been registered on the
+      // videojs constructor — it does not require the player to be created yet.
+      cy.get("#plugin-player").should(() => {
+        const el = Cypress.$("#plugin-player")[0] as any;
+        expect(el.player?.hasPlugin("eventListenerPlugin")).to.be.true;
+      });
+    });
+  });
+
+  describe("registerPlugin() method", () => {
+    it("stores plugins in _pendingPlugins before rendering", () => {
+      cy.document().then((doc) => {
+        const el = doc.createElement("udex-media-player") as any;
+        el.id = "pre-register-player";
+        // Register BEFORE appending to DOM (before onAfterRendering fires).
+        el.registerPlugin("storedPlugin", () => {});
+        expect(el._pendingPlugins).to.have.length(1);
+        expect(el._pendingPlugins[0].name).to.equal("storedPlugin");
+      });
+    });
+
+    it("applies pending plugins to videojs before creating the player", () => {
+      let pluginWasRegistered = false;
+
+      // Use window listener to capture videojsReady and check registration.
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", (e: Event) => {
+          const videojs = (e as CustomEvent).detail.videojs;
+          // If registerPlugin() worked, the plugin was registered on the
+          // constructor before this event fired.
+          pluginWasRegistered = typeof videojs.getPlugin("prePlugin") === "function";
+        }, { once: true });
+      });
+
+      cy.document().then((doc) => {
+        const el = doc.createElement("udex-media-player") as any;
+        el.id = "pre-mount-player";
+        el.source = BLANK_SOURCE;
+        el.type = BLANK_TYPE;
+        el.registerPlugin("prePlugin", () => {});
+        doc.body.appendChild(el);
+      });
+
+      cy.get("#pre-mount-player").should(() => {
+        expect(pluginWasRegistered, "plugin must be on videojs constructor when videojsReady fires").to.be.true;
+      });
+    });
+
+    it("clears _pendingPlugins after applying them", () => {
+      cy.mount(basicPlayer);
+
+      // Add a plugin after mount (will be applied on next render cycle or
+      // persists until next onAfterRendering — here we just verify the array
+      // is empty once initialization is complete).
+      cy.get("#test-media-player").should(() => {
+        const el = Cypress.$("#test-media-player")[0] as any;
+        // After first onAfterRendering, _pendingPlugins must be cleared.
+        expect(el._pendingPlugins, "_pendingPlugins must be empty after init").to.have.length(0);
+      });
+    });
+  });
+
+  describe("enableGlobalDependency interaction", () => {
+    it("exposes window.videojs and still fires videojsReady", () => {
+      let videojsReadyFired = false;
+
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", () => {
+          videojsReadyFired = true;
+        }, { once: true });
+      });
+
+      cy.mount(
+        <UDExMediaPlayer
+          id="global-dep-player"
+          source={BLANK_SOURCE}
+          type={BLANK_TYPE}
+          enableGlobalDependency
+        />,
+      );
+
+      cy.window().should((win) => {
+        expect((win as any).videojs, "window.videojs must be set").to.be.a("function");
+        expect(videojsReadyFired, "videojsReady must have fired").to.be.true;
+      });
+    });
+  });
+
+  describe("backward compatibility", () => {
+    it("renders the video-js element without any custom plugins", () => {
+      cy.mount(basicPlayer);
+
+      cy.get("#test-media-player")
+        .shadow()
+        .find(".video-js")
+        .should("exist");
+    });
+
+    it("still fires videoReady after custom plugin setup", () => {
+      const videoReadyStub = cy.stub().as("videoReady");
+
+      // Attach both listeners before mounting — videoReady has bubbles:true
+      // so it reaches the window. Attaching after cy.mount() risks missing
+      // the event if the player's ready callback resolves first.
+      cy.window().then((win) => {
+        win.addEventListener("videojsReady", (e: Event) => {
+          const videojs = (e as CustomEvent).detail.videojs;
+          videojs.registerPlugin("compatPlugin", function (this: any) {});
+        }, { once: true });
+
+        win.addEventListener("videoReady", videoReadyStub, { once: true });
+      });
+
+      cy.mount(
+        <UDExMediaPlayer
+          id="compat-player"
+          source={BLANK_SOURCE}
+          type={BLANK_TYPE}
+        />,
+      );
+
+      cy.get("@videoReady").should("have.been.calledOnce");
+    });
+  });
+});

package/cypress/specs/PromoTile.cy.tsx

@@ -8,6 +8,7 @@ const logoUrl = "http://test.com";
 const buttonLabel = "Button";
 const design = "Tertiary";
 const colorScheme = "Grey9";
+const gradient = "linear-gradient(135deg, var(--udexColorBlue10) 0%,var(--udexColorBlue11) 100%)";
 const promoTile = <UDExPromoTile>Text</UDExPromoTile>;
 const simplePromoTile = <UDExPromoTile eyebrow={eyebrow} header={header}>Text</UDExPromoTile>;
 const iconPromoTile = <UDExPromoTile icon={iconName} image-label={imageLabel}>Text</UDExPromoTile>;
@@ -23,6 +24,7 @@ const pictogramPromoTile = <UDExPromoTile button={buttonLabel}>
   />
 </UDExPromoTile>;
 const darkPromoTile = <UDExPromoTile color-scheme={colorScheme} button={buttonLabel}>Text</UDExPromoTile>;
+const gradientPromoTile = <UDExPromoTile background-gradient={gradient} button={buttonLabel}>Text</UDExPromoTile>;
 
 describe("Promo Tile", () => {
   it("renders simple promo tile", () => {
@@ -86,6 +88,14 @@ describe("Promo Tile", () => {
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--dark");
     cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "design", "Secondary");
   });
+
+  it("renders promo tile with gradient", () => {
+    cy.mount(gradientPromoTile);
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container")
+      .should("have.attr", "style")
+      .and("include", gradient)
+      .and("include", "rgb(255, 255, 255)");
+  });
 });
 
 describe("Promo Tile - CTA button", () => {

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -262,29 +262,37 @@ describe("Desktop", () => {
     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("emits empty analyticsPath when clicking a top-level item without sub-items", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2).click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 3"]);
+  });
 
-    xit("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", { timeout: 1000 })
-      .should("have.attr", "data-horizontal-align", "right")
-    });
+  it("emits analyticsPath with only the item title when clicking a top-level item with sub-items", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 1"]);
+  });
 
-    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("emits analyticsPath with parent and sub-item titles when clicking a sub-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").eq(1).click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 1", "secondary nested 2"]);
+  });
+
+  it("emits analyticsPath with full ancestor chain when clicking a deeply nested sub-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();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(2).click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(1).click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 1", "secondary nested 1", "tertiary nested 2", "quaternary nested 1"]);
+  });
 
   it("closes dropdown and focuses buy now button", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
@@ -362,4 +370,49 @@ 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"})
   });
+
+  it("emits isMore: true when clicking the More button", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6).click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.isMore").should("be.true");
+  });
+
+  it("emits isMore: true when clicking an overflow item from the More dropdown", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6).click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6)
+      .shadow().find("udex-secondary-navigation-sub-item").first().click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail.isMore").should("be.true");
+  });
+
+  it("does not emit isMore when clicking a regular item", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2).click();
+    cy.get("@itemClickHandler").should("have.been.called")
+      .its("lastCall.args.0.detail").should("not.have.property", "isMore");
+  });
+
+  describe("Direction attributes", () => {
+    beforeEach(() => {
+      cy.mount(secondaryNavigationWithoutBreadcrumbs)
+      cy.viewport(1080, 640);
+    })
+
+    // TODO: Fix tests in scope https://github.tools.sap/sapudex/digital-design-system/issues/2989
+    xit("has the attr \"data-horizontal-align=`right`\" when doesn't fit", () => {
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5).click();
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5)
+        .shadow().find(".udex-secondary-navigation__dropdown", { timeout: 5000 })
+        .should("be.visible")
+        .should("have.attr", "data-horizontal-align", "right")
+    });
+
+    xit("has the attr \"data-horizontal-align=`left`\" when doesn't fit in the \"rtl\" mode", () => {
+      cy.get("body").invoke("attr", "dir", "rtl");
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5).click();
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5)
+        .shadow()
+        .find(".udex-secondary-navigation__dropdown")
+        .should("have.attr", "data-horizontal-align", "left")
+    });
+  })
 });

package/cypress/specs/SecondaryNavigationMobile.cy.tsx

@@ -78,5 +78,62 @@ describe("SecondaryNavigation", () => {
       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");
     });
+
+    describe("analyticsPath", () => {
+      beforeEach(() => {
+        const itemClickHandler = cy.stub().as("itemClickHandler");
+        cy.get("#secondary-nav").then($navigation => {
+          $navigation[0].addEventListener("item-click", itemClickHandler);
+        });
+      });
+
+      it("uses mobileLinkTitle in analyticsPath when clicking a top-level item", () => {
+        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(2).click();
+        cy.get("@itemClickHandler").should("have.been.called")
+          .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 3 mobile"]);
+      });
+
+      it("uses title in analyticsPath when mobileLinkTitle is absent", () => {
+        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).click();
+        cy.get("@itemClickHandler").should("have.been.called")
+          .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 2"]);
+      });
+    });
+
+    describe("mobile-menu-opener-click event", () => {
+      beforeEach(() => {
+        const mobileMenuOpenerClickHandler = cy.stub().as("mobileMenuOpenerClickHandler");
+        cy.get("#secondary-nav").then($navigation => {
+          $navigation[0].addEventListener("mobile-menu-opener-click", mobileMenuOpenerClickHandler);
+        });
+      });
+
+      it("fires when the mobile menu opener is clicked", () => {
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("@mobileMenuOpenerClickHandler").should("have.been.calledOnce");
+      });
+
+      it("event detail contains analyticsName", () => {
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("@mobileMenuOpenerClickHandler").should("have.been.called")
+          .its("lastCall.args.0.detail.analyticsName").should("equal", "header-sub");
+      });
+
+      it("event detail contains sourceNode", () => {
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("@mobileMenuOpenerClickHandler").should("have.been.called")
+          .its("lastCall.args.0.detail.sourceNode").should("exist");
+      });
+
+      it("event detail contains originalEvent", () => {
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("@mobileMenuOpenerClickHandler").should("have.been.called")
+          .its("lastCall.args.0.detail.originalEvent").should("exist");
+      });
+    });
   });
-})
+})