@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/components/modal/index.test.tsx

@@ -1,310 +1,310 @@
-import React from "react";
-import { Modal } from "./index";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import "@testing-library/jest-dom";
-
-// Mock react-modal
-jest.mock("react-modal", () => {
-  const MockReactModal = ({
-    isOpen,
-    children,
-    className,
-    overlayClassName,
-    onRequestClose,
-    parentSelector,
-  }: any) => {
-    // Call parentSelector to cover the arrow function
-    if (parentSelector) parentSelector();
-    if (!isOpen) return null;
-    return (
-      <div data-testid="react-modal" className={className}>
-        <div
-          data-testid="modal-overlay"
-          className={overlayClassName}
-          onClick={onRequestClose}
-        />
-        {children}
-      </div>
-    );
-  };
-  MockReactModal.setAppElement = jest.fn();
-  return MockReactModal;
-});
-
-// Allow overriding the transition state for specific tests
-let mockTransitionState: string | null = null;
-const setMockTransitionState = (state: string | null) => {
-  mockTransitionState = state;
-};
-
-// Mock react-transition-group
-jest.mock("react-transition-group", () => ({
-  Transition: ({ children, in: inProp }: any) => {
-    const state = mockTransitionState ?? (inProp ? "entered" : "exited");
-    return children(state);
-  },
-}));
-
-// Mock useBodyScrollLock
-jest.mock("../../hooks/use-body-scroll-lock", () => jest.fn());
-
-describe("Modal", () => {
-  const defaultProps = {
-    isOpen: true,
-    onRequestClose: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("Rendering", () => {
-    it("renders when isOpen is true", () => {
-      render(<Modal {...defaultProps}>Content</Modal>);
-      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
-      expect(screen.getByText("Content")).toBeInTheDocument();
-    });
-
-    it("does not render when isOpen is false", () => {
-      render(
-        <Modal {...defaultProps} isOpen={false}>
-          Content
-        </Modal>
-      );
-      expect(screen.queryByTestId("react-modal")).not.toBeInTheDocument();
-    });
-
-    it("has correct displayName", () => {
-      expect(Modal.displayName).toBe("Modal");
-    });
-
-    it("renders children in body div", () => {
-      render(<Modal {...defaultProps}>Hello World</Modal>);
-      expect(screen.getByText("Hello World")).toBeInTheDocument();
-    });
-  });
-
-  describe("Title", () => {
-    it("renders title when provided", () => {
-      render(<Modal {...defaultProps} title="My Modal" />);
-      expect(screen.getByText("My Modal")).toBeInTheDocument();
-    });
-
-    it("does not render title section when not provided", () => {
-      const { container } = render(<Modal {...defaultProps} />);
-      expect(container.querySelector(".border-b")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Close button", () => {
-    it("renders close button by default", () => {
-      render(<Modal {...defaultProps} />);
-      expect(screen.getByTestId("close-button")).toBeInTheDocument();
-    });
-
-    it("hides close button when hideCloseButton is true", () => {
-      render(<Modal {...defaultProps} hideCloseButton={true} />);
-      expect(screen.queryByTestId("close-button")).not.toBeInTheDocument();
-    });
-
-    it("calls onRequestClose when close button is clicked", () => {
-      const onRequestClose = jest.fn();
-      render(<Modal {...defaultProps} onRequestClose={onRequestClose} />);
-      fireEvent.click(screen.getByTestId("close-button"));
-      expect(onRequestClose).toHaveBeenCalledTimes(1);
-    });
-
-    it("renders close icon in close button", () => {
-      render(<Modal {...defaultProps} />);
-      expect(screen.getByText("close")).toBeInTheDocument();
-    });
-  });
-
-  describe("Size", () => {
-    it("applies md size classes by default", () => {
-      render(<Modal {...defaultProps} />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("inset-[15%]");
-    });
-
-    it("applies xl size classes", () => {
-      render(<Modal {...defaultProps} size="xl" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("inset-[5%]");
-    });
-
-    it("applies lg size classes", () => {
-      render(<Modal {...defaultProps} size="lg" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("inset-[10%]");
-    });
-
-    it("applies sm size classes", () => {
-      render(<Modal {...defaultProps} size="sm" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("w-[640px]");
-    });
-
-    it("applies xs size classes", () => {
-      render(<Modal {...defaultProps} size="xs" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("w-[calc(100%-30px)]");
-    });
-  });
-
-  describe("Shape", () => {
-    it("applies default shape", () => {
-      render(<Modal {...defaultProps} />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).not.toContain("rounded-3xl");
-    });
-
-    it("applies rounded shape", () => {
-      render(<Modal {...defaultProps} shape="rounded" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("rounded-3xl");
-    });
-  });
-
-  describe("Centered", () => {
-    it("applies centered classes", () => {
-      render(<Modal {...defaultProps} centered={true} />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("top-0");
-    });
-  });
-
-  describe("CSS classes", () => {
-    it("applies custom className", () => {
-      render(<Modal {...defaultProps} className="custom-modal" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("custom-modal");
-    });
-
-    it("applies bodyClassName to body div", () => {
-      render(<Modal {...defaultProps} bodyClassName="custom-body" />);
-      const body = screen
-        .getByTestId("react-modal")
-        .querySelector(".custom-body");
-      expect(body).toBeInTheDocument();
-    });
-
-    it("applies closeButtonClassName", () => {
-      render(<Modal {...defaultProps} closeButtonClassName="custom-close" />);
-      const closeBtn = screen.getByTestId("close-button");
-      expect(closeBtn.className).toContain("custom-close");
-    });
-  });
-
-  describe("Body style", () => {
-    it("applies bodyStyle to body div", () => {
-      render(
-        <Modal {...defaultProps} bodyStyle={{ padding: "20px" }}>
-          Content
-        </Modal>
-      );
-      const body = screen.getByText("Content");
-      // Body content should be present inside the modal
-      expect(body).toBeInTheDocument();
-    });
-  });
-
-  describe("Animation", () => {
-    it("applies popper animation classes by default", () => {
-      render(<Modal {...defaultProps} />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("transition-transform");
-    });
-
-    it("applies bottomSheet animation classes", () => {
-      render(<Modal {...defaultProps} animation="bottomSheet" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("ease-in-out");
-    });
-
-    it("applies exited state classes for popper when not transitioning", () => {
-      // Since our mock always returns 'entered' state when in=true,
-      // we can verify it includes entered classes
-      render(<Modal {...defaultProps} />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("pointer-events-auto");
-    });
-
-    it("returns default popper classes for unknown transition state", () => {
-      setMockTransitionState("unmounted");
-      render(<Modal {...defaultProps} animation="popper" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("opacity-0");
-      expect(modal.className).toContain("translate-y-[-18px]");
-      setMockTransitionState(null);
-    });
-
-    it("returns default bottomSheet classes for unknown transition state", () => {
-      setMockTransitionState("unmounted");
-      render(<Modal {...defaultProps} animation="bottomSheet" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("opacity-0");
-      expect(modal.className).toContain("translate-y-full");
-      setMockTransitionState(null);
-    });
-  });
-
-  describe("Data attributes", () => {
-    it("passes data-testid to body div", () => {
-      render(<Modal {...defaultProps} data-testid="modal-body" />);
-      const elements = screen.getAllByTestId("modal-body");
-      expect(elements.length).toBeGreaterThan(0);
-    });
-
-    it("supports parentSelector prop", () => {
-      // Add a main element to the document
-      const main = document.createElement("main");
-      document.body.appendChild(main);
-      render(
-        <Modal
-          {...defaultProps}
-          parentSelector={"main" as unknown as string & (() => HTMLElement)}
-        />
-      );
-      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
-      document.body.removeChild(main);
-    });
-
-    it("falls back to document.body when parentSelector element not found", () => {
-      render(
-        <Modal
-          {...defaultProps}
-          parentSelector={
-            ".nonexistent" as unknown as string & (() => HTMLElement)
-          }
-        />
-      );
-      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
-    });
-
-    it("applies closeWrapperClassName", () => {
-      const { container } = render(
-        <Modal {...defaultProps} closeWrapperClassName="wrapper-class" />
-      );
-      const wrapper = container.querySelector(".wrapper-class");
-      expect(wrapper).toBeInTheDocument();
-    });
-
-    it("applies bottomSheet animation classes", () => {
-      render(<Modal {...defaultProps} animation="bottomSheet" />);
-      const modal = screen.getByTestId("react-modal");
-      expect(modal.className).toContain("translate-y-0");
-      expect(modal.className).toContain("pointer-events-auto");
-    });
-
-    it("returns empty animation classes for unknown animation type", () => {
-      render(<Modal {...defaultProps} animation={"unknown" as any} />);
-      const modal = screen.getByTestId("react-modal");
-      // No animation-specific classes, just the base classes
-      expect(modal.className).not.toContain("translate-y");
-      expect(modal.className).not.toContain("opacity-0");
-    });
-  });
-});
+import React from "react";
+import { Modal } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+// Mock react-modal
+jest.mock("react-modal", () => {
+  const MockReactModal = ({
+    isOpen,
+    children,
+    className,
+    overlayClassName,
+    onRequestClose,
+    parentSelector,
+  }: any) => {
+    // Call parentSelector to cover the arrow function
+    if (parentSelector) parentSelector();
+    if (!isOpen) return null;
+    return (
+      <div data-testid="react-modal" className={className}>
+        <div
+          data-testid="modal-overlay"
+          className={overlayClassName}
+          onClick={onRequestClose}
+        />
+        {children}
+      </div>
+    );
+  };
+  MockReactModal.setAppElement = jest.fn();
+  return MockReactModal;
+});
+
+// Allow overriding the transition state for specific tests
+let mockTransitionState: string | null = null;
+const setMockTransitionState = (state: string | null) => {
+  mockTransitionState = state;
+};
+
+// Mock react-transition-group
+jest.mock("react-transition-group", () => ({
+  Transition: ({ children, in: inProp }: any) => {
+    const state = mockTransitionState ?? (inProp ? "entered" : "exited");
+    return children(state);
+  },
+}));
+
+// Mock useBodyScrollLock
+jest.mock("../../hooks/use-body-scroll-lock", () => jest.fn());
+
+describe("Modal", () => {
+  const defaultProps = {
+    isOpen: true,
+    onRequestClose: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("renders when isOpen is true", () => {
+      render(<Modal {...defaultProps}>Content</Modal>);
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+
+    it("does not render when isOpen is false", () => {
+      render(
+        <Modal {...defaultProps} isOpen={false}>
+          Content
+        </Modal>
+      );
+      expect(screen.queryByTestId("react-modal")).not.toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(Modal.displayName).toBe("Modal");
+    });
+
+    it("renders children in body div", () => {
+      render(<Modal {...defaultProps}>Hello World</Modal>);
+      expect(screen.getByText("Hello World")).toBeInTheDocument();
+    });
+  });
+
+  describe("Title", () => {
+    it("renders title when provided", () => {
+      render(<Modal {...defaultProps} title="My Modal" />);
+      expect(screen.getByText("My Modal")).toBeInTheDocument();
+    });
+
+    it("does not render title section when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.querySelector(".border-b")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Close button", () => {
+    it("renders close button by default", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("close-button")).toBeInTheDocument();
+    });
+
+    it("hides close button when hideCloseButton is true", () => {
+      render(<Modal {...defaultProps} hideCloseButton={true} />);
+      expect(screen.queryByTestId("close-button")).not.toBeInTheDocument();
+    });
+
+    it("calls onRequestClose when close button is clicked", () => {
+      const onRequestClose = jest.fn();
+      render(<Modal {...defaultProps} onRequestClose={onRequestClose} />);
+      fireEvent.click(screen.getByTestId("close-button"));
+      expect(onRequestClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders close icon in close button", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByText("close")).toBeInTheDocument();
+    });
+  });
+
+  describe("Size", () => {
+    it("applies md size classes by default", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[15%]");
+    });
+
+    it("applies xl size classes", () => {
+      render(<Modal {...defaultProps} size="xl" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[5%]");
+    });
+
+    it("applies lg size classes", () => {
+      render(<Modal {...defaultProps} size="lg" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("inset-[10%]");
+    });
+
+    it("applies sm size classes", () => {
+      render(<Modal {...defaultProps} size="sm" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("w-[640px]");
+    });
+
+    it("applies xs size classes", () => {
+      render(<Modal {...defaultProps} size="xs" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("w-[calc(100%-30px)]");
+    });
+  });
+
+  describe("Shape", () => {
+    it("applies default shape", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).not.toContain("rounded-3xl");
+    });
+
+    it("applies rounded shape", () => {
+      render(<Modal {...defaultProps} shape="rounded" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("rounded-3xl");
+    });
+  });
+
+  describe("Centered", () => {
+    it("applies centered classes", () => {
+      render(<Modal {...defaultProps} centered={true} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("top-0");
+    });
+  });
+
+  describe("CSS classes", () => {
+    it("applies custom className", () => {
+      render(<Modal {...defaultProps} className="custom-modal" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("custom-modal");
+    });
+
+    it("applies bodyClassName to body div", () => {
+      render(<Modal {...defaultProps} bodyClassName="custom-body" />);
+      const body = screen
+        .getByTestId("react-modal")
+        .querySelector(".custom-body");
+      expect(body).toBeInTheDocument();
+    });
+
+    it("applies closeButtonClassName", () => {
+      render(<Modal {...defaultProps} closeButtonClassName="custom-close" />);
+      const closeBtn = screen.getByTestId("close-button");
+      expect(closeBtn.className).toContain("custom-close");
+    });
+  });
+
+  describe("Body style", () => {
+    it("applies bodyStyle to body div", () => {
+      render(
+        <Modal {...defaultProps} bodyStyle={{ padding: "20px" }}>
+          Content
+        </Modal>
+      );
+      const body = screen.getByText("Content");
+      // Body content should be present inside the modal
+      expect(body).toBeInTheDocument();
+    });
+  });
+
+  describe("Animation", () => {
+    it("applies popper animation classes by default", () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("transition-transform");
+    });
+
+    it("applies bottomSheet animation classes", () => {
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("ease-in-out");
+    });
+
+    it("applies exited state classes for popper when not transitioning", () => {
+      // Since our mock always returns 'entered' state when in=true,
+      // we can verify it includes entered classes
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("pointer-events-auto");
+    });
+
+    it("returns default popper classes for unknown transition state", () => {
+      setMockTransitionState("unmounted");
+      render(<Modal {...defaultProps} animation="popper" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("opacity-0");
+      expect(modal.className).toContain("translate-y-[-18px]");
+      setMockTransitionState(null);
+    });
+
+    it("returns default bottomSheet classes for unknown transition state", () => {
+      setMockTransitionState("unmounted");
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("opacity-0");
+      expect(modal.className).toContain("translate-y-full");
+      setMockTransitionState(null);
+    });
+  });
+
+  describe("Data attributes", () => {
+    it("passes data-testid to body div", () => {
+      render(<Modal {...defaultProps} data-testid="modal-body" />);
+      const elements = screen.getAllByTestId("modal-body");
+      expect(elements.length).toBeGreaterThan(0);
+    });
+
+    it("supports parentSelector prop", () => {
+      // Add a main element to the document
+      const main = document.createElement("main");
+      document.body.appendChild(main);
+      render(
+        <Modal
+          {...defaultProps}
+          parentSelector={"main" as unknown as string & (() => HTMLElement)}
+        />
+      );
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+      document.body.removeChild(main);
+    });
+
+    it("falls back to document.body when parentSelector element not found", () => {
+      render(
+        <Modal
+          {...defaultProps}
+          parentSelector={
+            ".nonexistent" as unknown as string & (() => HTMLElement)
+          }
+        />
+      );
+      expect(screen.getByTestId("react-modal")).toBeInTheDocument();
+    });
+
+    it("applies closeWrapperClassName", () => {
+      const { container } = render(
+        <Modal {...defaultProps} closeWrapperClassName="wrapper-class" />
+      );
+      const wrapper = container.querySelector(".wrapper-class");
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it("applies bottomSheet animation classes", () => {
+      render(<Modal {...defaultProps} animation="bottomSheet" />);
+      const modal = screen.getByTestId("react-modal");
+      expect(modal.className).toContain("translate-y-0");
+      expect(modal.className).toContain("pointer-events-auto");
+    });
+
+    it("returns empty animation classes for unknown animation type", () => {
+      render(<Modal {...defaultProps} animation={"unknown" as any} />);
+      const modal = screen.getByTestId("react-modal");
+      // No animation-specific classes, just the base classes
+      expect(modal.className).not.toContain("translate-y");
+      expect(modal.className).not.toContain("opacity-0");
+    });
+  });
+});