@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,539 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { ProductCardCarousel, TabSwitch, TestimonialCarousel } from "./helper";
+import {
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock sub-components
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name }: any) => (
+    <span data-testid={`icon-${name}`}>{name}</span>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
+  ProductCard: ({
+    planName,
+    speed,
+    onCtaClick,
+    onToggleExpand,
+    isExpanded,
+  }: any) => (
+    <div
+      data-testid="product-card"
+      data-plan={planName}
+      data-speed={speed}
+      data-expanded={isExpanded}
+    >
+      {planName}
+      <button onClick={onCtaClick} data-testid="product-cta">
+        CTA
+      </button>
+      <button onClick={onToggleExpand} data-testid="product-toggle">
+        Toggle
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/cards/testimonial-card", () => ({
+  TestimonialCard: ({ title, isActive }: any) => (
+    <div
+      data-testid="testimonial-card"
+      data-active={isActive}
+      data-title={title}
+    >
+      {title}
+    </div>
+  ),
+}));
+
+jest.mock("@shared/hooks/use-carousel-swipe", () => ({
+  useCarouselSwipe: () => ({
+    currentIndex: 0,
+    swipeOffset: 0,
+    isSwiping: false,
+    isMobile: false,
+    containerWidth: 1024,
+    containerRef: { current: null },
+    handleTouchStart: jest.fn(),
+    handleTouchMove: jest.fn(),
+    handleTouchEnd: jest.fn(),
+    prevSlide: jest.fn(),
+    nextSlide: jest.fn(),
+    goToSlide: jest.fn(),
+    constants: { CARD_OFFSET_PERCENTAGE: 105 },
+  }),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("ProductCardCarousel", () => {
+  const createProductFields = (
+    items: any[] = []
+  ): CarouselWithProductCards => ({
+    __typename: "ComponentCarousel",
+    sys: { id: "test-carousel" },
+    title: "Product Carousel",
+    items: { items },
+  });
+
+  const sampleProduct = {
+    __typename: "ComponentProductCard" as const,
+    sys: { id: "prod-1" },
+    speed: "500 Mbps|Fast internet",
+    price: "49",
+    priceSuffix: "99/mo",
+    techType: "Fiber",
+    highlighted: false,
+    productCardDescription: "Great plan",
+    benefitsTitle: "Benefits",
+    benefitsExpanded: false,
+    innerBadge: "New",
+    benefits: { items: [{ text: "Benefit 1" }] },
+    giftRewards: { list: { items: [{ text: "Gift" }] } },
+    cta: { buttonLabel: "Select" },
+    innerBadgeIcon: { url: "https://example.com/icon.png" },
+  };
+
+  it("returns null when no items and no title", () => {
+    const fields = createProductFields([]);
+    fields.title = undefined;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("returns null when items is undefined", () => {
+    const fields = {
+      __typename: "ComponentCarousel" as const,
+      sys: { id: "test" },
+      items: { items: undefined as any },
+      title: undefined,
+    } as any;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders product cards when items exist", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getAllByTestId("product-card")).toHaveLength(1);
+  });
+
+  it("renders non-carousel layout for 2 or fewer items", () => {
+    const fields = createProductFields([
+      sampleProduct,
+      { ...sampleProduct, sys: { id: "prod-2" } },
+    ]);
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    // Non-carousel: wrapped in flex layout
+    expect(container.querySelector(".flex.w-full")).toBeInTheDocument();
+  });
+
+  it("renders carousel layout for more than 2 items", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    // Should have mobile stack view (flex-col for md:hidden)
+    expect(container.querySelector(".flex-col")).toBeInTheDocument();
+  });
+
+  it("parses speed field correctly (planName | planSubtext)", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toHaveAttribute("data-plan", "500 Mbps");
+    expect(card).toHaveAttribute("data-speed", "500 Mbps|Fast internet");
+  });
+
+  it("handles missing speed gracefully", () => {
+    const item = { ...sampleProduct, speed: undefined };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toHaveAttribute("data-plan", "");
+  });
+
+  it("handles item with all optional fields missing", () => {
+    const minimalItem = {
+      __typename: "ComponentProductCard" as const,
+      sys: { id: "minimal" },
+    };
+    const fields = createProductFields([minimalItem]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toBeInTheDocument();
+  });
+
+  it("handles item with empty benefits and giftRewards", () => {
+    const item = {
+      ...sampleProduct,
+      benefits: undefined,
+      giftRewards: undefined,
+      innerBadge: undefined,
+      innerBadgeIcon: undefined,
+      priceSuffix: undefined,
+      price: undefined,
+      cta: undefined,
+    };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toBeInTheDocument();
+  });
+
+  it("handles speed without pipe separator", () => {
+    const item = { ...sampleProduct, speed: "500 Mbps" };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toHaveAttribute("data-plan", "500 Mbps");
+  });
+
+  it("renders navigation arrows for carousel mode", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByLabelText("Previous")).toBeInTheDocument();
+    expect(screen.getByLabelText("Next")).toBeInTheDocument();
+  });
+
+  it("calls prevSlide on Previous button click", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    render(<ProductCardCarousel fields={fields} />);
+    const prevBtn = screen.getByLabelText("Previous");
+    fireEvent.click(prevBtn);
+    // No error thrown, action processed
+    expect(prevBtn).toBeInTheDocument();
+  });
+
+  it("calls nextSlide on Next button click", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    render(<ProductCardCarousel fields={fields} />);
+    const nextBtn = screen.getByLabelText("Next");
+    fireEvent.click(nextBtn);
+    expect(nextBtn).toBeInTheDocument();
+  });
+
+  it("handles toggle expand click for desktop (non-carousel) cards", () => {
+    const fields = createProductFields([
+      sampleProduct,
+      { ...sampleProduct, sys: { id: "prod-2" } },
+    ]);
+    render(<ProductCardCarousel fields={fields} />);
+    const toggleButtons = screen.getAllByTestId("product-toggle");
+    // Click desktop toggle
+    fireEvent.click(toggleButtons[0]);
+    // No error - toggle state changes internally
+    expect(toggleButtons[0]).toBeInTheDocument();
+  });
+
+  it("handles CTA click on product card", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    const ctaButton = screen.getByTestId("product-cta");
+    fireEvent.click(ctaButton);
+    // handleCtaClick just returns; no error
+    expect(ctaButton).toBeInTheDocument();
+  });
+
+  it("handles toggle expand for mobile cards in carousel mode", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    render(<ProductCardCarousel fields={fields} />);
+    // Mobile view cards are in the flex-col hidden section
+    const toggleButtons = screen.getAllByTestId("product-toggle");
+    // The first set of cards are in mobile view (first 4 items)
+    fireEvent.click(toggleButtons[0]);
+    expect(toggleButtons[0]).toBeInTheDocument();
+  });
+
+  it("renders with benefitsExpanded true in fields", () => {
+    const item = { ...sampleProduct, benefitsExpanded: true };
+    const fields = createProductFields([item, { ...item, sys: { id: "p2" } }]);
+    render(<ProductCardCarousel fields={fields} />);
+    // Cards should render with expanded state
+    const cards = screen.getAllByTestId("product-card");
+    expect(cards[0]).toHaveAttribute("data-expanded", "true");
+  });
+
+  it("renders when title exists but items are empty", () => {
+    const fields = createProductFields([]);
+    fields.title = "Has Title";
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    // Should NOT return null because title exists
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  it("handles highlighted item (truthy branch)", () => {
+    const item = {
+      ...sampleProduct,
+      highlighted: true,
+      topBadgeText: "Best Deal",
+    };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toBeInTheDocument();
+  });
+
+  it("handles item with giftRewards.list but no items", () => {
+    const item = {
+      ...sampleProduct,
+      giftRewards: { list: { items: undefined as any } },
+    };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    const card = screen.getByTestId("product-card");
+    expect(card).toBeInTheDocument();
+  });
+
+  it("handles item with giftRewards but no list", () => {
+    const item = {
+      ...sampleProduct,
+      giftRewards: { list: undefined as any },
+    };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toBeInTheDocument();
+  });
+
+  it("handles item with priceSuffix without slash", () => {
+    const item = { ...sampleProduct, priceSuffix: "99" };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toBeInTheDocument();
+  });
+
+  it("handles item with innerBadgeIcon but no url", () => {
+    const item = {
+      ...sampleProduct,
+      innerBadgeIcon: {} as any,
+    };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toBeInTheDocument();
+  });
+
+  it("handles fields with items but items.items is null", () => {
+    const fields = {
+      __typename: "ComponentCarousel" as const,
+      sys: { id: "test" },
+      items: { items: null as any },
+      title: "Title present",
+    } as any;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    // title exists so it does not return null but items array is empty
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  it("handles fields with no items property at all", () => {
+    const fields = {
+      __typename: "ComponentCarousel" as const,
+      sys: { id: "test" },
+      items: undefined as any,
+      title: undefined,
+    } as any;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders tabbed view when tabs and activeTab are provided", () => {
+    const items = [
+      { ...sampleProduct, sys: { id: "prod-1" }, productCategory: "Internet" },
+      { ...sampleProduct, sys: { id: "prod-2" }, productCategory: "Phone" },
+    ];
+    const fields = createProductFields(items);
+    const { container } = render(
+      <ProductCardCarousel
+        fields={fields}
+        tabs={["Internet", "Phone"]}
+        activeTab="Internet"
+      />
+    );
+    // Should render tab containers with display block/none
+    const visibleTab = container.querySelector("[style*='display: block']");
+    expect(visibleTab).toBeInTheDocument();
+  });
+});
+
+describe("TestimonialCarousel", () => {
+  const createTestimonialFields = (
+    items: any[] = []
+  ): CarouselWithTestimonialCards => ({
+    __typename: "ComponentCarousel",
+    sys: { id: "test-carousel" },
+    title: "Testimonials",
+    items: { items },
+  });
+
+  const sampleTestimonial = {
+    __typename: "ComponentTestimonialCard" as const,
+    sys: { id: "test-1" },
+    title: "Great Service",
+    author: "John Doe",
+    role: "CEO",
+    rating: 5,
+    quote: "Amazing experience!",
+  };
+
+  it("returns null when no testimonials", () => {
+    const fields = createTestimonialFields([]);
+    const { container } = render(<TestimonialCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("returns null when testimonials items is undefined", () => {
+    const fields = {
+      __typename: "ComponentCarousel" as const,
+      sys: { id: "test" },
+      title: "Testimonials",
+      items: { items: undefined as any },
+    } as any;
+    const { container } = render(<TestimonialCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("returns null when testimonials field items is null", () => {
+    const fields = {
+      __typename: "ComponentCarousel" as const,
+      sys: { id: "test" },
+      title: "Testimonials",
+      items: { items: null as any },
+    } as any;
+    const { container } = render(<TestimonialCarousel fields={fields} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders testimonial cards when items exist", () => {
+    const fields = createTestimonialFields([sampleTestimonial]);
+    render(<TestimonialCarousel fields={fields} />);
+    expect(screen.getByTestId("testimonial-card")).toBeInTheDocument();
+  });
+
+  it("renders navigation dots for each testimonial", () => {
+    const items = [
+      sampleTestimonial,
+      { ...sampleTestimonial, sys: { id: "test-2" }, title: "Second" },
+      { ...sampleTestimonial, sys: { id: "test-3" }, title: "Third" },
+    ];
+    const fields = createTestimonialFields(items);
+    render(<TestimonialCarousel fields={fields} />);
+    const dots = screen.getAllByRole("button", { name: /Go to slide/ });
+    expect(dots).toHaveLength(3);
+  });
+
+  it("renders Previous and Next navigation buttons", () => {
+    const items = [
+      sampleTestimonial,
+      { ...sampleTestimonial, sys: { id: "test-2" } },
+    ];
+    const fields = createTestimonialFields(items);
+    render(<TestimonialCarousel fields={fields} />);
+    expect(screen.getByLabelText("Previous")).toBeInTheDocument();
+    expect(screen.getByLabelText("Next")).toBeInTheDocument();
+  });
+
+  it("renders dot navigation with correct aria labels", () => {
+    const items = [
+      sampleTestimonial,
+      { ...sampleTestimonial, sys: { id: "test-2" } },
+    ];
+    const fields = createTestimonialFields(items);
+    render(<TestimonialCarousel fields={fields} />);
+    expect(screen.getByLabelText("Go to slide 1")).toBeInTheDocument();
+    expect(screen.getByLabelText("Go to slide 2")).toBeInTheDocument();
+  });
+
+  it("calls goToSlide when dot is clicked", () => {
+    const items = [
+      sampleTestimonial,
+      { ...sampleTestimonial, sys: { id: "test-2" } },
+      { ...sampleTestimonial, sys: { id: "test-3" } },
+    ];
+    const fields = createTestimonialFields(items);
+    render(<TestimonialCarousel fields={fields} />);
+    const dot2 = screen.getByLabelText("Go to slide 2");
+    fireEvent.click(dot2);
+    expect(dot2).toBeInTheDocument();
+  });
+});
+
+describe("TabSwitch", () => {
+  const defaultTabProps = {
+    tabs: ["Tab A", "Tab B", "Tab C"],
+    activeTab: "Tab A",
+    onChange: jest.fn(),
+  };
+
+  it("renders all tabs", () => {
+    render(<TabSwitch {...defaultTabProps} />);
+    expect(screen.getByText("Tab A")).toBeInTheDocument();
+    expect(screen.getByText("Tab B")).toBeInTheDocument();
+    expect(screen.getByText("Tab C")).toBeInTheDocument();
+  });
+
+  it("calls onChange when a tab is clicked", () => {
+    const onChange = jest.fn();
+    render(<TabSwitch {...defaultTabProps} onChange={onChange} />);
+    fireEvent.click(screen.getByText("Tab B"));
+    expect(onChange).toHaveBeenCalledWith("Tab B");
+  });
+
+  it("applies active style to selected tab", () => {
+    render(<TabSwitch {...defaultTabProps} />);
+    const activeBtn = screen.getByText("Tab A");
+    expect(activeBtn.className).toContain("text-text-inverse");
+  });
+
+  it("applies inactive style to non-selected tabs", () => {
+    render(<TabSwitch {...defaultTabProps} />);
+    const inactiveBtn = screen.getByText("Tab B");
+    expect(inactiveBtn.className).toContain("text-text-disabled");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <TabSwitch {...defaultTabProps} className="custom-class" />
+    );
+    expect(container.innerHTML).toContain("custom-class");
+  });
+
+  it("renders sliding indicator", () => {
+    const { container } = render(<TabSwitch {...defaultTabProps} />);
+    const indicator = container.querySelector(".bg-bg-fill-brand");
+    expect(indicator).toBeInTheDocument();
+  });
+});