@windstream/react-shared-components 0.1.93 → 0.1.94

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/index.tsx

@@ -1,87 +1,87 @@
-import React from "react";
-import { TabSwitch } from "../carousel/helper";
-import { ProductCardCarousel, TestimonialCarousel } from "./helper";
-import {
-  CarouselProps,
-  CarouselWithProductCards,
-  CarouselWithTestimonialCards,
-} from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Carousel: React.FC<CarouselProps> = ({
-  fields,
-  hasTestimonialCards,
-  hasProductCards,
-  disclaimerText,
-  backgroundColor,
-  activeTab,
-  setActiveTab,
-  tabs,
-  onModalButtonClick,
-  renderCheckPlans,
-  testimonialAutoScroll = true,
-  showSwitch = false,
-}) => {
-  const baseClass = hasProductCards
-    ? "px-3 py-9 md:py-20"
-    : hasTestimonialCards
-      ? "px-3 py-12 md:pt-20 md:pb-16"
-      : "";
-  return (
-    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
-      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
-        <div>
-          <Text
-            as="h2"
-            className="heading2 text-text md:heading1 md:text-center"
-          >
-            {fields?.title}
-          </Text>
-          {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
-              {fields?.subTitle}
-            </Text>
-          )}
-        </div>
-        {showSwitch && hasProductCards && (
-          <div className="flex flex-col gap-8">
-            {showSwitch && hasProductCards && tabs.length > 1 && (
-              <TabSwitch
-                tabs={tabs}
-                activeTab={activeTab}
-                onChange={setActiveTab}
-              />
-            )}
-            {hasProductCards && (
-              <ProductCardCarousel
-                onModalButtonClick={onModalButtonClick}
-                renderCheckPlans={renderCheckPlans}
-                fields={fields as CarouselWithProductCards}
-                activeTab={activeTab}
-                tabs={tabs}
-              />
-            )}
-          </div>
-        )}
-        {hasTestimonialCards && (
-          <TestimonialCarousel
-            fields={fields as CarouselWithTestimonialCards}
-            autoScroll={testimonialAutoScroll}
-            autoScrollInterval={8000}
-          />
-        )}
-      </div>
-      {disclaimerText && (
-        <Text
-          as="div"
-          className="footnote mt-8 px-4 text-center text-text-secondary"
-        >
-          {disclaimerText}
-        </Text>
-      )}
-    </div>
-  );
-};
-
-export default Carousel;
+import React from "react";
+import { TabSwitch } from "../carousel/helper";
+import { ProductCardCarousel, TestimonialCarousel } from "./helper";
+import {
+  CarouselProps,
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Carousel: React.FC<CarouselProps> = ({
+  fields,
+  hasTestimonialCards,
+  hasProductCards,
+  disclaimerText,
+  backgroundColor,
+  activeTab,
+  setActiveTab,
+  tabs,
+  onModalButtonClick,
+  renderCheckPlans,
+  testimonialAutoScroll = true,
+  showSwitch = false,
+}) => {
+  const baseClass = hasProductCards
+    ? "px-3 py-9 md:py-20"
+    : hasTestimonialCards
+      ? "px-3 py-12 md:pt-20 md:pb-16"
+      : "";
+  return (
+    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
+      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
+        <div>
+          <Text
+            as="h2"
+            className="heading2 text-text md:heading1 md:text-center"
+          >
+            {fields?.title}
+          </Text>
+          {fields?.subTitle && (
+            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
+              {fields?.subTitle}
+            </Text>
+          )}
+        </div>
+        {showSwitch && hasProductCards && (
+          <div className="flex flex-col gap-8">
+            {showSwitch && hasProductCards && tabs.length > 1 && (
+              <TabSwitch
+                tabs={tabs}
+                activeTab={activeTab}
+                onChange={setActiveTab}
+              />
+            )}
+            {hasProductCards && (
+              <ProductCardCarousel
+                onModalButtonClick={onModalButtonClick}
+                renderCheckPlans={renderCheckPlans}
+                fields={fields as CarouselWithProductCards}
+                activeTab={activeTab}
+                tabs={tabs}
+              />
+            )}
+          </div>
+        )}
+        {hasTestimonialCards && (
+          <TestimonialCarousel
+            fields={fields as CarouselWithTestimonialCards}
+            autoScroll={testimonialAutoScroll}
+            autoScrollInterval={8000}
+          />
+        )}
+      </div>
+      {disclaimerText && (
+        <Text
+          as="div"
+          className="footnote mt-8 px-4 text-center text-text-secondary"
+        >
+          {disclaimerText}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

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"]);
+  });
+});