@sapudex/web-components 2.31.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/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/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 attributes", () => {
-    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"]);
+  });
 
-    it("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")
-    });
+  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");
-      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")
-    });
-  })
+  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");
+      });
+    });
   });
-})
+})