@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/cart-retention-banner/index.test.tsx

@@ -0,0 +1,409 @@
+import "@testing-library/jest-dom";
+
+import CartRetentionBanner from "./index";
+import { TypeCartRetentionBannerFields } from "./types";
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: ({ children, onClick, buttonLabel, ...props }: any) => (
+    <button onClick={onClick} data-testid="banner-button" {...props}>
+      {buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/modal", () => ({
+  Modal: ({ isOpen, onRequestClose, children, ...props }: any) => (
+    <div data-testid="modal" data-open={isOpen} data-type={props.type}>
+      {isOpen && (
+        <>
+          <button data-testid="modal-close" onClick={onRequestClose}>
+            Close
+          </button>
+          {children}
+        </>
+      )}
+    </div>
+  ),
+}));
+
+jest.mock("@shared/hooks/contentful/use-contentful-rich-text", () => ({
+  renderContentfulRichText: (doc: any, _: any, className: string) => (
+    <div data-testid="rich-text" className={className}>
+      Rich Text Content
+    </div>
+  ),
+}));
+
+jest.mock("@shared/utils/contentful/to-document", () => ({
+  toDocument: (json: any) => json,
+}));
+
+describe("CartRetentionBanner", () => {
+  const defaultFields: TypeCartRetentionBannerFields = {
+    entryTitle: "Cart Banner",
+    anchorId: "cart-banner",
+    mainHeading: "Welcome back!",
+    description: { json: { content: [{ nodeType: "paragraph" }] } },
+    cta: { buttonLabel: "Continue checkout" },
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe("modal behavior", () => {
+    it("renders a section with anchorId", () => {
+      render(<CartRetentionBanner fields={defaultFields} />);
+      const section = document.querySelector("section#cart-banner");
+      expect(section).toBeInTheDocument();
+    });
+
+    it("renders with data-testid cart-retention-banner", () => {
+      render(<CartRetentionBanner fields={defaultFields} />);
+      expect(screen.getByTestId("cart-retention-banner")).toBeInTheDocument();
+    });
+
+    it("opens modal when checkShouldShowBanner returns true", async () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      // Allow useEffect to fire
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      const modal = screen.getByTestId("modal");
+      expect(modal).toHaveAttribute("data-open", "true");
+    });
+
+    it("does not open modal when checkShouldShowBanner returns false", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(false);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      const modal = screen.getByTestId("modal");
+      expect(modal).toHaveAttribute("data-open", "false");
+    });
+
+    it("calls onBannerShown when modal opens", () => {
+      const onBannerShown = jest.fn();
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+          onBannerShown={onBannerShown}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(onBannerShown).toHaveBeenCalled();
+    });
+
+    it("closes modal and calls onClose", () => {
+      const onClose = jest.fn();
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+          onClose={onClose}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      fireEvent.click(screen.getByTestId("modal-close"));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it("calls onContinueCheckout when CTA button is clicked in modal", () => {
+      const onContinueCheckout = jest.fn();
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+          onContinueCheckout={onContinueCheckout}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      fireEvent.click(screen.getByTestId("banner-button"));
+      expect(onContinueCheckout).toHaveBeenCalled();
+    });
+
+    it("uses default heading when mainHeading is not provided", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      const fields = { ...defaultFields, mainHeading: undefined };
+      render(
+        <CartRetentionBanner
+          fields={fields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByText(/Welcome back/i)).toBeInTheDocument();
+    });
+
+    it("uses default CTA label when cta.buttonLabel is not provided", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      const fields = { ...defaultFields, cta: {} };
+      render(
+        <CartRetentionBanner
+          fields={fields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByTestId("banner-button")).toHaveTextContent(
+        "Continue checkout"
+      );
+    });
+
+    it("renders rich text description in modal", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByTestId("rich-text")).toBeInTheDocument();
+    });
+
+    it("does not render rich text when description is undefined", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      const fields = { ...defaultFields, description: undefined };
+      render(
+        <CartRetentionBanner
+          fields={fields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.queryByTestId("rich-text")).not.toBeInTheDocument();
+    });
+
+    it("passes type=cart-retention-banner to Modal", () => {
+      render(<CartRetentionBanner fields={defaultFields} />);
+      const modal = screen.getByTestId("modal");
+      expect(modal).toHaveAttribute("data-type", "cart-retention-banner");
+    });
+  });
+
+  describe("popup container mode", () => {
+    it("renders inline content when isInPopupContainer is true", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      // Should render the pop-up-body div directly
+      const popupBody = document.querySelector(".pop-up-body");
+      expect(popupBody).toBeInTheDocument();
+    });
+
+    it("renders data-section-type attribute in popup mode", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      const div = document.querySelector(
+        '[data-section-type="cart-retention-banner"]'
+      );
+      expect(div).toBeInTheDocument();
+    });
+
+    it("renders heading in popup mode", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      expect(screen.getByText("Welcome back!")).toBeInTheDocument();
+    });
+
+    it("renders default heading in popup mode when mainHeading is undefined", () => {
+      const fields = { ...defaultFields, mainHeading: undefined };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      expect(screen.getByText(/Welcome back/)).toBeInTheDocument();
+    });
+
+    it("renders CTA in popup mode", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      expect(screen.getByTestId("banner-button")).toHaveTextContent(
+        "Continue checkout"
+      );
+    });
+
+    it("calls onContinueCheckout in popup mode", () => {
+      const onContinueCheckout = jest.fn();
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          isInPopupContainer={true}
+          onContinueCheckout={onContinueCheckout}
+        />
+      );
+      fireEvent.click(screen.getByTestId("banner-button"));
+      expect(onContinueCheckout).toHaveBeenCalled();
+    });
+
+    it("does not render Modal in popup mode", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    });
+
+    it("renders rich text in popup mode", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      expect(screen.getByTestId("rich-text")).toBeInTheDocument();
+    });
+  });
+
+  describe("timer cleanup", () => {
+    it("cleans up timeout on unmount", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(false);
+      const { unmount } = render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+      unmount();
+      // No error should occur after unmount
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+    });
+  });
+
+  describe("optional callback branches", () => {
+    it("handles close without onClose callback", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      // Should not throw when clicking close without onClose
+      fireEvent.click(screen.getByTestId("modal-close"));
+      expect(screen.getByTestId("modal")).toHaveAttribute("data-open", "false");
+    });
+
+    it("handles continue checkout without onContinueCheckout callback", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      // Should not throw when clicking CTA without onContinueCheckout
+      fireEvent.click(screen.getByTestId("banner-button"));
+      expect(screen.getByTestId("banner-button")).toBeInTheDocument();
+    });
+
+    it("handles continue checkout in popup mode without callback", () => {
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
+      // Should not throw
+      fireEvent.click(screen.getByTestId("banner-button"));
+      expect(screen.getByTestId("banner-button")).toBeInTheDocument();
+    });
+
+    it("opens modal without onBannerShown callback", () => {
+      const checkShouldShowBanner = jest.fn().mockReturnValue(true);
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          checkShouldShowBanner={checkShouldShowBanner}
+        />
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByTestId("modal")).toHaveAttribute("data-open", "true");
+    });
+
+    it("does not open if checkShouldShowBanner is not provided", () => {
+      render(<CartRetentionBanner fields={defaultFields} />);
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByTestId("modal")).toHaveAttribute("data-open", "false");
+    });
+
+    it("renders popup without description", () => {
+      const fields = { ...defaultFields, description: undefined };
+      render(<CartRetentionBanner fields={fields} isInPopupContainer={true} />);
+      expect(screen.queryByTestId("rich-text")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -95,10 +95,10 @@ const CartRetentionBanner: React.FC<{
               "body1 my-4 text-center"
             )}
           <div className="flex w-full justify-center">
-          <Button
-            onClick={continueCheckout}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
+            <Button
+              onClick={continueCheckout}
+              buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+            />
           </div>
         </div>
       </Modal>

package/src/contentful/blocks/comparison-table/index.test.tsx

@@ -0,0 +1,114 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { ComparisonTable } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as, ...props }: any) => {
+    const Tag = as || "span";
+    return <Tag {...props}>{children}</Tag>;
+  },
+}));
+
+describe("ComparisonTable", () => {
+  const defaultProps = {
+    title: "Compare Plans",
+    disclaimer: <span>* Terms and conditions apply</span>,
+    table: (
+      <table data-testid="comparison-table-content">
+        <thead>
+          <tr>
+            <th>Feature</th>
+            <th>Basic</th>
+            <th>Pro</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Speed</td>
+            <td>100 Mbps</td>
+            <td>500 Mbps</td>
+          </tr>
+        </tbody>
+      </table>
+    ),
+  };
+
+  it("renders the component container", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+  });
+
+  it("renders the title as h2", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    const title = screen.getByText("Compare Plans");
+    expect(title.tagName).toBe("H2");
+  });
+
+  it("renders the table content", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    expect(screen.getByTestId("comparison-table-content")).toBeInTheDocument();
+  });
+
+  it("renders the disclaimer text", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    expect(
+      screen.getByText("* Terms and conditions apply")
+    ).toBeInTheDocument();
+  });
+
+  it("applies max-w-120 class when maxWidth is true (default)", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    const inner = container.querySelector(".component-container > div");
+    expect(inner?.className).toContain("max-w-120");
+    expect(inner?.className).toContain("xl:mx-auto");
+  });
+
+  it("does not apply max-w-120 class when maxWidth is false", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} maxWidth={false} />
+    );
+    const inner = container.querySelector(".component-container > div");
+    expect(inner?.className).not.toContain("max-w-120");
+    expect(inner?.className).not.toContain("xl:mx-auto");
+  });
+
+  it("renders comparison-table-container", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    expect(
+      container.querySelector(".comparison-table-container")
+    ).toBeInTheDocument();
+  });
+
+  it("renders without title", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} title={undefined} />
+    );
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+    expect(screen.queryByText("Compare Plans")).not.toBeInTheDocument();
+  });
+
+  it("renders without disclaimer", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} disclaimer={undefined} />
+    );
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+  });
+
+  it("renders table as a ReactNode", () => {
+    const customTable = <div data-testid="custom-table">Custom content</div>;
+    render(<ComparisonTable {...defaultProps} table={customTable} />);
+    expect(screen.getByTestId("custom-table")).toBeInTheDocument();
+  });
+
+  it("renders with correct CSS structure", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    const tableContainer = container.querySelector(
+      ".comparison-table-container"
+    );
+    expect(tableContainer?.className).toContain("mt-5");
+    expect(tableContainer?.className).toContain("p-5");
+  });
+});