@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/contentful/blocks/shape-background-wrapper/index.test.tsx

@@ -1,284 +1,284 @@
-import React from "react";
-import { ShapeBackgroundWrapper } from "./index";
-
-import { render, screen } from "@testing-library/react";
-
-describe("ShapeBackgroundWrapper", () => {
-  describe("Rendering with show=true (default)", () => {
-    it("renders children inside shape-bg-content wrapper", () => {
-      render(
-        <ShapeBackgroundWrapper background="white">
-          <p>Child content</p>
-        </ShapeBackgroundWrapper>
-      );
-      expect(screen.getByText("Child content")).toBeInTheDocument();
-      expect(
-        screen.getByText("Child content").closest(".shape-bg-content")
-      ).toBeInTheDocument();
-    });
-
-    it("renders the outer container with shape-bg class", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>Test</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
-    });
-
-    it("renders content div with z-[1] for layering above SVG", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>Layered</span>
-        </ShapeBackgroundWrapper>
-      );
-      const content = container.querySelector(".shape-bg-content");
-      expect(content).toHaveClass("relative", "z-[1]");
-    });
-  });
-
-  describe("Rendering with show=false", () => {
-    it("renders children without shape-bg wrapper", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper show={false} background="navy">
-          <p>Hidden shape</p>
-        </ShapeBackgroundWrapper>
-      );
-      expect(screen.getByText("Hidden shape")).toBeInTheDocument();
-      expect(container.querySelector(".shape-bg")).not.toBeInTheDocument();
-    });
-
-    it("does not render any SVG when show is false", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper show={false} path="path1" background="white">
-          <span>No SVG</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.querySelector("svg")).not.toBeInTheDocument();
-    });
-
-    it("applies className when show is false", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper show={false} className="custom-class">
-          <span>Styled</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.firstChild).toHaveClass("custom-class");
-    });
-
-    it("applies custom background style when show is false and background is non-theme", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper
-          show={false}
-          background="linear-gradient(red, blue)"
-        >
-          <span>Gradient</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.firstChild).toHaveStyle({
-        background: "linear-gradient(red, blue)",
-      });
-    });
-  });
-
-  describe("SVG path rendering", () => {
-    it("renders path1 SVG when path='path1'", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path="path1" background="white">
-          <span>Path1</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svgs = container.querySelectorAll("svg");
-      expect(svgs).toHaveLength(1);
-      expect(svgs[0]).toHaveAttribute("width", "2262");
-      expect(svgs[0]).toHaveAttribute("height", "4359");
-    });
-
-    it("renders path2 SVG by default", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>Default path</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svgs = container.querySelectorAll("svg");
-      expect(svgs).toHaveLength(1);
-      expect(svgs[0]).toHaveAttribute("width", "3739");
-      expect(svgs[0]).toHaveAttribute("height", "3666");
-    });
-
-    it("renders path3 SVG when path='path3'", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path="path3" background="white">
-          <span>Path3</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svgs = container.querySelectorAll("svg");
-      expect(svgs).toHaveLength(1);
-      expect(svgs[0]).toHaveAttribute("width", "3044");
-      expect(svgs[0]).toHaveAttribute("height", "3248");
-    });
-
-    it("renders path4 SVG when path='path4'", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path="path4" background="white">
-          <span>Path4</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svgs = container.querySelectorAll("svg");
-      expect(svgs).toHaveLength(1);
-      expect(svgs[0]).toHaveAttribute("width", "3739");
-      expect(svgs[0]).toHaveAttribute("height", "3666");
-    });
-
-    it("does not render SVG for unrecognized path value", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path={"path5" as any} background="white">
-          <span>Unknown</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.querySelector("svg")).not.toBeInTheDocument();
-    });
-
-    it("marks SVG with aria-hidden and focusable=false", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path="path1" background="white">
-          <span>Accessible</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svg = container.querySelector("svg")!;
-      expect(svg).toHaveAttribute("aria-hidden", "true");
-      expect(svg).toHaveAttribute("focusable", "false");
-    });
-
-    it("applies pointer-events-none to SVG", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper path="path2" background="white">
-          <span>Non-interactive</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svg = container.querySelector("svg")!;
-      expect(svg).toHaveClass("pointer-events-none");
-    });
-  });
-
-  describe("Background themes", () => {
-    it.each([
-      ["blue", "bg-[#07B2E2]"],
-      ["green", "bg-[#26B170]"],
-      ["yellow", "bg-[#F5FF1E]"],
-      ["purple", "bg-[#931D69]"],
-      ["white", "bg-white"],
-      ["navy", "bg-[#00002D]"],
-    ] as const)("applies %s background class", (bg, expectedClass) => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background={bg}>
-          <span>BG Test</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg")!;
-      expect(outer.className).toContain(expectedClass);
-    });
-
-    it("applies inline style for custom (non-theme) background", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="#FF5733">
-          <span>Custom BG</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg") as HTMLElement;
-      expect(outer.style.background).toBe("rgb(255, 87, 51)");
-    });
-
-    it("falls back to bg-white when no background provided", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper>
-          <span>No BG</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg")!;
-      expect(outer.className).toContain("bg-white");
-    });
-  });
-
-  describe("Fill color (SVG)", () => {
-    it.each([
-      ["blue", "text-[#07B2E2]"],
-      ["green", "text-[#26B170]"],
-      ["yellow", "text-[#F5FF1E]"],
-      ["purple", "text-[#931D69]"],
-      ["white", "text-white"],
-      ["navy", "text-[#00002D]"],
-    ] as const)("applies %s fill color to SVG", (fill, expectedClass) => {
-      const { container } = render(
-        <ShapeBackgroundWrapper fill={fill} background="white">
-          <span>Fill</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svg = container.querySelector("svg")!;
-      expect(svg.className.baseVal).toContain(expectedClass);
-    });
-
-    it("defaults to yellow fill when fill not specified", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>Default fill</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svg = container.querySelector("svg")!;
-      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
-    });
-
-    it("falls back to yellow for unrecognized fill value", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper fill="magenta" background="white">
-          <span>Unknown fill</span>
-        </ShapeBackgroundWrapper>
-      );
-      const svg = container.querySelector("svg")!;
-      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
-    });
-  });
-
-  describe("className prop", () => {
-    it("applies custom className to shape-bg wrapper", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper className="extra-class" background="white">
-          <span>Classy</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg")!;
-      expect(outer).toHaveClass("extra-class");
-    });
-
-    it("handles undefined className without errors", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>No class</span>
-        </ShapeBackgroundWrapper>
-      );
-      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
-    });
-  });
-
-  describe("maxFit prop", () => {
-    it("applies max-content class when maxFit is true", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper maxFit={true} background="white">
-          <span>Max fit</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg")!;
-      expect(outer.className).toContain("max-content");
-    });
-
-    it("does not apply max-content when maxFit is false/undefined", () => {
-      const { container } = render(
-        <ShapeBackgroundWrapper background="white">
-          <span>No max fit</span>
-        </ShapeBackgroundWrapper>
-      );
-      const outer = container.querySelector(".shape-bg")!;
-      expect(outer.className).not.toContain("max-content");
-    });
-  });
-});
+import React from "react";
+import { ShapeBackgroundWrapper } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("ShapeBackgroundWrapper", () => {
+  describe("Rendering with show=true (default)", () => {
+    it("renders children inside shape-bg-content wrapper", () => {
+      render(
+        <ShapeBackgroundWrapper background="white">
+          <p>Child content</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Child content")).toBeInTheDocument();
+      expect(
+        screen.getByText("Child content").closest(".shape-bg-content")
+      ).toBeInTheDocument();
+    });
+
+    it("renders the outer container with shape-bg class", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+
+    it("renders content div with z-[1] for layering above SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Layered</span>
+        </ShapeBackgroundWrapper>
+      );
+      const content = container.querySelector(".shape-bg-content");
+      expect(content).toHaveClass("relative", "z-[1]");
+    });
+  });
+
+  describe("Rendering with show=false", () => {
+    it("renders children without shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} background="navy">
+          <p>Hidden shape</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Hidden shape")).toBeInTheDocument();
+      expect(container.querySelector(".shape-bg")).not.toBeInTheDocument();
+    });
+
+    it("does not render any SVG when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} path="path1" background="white">
+          <span>No SVG</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("applies className when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} className="custom-class">
+          <span>Styled</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveClass("custom-class");
+    });
+
+    it("applies custom background style when show is false and background is non-theme", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper
+          show={false}
+          background="linear-gradient(red, blue)"
+        >
+          <span>Gradient</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveStyle({
+        background: "linear-gradient(red, blue)",
+      });
+    });
+  });
+
+  describe("SVG path rendering", () => {
+    it("renders path1 SVG when path='path1'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Path1</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "2262");
+      expect(svgs[0]).toHaveAttribute("height", "4359");
+    });
+
+    it("renders path2 SVG by default", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default path</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("renders path3 SVG when path='path3'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path3" background="white">
+          <span>Path3</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3044");
+      expect(svgs[0]).toHaveAttribute("height", "3248");
+    });
+
+    it("renders path4 SVG when path='path4'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path4" background="white">
+          <span>Path4</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("does not render SVG for unrecognized path value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path={"path5" as any} background="white">
+          <span>Unknown</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("marks SVG with aria-hidden and focusable=false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Accessible</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveAttribute("aria-hidden", "true");
+      expect(svg).toHaveAttribute("focusable", "false");
+    });
+
+    it("applies pointer-events-none to SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path2" background="white">
+          <span>Non-interactive</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveClass("pointer-events-none");
+    });
+  });
+
+  describe("Background themes", () => {
+    it.each([
+      ["blue", "bg-[#07B2E2]"],
+      ["green", "bg-[#26B170]"],
+      ["yellow", "bg-[#F5FF1E]"],
+      ["purple", "bg-[#931D69]"],
+      ["white", "bg-white"],
+      ["navy", "bg-[#00002D]"],
+    ] as const)("applies %s background class", (bg, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background={bg}>
+          <span>BG Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain(expectedClass);
+    });
+
+    it("applies inline style for custom (non-theme) background", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="#FF5733">
+          <span>Custom BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg") as HTMLElement;
+      expect(outer.style.background).toBe("rgb(255, 87, 51)");
+    });
+
+    it("falls back to bg-white when no background provided", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper>
+          <span>No BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("bg-white");
+    });
+  });
+
+  describe("Fill color (SVG)", () => {
+    it.each([
+      ["blue", "text-[#07B2E2]"],
+      ["green", "text-[#26B170]"],
+      ["yellow", "text-[#F5FF1E]"],
+      ["purple", "text-[#931D69]"],
+      ["white", "text-white"],
+      ["navy", "text-[#00002D]"],
+    ] as const)("applies %s fill color to SVG", (fill, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill={fill} background="white">
+          <span>Fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain(expectedClass);
+    });
+
+    it("defaults to yellow fill when fill not specified", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+
+    it("falls back to yellow for unrecognized fill value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill="magenta" background="white">
+          <span>Unknown fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+  });
+
+  describe("className prop", () => {
+    it("applies custom className to shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper className="extra-class" background="white">
+          <span>Classy</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer).toHaveClass("extra-class");
+    });
+
+    it("handles undefined className without errors", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No class</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+  });
+
+  describe("maxFit prop", () => {
+    it("applies max-content class when maxFit is true", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper maxFit={true} background="white">
+          <span>Max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("max-content");
+    });
+
+    it("does not apply max-content when maxFit is false/undefined", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).not.toContain("max-content");
+    });
+  });
+});