@orangesk/orange-design-system 3.9.0 → 3.10.0

package/src/components/Megamenu/tests/Megamenu.unit.test.jsx

@@ -1,7 +1,10 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 
 import { Megamenu, MegamenuBlog } from "../";
+import MegamenuController from "../Megamenu.static";
 
 describe("Megamenu logo markup", () => {
   it("separates top links from the language switcher without a spacer item", () => {
@@ -148,6 +151,56 @@ describe("Megamenu logo markup", () => {
     expect(container).not.toHaveTextContent("0905 123 456");
   });
 
+  it.each([false, true])(
+    "renders My Orange as SSO links without account panel markup (B2B: %s)",
+    (isB2B) => {
+      const { container } = render(
+        <Megamenu
+          isLoggedIn={false}
+          myOrangeHref="/sso"
+          isB2B={isB2B}
+          notSticky
+        />,
+      );
+      const links = container.querySelectorAll('a[href="/sso"]');
+
+      expect(links).toHaveLength(2);
+      for (const link of links) {
+        expect(link).toHaveTextContent("Môj Orange");
+        expect(link).not.toHaveAttribute("data-megamenu-mobile-toggle");
+        expect(link).not.toHaveAttribute("aria-haspopup");
+        expect(link).not.toHaveAttribute("aria-expanded");
+      }
+      expect(
+        container.querySelector('[data-megamenu-mobile-target="my-orange"]'),
+      ).toBeNull();
+      expect(
+        container.querySelector('[data-megamenu-mobile-panel="my-orange"]'),
+      ).toBeNull();
+      expect(container.querySelector(".megamenu__mobile-account")).toBeNull();
+      expect(
+        container.querySelector('[data-megamenu-mobile-panel="main"]'),
+      ).toBeInTheDocument();
+
+      const controller = new MegamenuController(
+        container.querySelector("[data-megamenu]"),
+      );
+      try {
+        container.querySelector('[data-megamenu-mobile-target="main"]').click();
+        expect(
+          container.querySelector('[data-megamenu-mobile-panel="main"]'),
+        ).toHaveAttribute("aria-hidden", "false");
+        expect(links[0]).toHaveAttribute("href", "/sso");
+        controller.closeMobileMenu();
+        expect(
+          container.querySelector('[data-megamenu-mobile-panel="main"]'),
+        ).toHaveAttribute("aria-hidden", "true");
+      } finally {
+        controller.destroy();
+      }
+    },
+  );
+
   it("renders optional cart item count", () => {
     const { container } = render(<Megamenu cartItems={3} notSticky />);
 
@@ -175,3 +228,108 @@ describe("Megamenu logo markup", () => {
     expect(cart?.nextElementSibling).not.toBeInTheDocument();
   });
 });
+
+describe("Megamenu vendor sprite markup", () => {
+  it.each([
+    ["main B2C", Megamenu, false],
+    ["main B2B", Megamenu, true],
+    ["blog B2C", MegamenuBlog, false],
+    ["blog B2B", MegamenuBlog, true],
+  ])(
+    "resolves every SVG in %s through the external sprite",
+    (_, Component, isB2B) => {
+      const spritePath = `/megamenu-sprite-${isB2B ? "dark" : "light"}.svg`;
+      const sprite = new DOMParser().parseFromString(
+        readFileSync(`public${spritePath}`, "utf8"),
+        "image/svg+xml",
+      );
+      const { container } = render(
+        <Component isB2B={isB2B} className={isB2B ? "is-dark" : undefined} />,
+      );
+
+      expect(
+        container.querySelector("svg path, svg rect, svg circle"),
+      ).toBeNull();
+      expect(container.querySelector('img[src$=".svg"]')).toBeNull();
+      for (const use of container.querySelectorAll("svg use")) {
+        const href = use.getAttribute("href") || use.getAttribute("xlink:href");
+        expect(href).toMatch(new RegExp(`^${spritePath}#`));
+        expect(use.parentElement.querySelectorAll("use")).toHaveLength(1);
+        expect(sprite.getElementById(href.split("#")[1])).not.toBeNull();
+      }
+      for (const wrapper of container.querySelectorAll(
+        ".megamenu__input-wrapper",
+      )) {
+        expect(
+          wrapper.querySelector(".megamenu__input-search-icon use"),
+        ).not.toBeNull();
+        expect(
+          wrapper.querySelector(".megamenu__input-status-icon use"),
+        ).not.toBeNull();
+      }
+    },
+  );
+});
+
+describe("Megamenu dedicated sprites", () => {
+  it("keeps megamenu-owned sources and symbols out of the global sprite", () => {
+    const globalSprite = new DOMParser().parseFromString(
+      readFileSync("public/sprite.svg", "utf8"),
+      "image/svg+xml",
+    );
+    const sources = readdirSync("src/assets/megamenu").filter((file) =>
+      file.endsWith(".svg"),
+    );
+
+    expect(sources.length).toBeGreaterThan(0);
+    for (const file of sources) {
+      expect(existsSync(`src/assets/icons/${file}`), file).toBe(false);
+      expect(globalSprite.getElementById(file.slice(0, -4)), file).toBeNull();
+    }
+    expect(globalSprite.getElementById("rewards-accent")).toBeNull();
+  });
+
+  it("ships matching symbol IDs with theme colors and no unrelated global icons", () => {
+    const parse = (theme) =>
+      new DOMParser().parseFromString(
+        readFileSync(`public/megamenu-sprite-${theme}.svg`, "utf8"),
+        "image/svg+xml",
+      );
+    const light = parse("light");
+    const dark = parse("dark");
+    const ids = (doc) =>
+      Array.from(doc.querySelectorAll("symbol"), (s) => s.id);
+    expect(ids(light)).toEqual(ids(dark));
+    expect(ids(light)).toHaveLength(20);
+    expect(light.getElementById("user").getAttribute("fill")).toBe("#000");
+    expect(dark.getElementById("user").getAttribute("fill")).toBe("#fff");
+    expect(light.getElementById("linkedin")).toBeNull();
+    expect(light.getElementById("megamenu-logo").outerHTML).not.toEqual(
+      dark.getElementById("megamenu-logo").outerHTML,
+    );
+    expect(light.getElementById("store-apple").outerHTML).not.toEqual(
+      dark.getElementById("store-apple").outerHTML,
+    );
+    for (const doc of [light, dark]) {
+      expect(doc.querySelector("parsererror")).toBeNull();
+      for (const element of doc.querySelectorAll("[clip-path]")) {
+        const id = element
+          .getAttribute("clip-path")
+          .match(/url\(#([^)]+)\)/)?.[1];
+        expect(doc.getElementById(id)).not.toBeNull();
+      }
+    }
+  });
+});
+
+it.each([Megamenu, MegamenuBlog])(
+  "uses the dark sprite for an explicit dark navigation class",
+  (Component) => {
+    const { container } = render(<Component className="is-dark" />);
+    for (const use of container.querySelectorAll("use")) {
+      expect(use.getAttribute("xlink:href")).toMatch(
+        /^\/megamenu-sprite-dark\.svg#/,
+      );
+    }
+  },
+);