@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/callout/index.test.tsx

@@ -0,0 +1,539 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { Callout } from "./index";
+import { CalloutProps } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock child card components
+jest.mock("../cards/simple-card", () => ({
+  __esModule: true,
+  default: ({ card }: any) => (
+    <div data-testid="simple-card">{card?.title || "Simple Card"}</div>
+  ),
+}));
+
+jest.mock("../cards/blog-card", () => ({
+  __esModule: true,
+  default: ({ title }: any) => (
+    <div data-testid="blog-card">{title || "Blog Card"}</div>
+  ),
+}));
+
+jest.mock("../cards/full-image-card", () => ({
+  __esModule: true,
+  default: ({ card }: any) => (
+    <div data-testid="full-image-card">{card?.title || "Full Image Card"}</div>
+  ),
+}));
+
+jest.mock("../cards/floating-image-card", () => ({
+  __esModule: true,
+  default: ({ card }: any) => (
+    <div data-testid="floating-image-card">
+      {card?.title || "Floating Image Card"}
+    </div>
+  ),
+}));
+
+jest.mock("../button", () => ({
+  Button: (props: any) => (
+    <button data-testid="callout-button">
+      {props.label ?? props.buttonLabel ?? props.children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/animation-wrapper", () => ({
+  AnimationWrapper: ({ children }: any) => <>{children}</>,
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as, ...props }: any) => {
+    const Tag = as || "span";
+    return <Tag {...props}>{children}</Tag>;
+  },
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Callout", () => {
+  const defaultProps: CalloutProps = {
+    items: [
+      { title: "Card 1", description: "Desc 1" },
+      { title: "Card 2", description: "Desc 2" },
+    ],
+  };
+
+  it("renders the section element", () => {
+    const { container } = render(<Callout {...defaultProps} />);
+    const section = container.querySelector("section");
+    expect(section).toBeInTheDocument();
+  });
+
+  it("renders with anchorId", () => {
+    const { container } = render(
+      <Callout {...defaultProps} anchorId="test-anchor" />
+    );
+    const section = container.querySelector("section#test-anchor");
+    expect(section).toBeInTheDocument();
+  });
+
+  it("renders title as h2 by default", () => {
+    render(<Callout {...defaultProps} title="Test Title" />);
+    const heading = screen.getByText("Test Title");
+    expect(heading.tagName).toBe("H2");
+  });
+
+  it("renders title as h1 when enableHeading is true", () => {
+    render(
+      <Callout {...defaultProps} title="Main Title" enableHeading={true} />
+    );
+    const heading = screen.getByText("Main Title");
+    expect(heading.tagName).toBe("H1");
+  });
+
+  it("renders subtitle", () => {
+    render(<Callout {...defaultProps} subtitle="Test Subtitle" />);
+    expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
+  });
+
+  it("renders subtitle as h2 when enableHeading is true", () => {
+    render(
+      <Callout
+        {...defaultProps}
+        subtitle="Sub Title"
+        enableHeading={true}
+        title="X"
+      />
+    );
+    const subtitle = screen.getByText("Sub Title");
+    expect(subtitle.tagName).toBe("H2");
+  });
+
+  it("renders subtitle as h3 by default", () => {
+    render(<Callout {...defaultProps} subtitle="Sub H3" title="X" />);
+    const subtitle = screen.getByText("Sub H3");
+    expect(subtitle.tagName).toBe("H3");
+  });
+
+  it("renders description", () => {
+    render(<Callout {...defaultProps} description="A description" />);
+    expect(screen.getByText("A description")).toBeInTheDocument();
+  });
+
+  it("renders finePrint", () => {
+    render(<Callout {...defaultProps} finePrint="Fine print text" />);
+    expect(screen.getByText("Fine print text")).toBeInTheDocument();
+  });
+
+  it("renders CTA button with label", () => {
+    render(
+      <Callout {...defaultProps} cta={{ label: "Click me", href: "/page" }} />
+    );
+    expect(screen.getByTestId("callout-button")).toHaveTextContent("Click me");
+  });
+
+  it("renders CTA button with buttonLabel fallback", () => {
+    render(
+      <Callout
+        {...defaultProps}
+        cta={{ buttonLabel: "ButtonLabel", href: "/page" }}
+      />
+    );
+    expect(screen.getByTestId("callout-button")).toHaveTextContent(
+      "ButtonLabel"
+    );
+  });
+
+  it("does not render CTA section when no cta and no finePrint", () => {
+    const { container } = render(<Callout {...defaultProps} />);
+    expect(
+      container.querySelector("[data-testid='callout-button']")
+    ).toBeNull();
+  });
+
+  describe("flex layout", () => {
+    it("uses flex layout by default", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.className).toContain("flex");
+      expect(gridHolder?.className).toContain("flex-wrap");
+    });
+
+    it("applies per-card width classes based on column calculations", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const cards = container.querySelectorAll(".callout-card");
+      expect(cards.length).toBe(2);
+      // 2 items, cardStackingMobile=true => md cols = 1 => md:w-full
+      cards.forEach(card => {
+        expect(card.className).toContain("md:w-full");
+        expect(card.className).toContain("lg:w-[calc(50%-0.75rem)]");
+      });
+    });
+
+    it("uses flex-col layout when cardsWidth is false (stack mode)", () => {
+      const { container } = render(
+        <Callout {...defaultProps} cardsWidth={false} />
+      );
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.className).toContain("flex");
+      expect(gridHolder?.className).toContain("flex-col");
+    });
+
+    it("renders cards without wrapper div in stack mode", () => {
+      const { container } = render(
+        <Callout {...defaultProps} cardsWidth={false} />
+      );
+      // In stack mode, cards are not wrapped in .callout-card divs
+      const cards = container.querySelectorAll(".callout-card");
+      expect(cards.length).toBe(0);
+      // But simple-card testids should still be present
+      expect(screen.getAllByTestId("simple-card")).toHaveLength(2);
+    });
+
+    it("renders 1 item with full width on lg", () => {
+      const { container } = render(
+        <Callout items={[{ title: "Only card" }]} />
+      );
+      const card = container.querySelector(".callout-card");
+      expect(card?.className).toContain("lg:w-full");
+    });
+
+    it("respects maxCardsPerRow override", () => {
+      const items = Array.from({ length: 6 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(
+        <Callout items={items} maxCardsPerRow={2} />
+      );
+      const cards = container.querySelectorAll(".callout-card");
+      // maxCardsPerRow=2, lgCols = min(2, 6) = 2
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(50%-0.75rem)]");
+      });
+    });
+
+    it("clamps maxCardsPerRow to max 6", () => {
+      const items = Array.from({ length: 3 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(
+        <Callout items={items} maxCardsPerRow={10} />
+      );
+      const cards = container.querySelectorAll(".callout-card");
+      // clamp(10) = 6, lgCols = min(6, 3) = 3
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(33.333%-1rem)]");
+      });
+    });
+
+    it("uses 2 columns on md when cardStackingMobile is false", () => {
+      const { container } = render(
+        <Callout {...defaultProps} cardStackingMobile={false} />
+      );
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("md:w-[calc(50%-1rem)]");
+      });
+    });
+
+    it("uses 1 column on md when cardStackingMobile is true (default)", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("md:w-full");
+      });
+    });
+
+    it("removes gutter with noGutter prop", () => {
+      const { container } = render(
+        <Callout {...defaultProps} noGutter={true} />
+      );
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.className).toContain("gap-0");
+      expect(gridHolder?.className).not.toContain("gap-6");
+    });
+
+    it("has gap-6 by default", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.className).toContain("gap-6");
+    });
+
+    it("calculates 3 columns for 6 items (divisible by 3)", () => {
+      const items = Array.from({ length: 6 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(<Callout items={items} />);
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(33.333%-1rem)]");
+      });
+    });
+
+    it("calculates 4 columns for 8 items (divisible by 4)", () => {
+      const items = Array.from({ length: 8 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(<Callout items={items} />);
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(25%-1.125rem)]");
+      });
+    });
+
+    it("calculates 4 columns for 7 items (>6, not div by 3)", () => {
+      const items = Array.from({ length: 7 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(<Callout items={items} />);
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(25%-1.125rem)]");
+      });
+    });
+
+    it("calculates 3 columns for 5 items (fallback)", () => {
+      const items = Array.from({ length: 5 }, (_, i) => ({
+        title: `Item ${i}`,
+      }));
+      const { container } = render(<Callout items={items} />);
+      const cards = container.querySelectorAll(".callout-card");
+      cards.forEach(card => {
+        expect(card.className).toContain("lg:w-[calc(33.333%-1rem)]");
+      });
+    });
+  });
+
+  describe("background colors", () => {
+    it("applies cream500 background class", () => {
+      const { container } = render(
+        <Callout {...defaultProps} backgroundColor="cream500" />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).toContain("bg-[#FFFEEF]");
+    });
+
+    it("applies gray100 background class", () => {
+      const { container } = render(
+        <Callout {...defaultProps} backgroundColor="gray100" />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).toContain("bg-fill-secondary");
+    });
+
+    it("applies navy background class", () => {
+      const { container } = render(
+        <Callout {...defaultProps} backgroundColor="navy" />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).toContain("bg-fill-inverse");
+    });
+
+    it("applies transparent background (no additional class)", () => {
+      const { container } = render(
+        <Callout {...defaultProps} backgroundColor="transparent" />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).not.toContain("bg-fill");
+    });
+
+    it("uses inline style when background prop is provided", () => {
+      const { container } = render(
+        <Callout {...defaultProps} background="linear-gradient(red, blue)" />
+      );
+      const section = container.querySelector("section");
+      expect(section).toHaveStyle({
+        background: "linear-gradient(red, blue)",
+      });
+    });
+
+    it("background prop overrides backgroundColor class", () => {
+      const { container } = render(
+        <Callout
+          {...defaultProps}
+          background="red"
+          backgroundColor="cream500"
+        />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).not.toContain("bg-[#FFFEEF]");
+      expect(section?.style.background).toBe("red");
+    });
+  });
+
+  describe("text color", () => {
+    it("applies dark color class by default", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).toContain("text-text");
+    });
+
+    it("applies light color class", () => {
+      const { container } = render(<Callout {...defaultProps} color="light" />);
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).toContain("text-white");
+    });
+
+    it("applies textColor as inline style on title holder", () => {
+      const { container } = render(
+        <Callout {...defaultProps} title="Hi" textColor="#ff0000" />
+      );
+      const titleHolder = container.querySelector(".title-holder");
+      expect(titleHolder).not.toBeNull();
+      expect(titleHolder!.getAttribute("style")).toContain("color");
+    });
+  });
+
+  describe("card types", () => {
+    it("renders simple cards by default", () => {
+      render(<Callout {...defaultProps} />);
+      const cards = screen.getAllByTestId("simple-card");
+      expect(cards).toHaveLength(2);
+    });
+
+    it("renders blog cards when cardType is blog", () => {
+      const items = [
+        {
+          title: "Blog 1",
+          slug: "/blog-1",
+          shortDescription: "Desc",
+          blogCreationDate: "2024-01-01",
+          category: "Tech",
+        },
+      ];
+      render(<Callout items={items} cardType="blog" />);
+      expect(screen.getByTestId("blog-card")).toBeInTheDocument();
+    });
+
+    it("renders fullImage cards when cardType is fullImage", () => {
+      render(<Callout {...defaultProps} cardType="fullImage" />);
+      expect(screen.getAllByTestId("full-image-card")).toHaveLength(2);
+    });
+
+    it("renders floatingImage cards when cardType is floatingImage", () => {
+      render(<Callout {...defaultProps} cardType="floatingImage" />);
+      expect(screen.getAllByTestId("floating-image-card")).toHaveLength(2);
+    });
+
+    it("allows per-item cardType override", () => {
+      const items = [
+        { title: "Simple", cardType: "simple" as const },
+        { title: "Blog", cardType: "blog" as const, slug: "/b" },
+      ];
+      render(<Callout items={items} />);
+      expect(screen.getByTestId("simple-card")).toBeInTheDocument();
+      expect(screen.getByTestId("blog-card")).toBeInTheDocument();
+    });
+
+    it("passes applyBoxShadow to card shadow prop", () => {
+      const { container } = render(
+        <Callout {...defaultProps} applyBoxShadow={true} />
+      );
+      expect(
+        container.querySelectorAll("[data-testid='simple-card']")
+      ).toHaveLength(2);
+    });
+  });
+
+  describe("maxWidth and layout", () => {
+    it("applies max-w-120 when maxWidth is true (default)", () => {
+      const { container } = render(<Callout {...defaultProps} />);
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).toContain("max-w-120");
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <Callout {...defaultProps} maxWidth={false} />
+      );
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).not.toContain("max-w-120");
+    });
+
+    it("applies containerClassName to section", () => {
+      const { container } = render(
+        <Callout {...defaultProps} containerClassName="custom-section" />
+      );
+      const section = container.querySelector("section");
+      expect(section?.className).toContain("custom-section");
+    });
+
+    it("applies innerClassName to inner div", () => {
+      const { container } = render(
+        <Callout {...defaultProps} innerClassName="custom-inner" />
+      );
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).toContain("custom-inner");
+    });
+
+    it("applies noGutter padding class", () => {
+      const { container } = render(
+        <Callout {...defaultProps} noGutter={true} />
+      );
+      const inner =
+        container.querySelector(".callout-container")?.parentElement;
+      expect(inner?.className).toContain("p-0");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles empty items array", () => {
+      const { container } = render(<Callout items={[]} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.children).toHaveLength(0);
+    });
+
+    it("handles items with no properties gracefully", () => {
+      const { container } = render(<Callout items={[{}, {}]} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.children).toHaveLength(2);
+    });
+
+    it("handles unknown backgroundColor value with fallback", () => {
+      const { container } = render(
+        <Callout {...defaultProps} backgroundColor={"unknownColor" as any} />
+      );
+      const section = container.querySelector("section");
+      expect(section).toBeInTheDocument();
+    });
+
+    it("renders with cardsWidth false and noGutter true", () => {
+      const { container } = render(
+        <Callout {...defaultProps} cardsWidth={false} noGutter={true} />
+      );
+      const gridHolder = container.querySelector(".card-holder");
+      expect(gridHolder?.className).toContain("gap-0");
+    });
+
+    it("renders card with shadow prop already set on item", () => {
+      const items = [{ title: "Card", shadow: true }];
+      const { container } = render(
+        <Callout items={items} applyBoxShadow={false} />
+      );
+      expect(
+        container.querySelector("[data-testid='simple-card']")
+      ).toBeInTheDocument();
+    });
+
+    it("calculates lgCols clamping to itemCount", () => {
+      // When itemCount (1) < desktopCols (4), lgCols = itemCount = 1
+      const { container } = render(
+        <Callout items={[{ title: "Solo" }]} maxCardsPerRow={4} />
+      );
+      const card = container.querySelector(".callout-card");
+      expect(card?.className).toContain("lg:w-full");
+    });
+  });
+});