@windstream/react-shared-components 0.1.94 → 0.1.95

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

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