@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,308 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { Carousel } from "./index";
+import { CarouselProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock helper components
+jest.mock("./helper", () => ({
+  ProductCardCarousel: ({ fields }: any) => (
+    <div data-testid="product-card-carousel">{fields?.title}</div>
+  ),
+  TestimonialCarousel: ({ fields }: any) => (
+    <div data-testid="testimonial-carousel">{fields?.title}</div>
+  ),
+  TabSwitch: ({ tabs, activeTab, onChange }: any) => (
+    <div data-testid="tab-switch">
+      {tabs.map((tab: string) => (
+        <button
+          key={tab}
+          data-testid={`tab-${tab}`}
+          onClick={() => onChange(tab)}
+          className={activeTab === tab ? "active" : ""}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as, ...props }: any) => {
+    const Tag = as || "span";
+    return <Tag {...props}>{children}</Tag>;
+  },
+}));
+
+describe("Carousel", () => {
+  const baseFields = {
+    __typename: "ComponentCarousel" as const,
+    sys: { id: "carousel-1" },
+    title: "Test Carousel",
+    subTitle: "A subtitle",
+    items: { items: [] },
+  };
+
+  const defaultProps: CarouselProps = {
+    fields: baseFields,
+    hasTestimonialCards: false,
+    hasProductCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "Internet Only",
+    setActiveTab: jest.fn(),
+    tabs: ["Business Ready", "Internet Only"],
+    showSwitch: false,
+  };
+
+  it("renders the carousel container", () => {
+    const { container } = render(<Carousel {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it("renders the title", () => {
+    render(<Carousel {...defaultProps} />);
+    expect(screen.getByText("Test Carousel")).toBeInTheDocument();
+  });
+
+  it("renders title as h2", () => {
+    render(<Carousel {...defaultProps} />);
+    const title = screen.getByText("Test Carousel");
+    expect(title.tagName).toBe("H2");
+  });
+
+  it("renders subtitle when provided", () => {
+    render(<Carousel {...defaultProps} />);
+    expect(screen.getByText("A subtitle")).toBeInTheDocument();
+  });
+
+  it("renders subtitle as h3", () => {
+    render(<Carousel {...defaultProps} />);
+    const subtitle = screen.getByText("A subtitle");
+    expect(subtitle.tagName).toBe("H3");
+  });
+
+  it("does not render subtitle when not provided", () => {
+    const fields = { ...baseFields, subTitle: undefined };
+    render(<Carousel {...defaultProps} fields={fields} />);
+    expect(screen.queryByText("A subtitle")).not.toBeInTheDocument();
+  });
+
+  it("does not render subtitle when it is null", () => {
+    const fields = { ...baseFields, subTitle: null as any };
+    render(<Carousel {...defaultProps} fields={fields} />);
+    const h3Elements = document.querySelectorAll("h3");
+    expect(h3Elements).toHaveLength(0);
+  });
+
+  it("does not render subtitle when it is empty string", () => {
+    const fields = { ...baseFields, subTitle: "" };
+    render(<Carousel {...defaultProps} fields={fields} />);
+    // Empty string is falsy so subtitle block should not render
+    const h3Elements = document.querySelectorAll("h3");
+    expect(h3Elements).toHaveLength(0);
+  });
+
+  it("renders with undefined title", () => {
+    const fields = { ...baseFields, title: undefined };
+    render(<Carousel {...defaultProps} fields={fields} />);
+    // Should not crash, h2 renders but empty
+    const h2 = document.querySelector("h2");
+    expect(h2).toBeInTheDocument();
+  });
+
+  it("uses default showSwitch and testimonialAutoScroll when not provided", () => {
+    const propsWithoutDefaults = { ...defaultProps } as any;
+    delete propsWithoutDefaults.showSwitch;
+    delete propsWithoutDefaults.testimonialAutoScroll;
+    render(<Carousel {...propsWithoutDefaults} hasTestimonialCards={true} />);
+    // showSwitch defaults to false so no product carousel shown
+    expect(
+      screen.queryByTestId("product-card-carousel")
+    ).not.toBeInTheDocument();
+    // testimonialAutoScroll defaults to true, testimonial renders
+    expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
+  });
+
+  it("renders disclaimer text when provided", () => {
+    render(<Carousel {...defaultProps} disclaimerText="Terms apply" />);
+    expect(screen.getByText("Terms apply")).toBeInTheDocument();
+  });
+
+  it("does not render disclaimer when null", () => {
+    const { container } = render(<Carousel {...defaultProps} />);
+    expect(container.querySelector(".footnote")).not.toBeInTheDocument();
+  });
+
+  it("applies backgroundColor class", () => {
+    const { container } = render(
+      <Carousel {...defaultProps} backgroundColor="bg-blue-500" />
+    );
+    expect(container.firstChild).toHaveClass("bg-blue-500");
+  });
+
+  describe("product cards", () => {
+    it("renders ProductCardCarousel when hasProductCards is true and showSwitch is true", () => {
+      render(
+        <Carousel {...defaultProps} hasProductCards={true} showSwitch={true} />
+      );
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+    });
+
+    it("does not render ProductCardCarousel when showSwitch is false", () => {
+      render(
+        <Carousel {...defaultProps} hasProductCards={true} showSwitch={false} />
+      );
+      expect(
+        screen.queryByTestId("product-card-carousel")
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders TabSwitch when showSwitch and hasProductCards with multiple tabs", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          showSwitch={true}
+          tabs={["Tab A", "Tab B"]}
+        />
+      );
+      expect(screen.getByTestId("tab-switch")).toBeInTheDocument();
+    });
+
+    it("does not render TabSwitch when only one tab", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          showSwitch={true}
+          tabs={["Only Tab"]}
+        />
+      );
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
+    });
+
+    it("calls setActiveTab when tab is clicked", () => {
+      const setActiveTab = jest.fn();
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          showSwitch={true}
+          setActiveTab={setActiveTab}
+          tabs={["Tab A", "Tab B"]}
+        />
+      );
+      fireEvent.click(screen.getByTestId("tab-Tab A"));
+      expect(setActiveTab).toHaveBeenCalledWith("Tab A");
+    });
+  });
+
+  describe("testimonial cards", () => {
+    it("renders TestimonialCarousel when hasTestimonialCards is true", () => {
+      render(<Carousel {...defaultProps} hasTestimonialCards={true} />);
+      expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
+    });
+
+    it("does not render TestimonialCarousel when hasTestimonialCards is false", () => {
+      render(<Carousel {...defaultProps} hasTestimonialCards={false} />);
+      expect(
+        screen.queryByTestId("testimonial-carousel")
+      ).not.toBeInTheDocument();
+    });
+
+    it("passes testimonialAutoScroll prop correctly", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasTestimonialCards={true}
+          testimonialAutoScroll={false}
+        />
+      );
+      expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
+    });
+  });
+
+  describe("layout classes", () => {
+    it("applies product card base class when hasProductCards", () => {
+      const { container } = render(
+        <Carousel {...defaultProps} hasProductCards={true} showSwitch={true} />
+      );
+      expect(container.firstChild).toHaveClass("px-3");
+      expect(container.firstChild).toHaveClass("py-9");
+    });
+
+    it("applies testimonial base class when hasTestimonialCards", () => {
+      const { container } = render(
+        <Carousel {...defaultProps} hasTestimonialCards={true} />
+      );
+      expect(container.firstChild).toHaveClass("px-3");
+      expect(container.firstChild).toHaveClass("py-12");
+    });
+
+    it("applies no base class when neither card type", () => {
+      const { container } = render(<Carousel {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("mx-auto");
+      expect(container.firstChild).toHaveClass("overflow-hidden");
+    });
+
+    it("applies overflow-hidden to root", () => {
+      const { container } = render(<Carousel {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("overflow-hidden");
+    });
+
+    it("applies product class without testimonial when only hasProductCards", () => {
+      const { container } = render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          hasTestimonialCards={false}
+          showSwitch={true}
+        />
+      );
+      expect(container.firstChild).toHaveClass("py-9");
+    });
+
+    it("renders both product and testimonial when both flags are true", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          hasTestimonialCards={true}
+          showSwitch={true}
+        />
+      );
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+      expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
+    });
+
+    it("does not render product carousel when showSwitch is false even with hasProductCards", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          showSwitch={false}
+          hasTestimonialCards={false}
+        />
+      );
+      expect(
+        screen.queryByTestId("product-card-carousel")
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders with empty tabs array and no TabSwitch", () => {
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          showSwitch={true}
+          tabs={[]}
+        />
+      );
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/contentful/blocks/carousel/types.test.ts

@@ -0,0 +1,16 @@
+import { backgroundColorMap, DEFAULT_TABS } from "./types";
+
+describe("carousel types exports", () => {
+  it("exports backgroundColorMap with expected keys", () => {
+    expect(backgroundColorMap).toBeDefined();
+    expect(backgroundColorMap.blue).toBe("bg-bg-fill-inverse");
+    expect(backgroundColorMap.green).toBe("bg-border-success");
+    expect(backgroundColorMap.orange).toBe("bg-orange-500");
+    expect(backgroundColorMap.purple).toBe("bg-purple-500");
+    expect(backgroundColorMap.white).toBe("bg-white");
+  });
+
+  it("exports DEFAULT_TABS", () => {
+    expect(DEFAULT_TABS).toEqual(["Business Ready", "Internet Only"]);
+  });
+});