@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,166 @@
+import React from "react";
+import { List } from "./index";
+import { ListItem } from "./list-item";
+
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("List", () => {
+  describe("Rendering", () => {
+    it("renders as ul by default", () => {
+      const { container } = render(<List />);
+      expect(container.querySelector("ul")).toBeInTheDocument();
+    });
+
+    it("renders as ol when type='ol'", () => {
+      const { container } = render(<List type="ol" />);
+      expect(container.querySelector("ol")).toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(List.displayName).toBe("List");
+    });
+
+    it("renders children content", () => {
+      render(
+        <List>
+          <li>Item 1</li>
+        </List>
+      );
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+    });
+
+    it("renders items from items prop", () => {
+      const items = [
+        { id: 1, content: "First" },
+        { id: 2, content: "Second" },
+      ];
+      render(<List items={items} />);
+      expect(screen.getByText("First")).toBeInTheDocument();
+      expect(screen.getByText("Second")).toBeInTheDocument();
+    });
+
+    it("renders nothing when items is empty", () => {
+      const { container } = render(<List items={[]} />);
+      expect(container.querySelector("ul")?.children).toHaveLength(0);
+    });
+
+    it("uses renderItem when provided", () => {
+      const items = [
+        { id: 1, content: "First" },
+        { id: 2, content: "Second" },
+      ];
+      const renderItem = (item: any, index: number) => (
+        <li key={index} data-testid={`custom-${index}`}>
+          Custom: {item.content}
+        </li>
+      );
+      render(<List items={items} renderItem={renderItem} />);
+      expect(screen.getByText("Custom: First")).toBeInTheDocument();
+      expect(screen.getByTestId("custom-0")).toBeInTheDocument();
+    });
+  });
+
+  describe("Variants", () => {
+    it("applies unstyled variant with no extra classes", () => {
+      const { container } = render(<List variant="unstyled" />);
+      const el = container.querySelector("ul");
+      expect(el?.className).toContain("list--unstyled");
+    });
+
+    it("applies default variant classes for ul", () => {
+      const { container } = render(<List variant="default" />);
+      const el = container.querySelector("ul");
+      expect(el?.className).toContain("list--default");
+      expect(el?.className).toContain("list-disc");
+    });
+
+    it("applies default variant classes for ol", () => {
+      const { container } = render(<List type="ol" variant="default" />);
+      const el = container.querySelector("ol");
+      expect(el?.className).toContain("list-decimal");
+    });
+  });
+
+  describe("Props", () => {
+    it("applies custom className", () => {
+      const { container } = render(<List className="my-list" />);
+      expect(container.querySelector("ul")?.className).toContain("my-list");
+    });
+
+    it("applies inline style", () => {
+      const { container } = render(<List style={{ color: "blue" }} />);
+      expect(container.querySelector("ul")?.style.color).toBe("blue");
+    });
+
+    it("forwards ref to ul element", () => {
+      const ref = React.createRef<HTMLUListElement>();
+      render(<List ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it("forwards ref to ol element", () => {
+      const ref = React.createRef<HTMLOListElement>();
+      render(<List ref={ref} type="ol" />);
+      expect(ref.current).toBeInstanceOf(HTMLOListElement);
+    });
+
+    it("passes item className to ListItem", () => {
+      const items = [{ id: 1, content: "Item", className: "item-class" }];
+      render(<List items={items} />);
+      const li = screen.getByText("Item");
+      expect(li.className).toContain("item-class");
+    });
+  });
+});
+
+describe("ListItem", () => {
+  it("renders children content", () => {
+    render(<ListItem>Hello</ListItem>);
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+  });
+
+  it("has correct displayName", () => {
+    expect(ListItem.displayName).toBe("ListItem");
+  });
+
+  it("renders as li element", () => {
+    render(<ListItem>Item</ListItem>);
+    expect(screen.getByText("Item").tagName).toBe("LI");
+  });
+
+  it("applies custom className", () => {
+    render(<ListItem className="custom">Item</ListItem>);
+    expect(screen.getByText("Item").className).toContain("custom");
+  });
+
+  it("applies unstyled variant", () => {
+    render(<ListItem variant="unstyled">Item</ListItem>);
+    const el = screen.getByText("Item");
+    expect(el.className).toContain("list-item--unstyled");
+  });
+
+  it("applies default variant classes", () => {
+    render(<ListItem variant="default">Item</ListItem>);
+    const el = screen.getByText("Item");
+    expect(el.className).toContain("list-item--default");
+    expect(el.className).toContain("mb-1");
+  });
+
+  it("applies inline style", () => {
+    render(<ListItem style={{ color: "green" }}>Item</ListItem>);
+    expect(screen.getByText("Item").style.color).toBe("green");
+  });
+
+  it("forwards ref to li element", () => {
+    const ref = React.createRef<HTMLLIElement>();
+    render(<ListItem ref={ref}>Item</ListItem>);
+    expect(ref.current).toBeInstanceOf(HTMLLIElement);
+  });
+
+  it("passes additional HTML attributes", () => {
+    render(<ListItem data-testid="li-item">Item</ListItem>);
+    expect(screen.getByTestId("li-item")).toBeInTheDocument();
+  });
+});

package/src/components/material-icon/index.test.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { MaterialIcon } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("MaterialIcon", () => {
+  describe("Rendering", () => {
+    it("renders the icon name as text content", () => {
+      render(<MaterialIcon name="home" />);
+      expect(screen.getByText("home")).toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(MaterialIcon.displayName).toBe("MaterialIcon");
+    });
+
+    it("renders as a span element", () => {
+      render(<MaterialIcon name="search" />);
+      expect(screen.getByText("search").tagName).toBe("SPAN");
+    });
+
+    it("applies material-symbols-rounded class", () => {
+      render(<MaterialIcon name="settings" />);
+      expect(screen.getByText("settings").className).toContain(
+        "material-symbols-rounded"
+      );
+    });
+  });
+
+  describe("Font variation settings", () => {
+    it("sets default font variation settings", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontVariationSettings).toContain("'FILL' 0");
+      expect(el.style.fontVariationSettings).toContain("'wght' 200");
+      expect(el.style.fontVariationSettings).toContain("'GRAD' 145");
+      expect(el.style.fontVariationSettings).toContain("'opsz' 48");
+    });
+
+    it("sets fill when provided", () => {
+      render(<MaterialIcon name="star" fill={1} />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'FILL' 1");
+    });
+
+    it("sets custom weight", () => {
+      render(<MaterialIcon name="star" weight="400" />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'wght' 400");
+    });
+
+    it("sets custom optical size", () => {
+      render(<MaterialIcon name="star" opticalSize="24dp" />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'opsz' 24");
+    });
+
+    it("sets custom emphasis (GRAD)", () => {
+      render(<MaterialIcon name="star" emphasis={200} />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'GRAD' 200");
+    });
+  });
+
+  describe("Size", () => {
+    it("applies default font size of 24px", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontSize).toBe("24px");
+    });
+
+    it("applies custom size", () => {
+      render(<MaterialIcon name="home" size={48} />);
+      const el = screen.getByText("home");
+      expect(el.style.fontSize).toBe("48px");
+    });
+  });
+
+  describe("Color", () => {
+    it("uses currentColor by default", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.color).toBe("currentColor");
+    });
+
+    it("applies custom color", () => {
+      render(<MaterialIcon name="home" color="red" />);
+      const el = screen.getByText("home");
+      expect(el.style.color).toBe("red");
+    });
+  });
+
+  describe("Custom props", () => {
+    it("applies custom className", () => {
+      render(<MaterialIcon name="home" className="custom-icon" />);
+      const el = screen.getByText("home");
+      expect(el.className).toContain("custom-icon");
+    });
+
+    it("applies custom inline style", () => {
+      render(<MaterialIcon name="home" style={{ opacity: 0.5 }} />);
+      const el = screen.getByText("home");
+      expect(el.style.opacity).toBe("0.5");
+    });
+
+    it("applies data-testid", () => {
+      render(<MaterialIcon name="home" dataTestId="my-icon" />);
+      expect(screen.getByTestId("my-icon")).toBeInTheDocument();
+    });
+  });
+
+  describe("Event handling", () => {
+    it("calls onClick when clicked", () => {
+      const onClick = jest.fn();
+      render(<MaterialIcon name="home" onClick={onClick} />);
+      fireEvent.click(screen.getByText("home"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Font family", () => {
+    it("sets Material Symbols Rounded font family", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontFamily).toContain("Material Symbols Rounded");
+    });
+  });
+});

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

@@ -0,0 +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");
+    });
+  });
+});