@windstream/react-shared-components 0.1.94 → 0.1.96

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

@@ -1,539 +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();
-  });
-});
+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();
+  });
+});