@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,277 @@
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { Collapse } from "./index";
+
+import { act, render, screen } from "@testing-library/react";
+
+describe("Collapse", () => {
+  let resizeCallback: (() => void) | null = null;
+
+  beforeEach(() => {
+    resizeCallback = null;
+    // Mock scrollHeight since jsdom doesn't compute layout
+    Object.defineProperty(HTMLDivElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return 200;
+      },
+    });
+
+    // Mock ResizeObserver to capture the callback
+    global.ResizeObserver = jest.fn().mockImplementation(callback => ({
+      observe: jest.fn(() => {
+        resizeCallback = callback;
+      }),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  describe("rendering", () => {
+    it("renders children content", () => {
+      render(
+        <Collapse open={true}>
+          <p>Collapsed Content</p>
+        </Collapse>
+      );
+      expect(screen.getByText("Collapsed Content")).toBeInTheDocument();
+    });
+
+    it("renders children even when closed", () => {
+      render(
+        <Collapse open={false}>
+          <p>Hidden Content</p>
+        </Collapse>
+      );
+      // Content is in DOM but visually hidden via maxHeight/opacity
+      expect(screen.getByText("Hidden Content")).toBeInTheDocument();
+    });
+
+    it("applies displayName correctly", () => {
+      expect(Collapse.displayName).toBe("Collapse");
+    });
+  });
+
+  describe("open state", () => {
+    it("sets maxHeight to scrollHeight when open", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("200px");
+    });
+
+    it("sets maxHeight to 0 when closed", () => {
+      const { container } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("0");
+    });
+
+    it("sets opacity to 1 when open", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.opacity).toBe("1");
+    });
+
+    it("sets opacity to 0 when closed", () => {
+      const { container } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.opacity).toBe("0");
+    });
+  });
+
+  describe("accessibility", () => {
+    it("sets aria-hidden to false when open", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveAttribute("aria-hidden", "false");
+    });
+
+    it("sets aria-hidden to true when closed", () => {
+      const { container } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveAttribute("aria-hidden", "true");
+    });
+  });
+
+  describe("transition classes", () => {
+    it("applies transition classes to the outer wrapper", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass("overflow-hidden");
+      expect(wrapper).toHaveClass("transition-all");
+      expect(wrapper).toHaveClass("duration-300");
+      expect(wrapper).toHaveClass("ease-in-out");
+    });
+  });
+
+  describe("toggling open/closed", () => {
+    it("updates maxHeight when open prop changes to true", () => {
+      const { container, rerender } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("0");
+
+      rerender(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      expect(wrapper.style.maxHeight).toBe("200px");
+    });
+
+    it("updates maxHeight when open prop changes to false", () => {
+      const { container, rerender } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("200px");
+
+      rerender(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      expect(wrapper.style.maxHeight).toBe("0");
+    });
+
+    it("updates opacity when toggling", () => {
+      const { container, rerender } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.opacity).toBe("0");
+
+      rerender(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      expect(wrapper.style.opacity).toBe("1");
+    });
+  });
+
+  describe("ResizeObserver", () => {
+    it("creates ResizeObserver when open", () => {
+      render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      expect(global.ResizeObserver).toHaveBeenCalled();
+    });
+
+    it("does not create ResizeObserver when closed", () => {
+      render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      // ResizeObserver constructor is called but observe is not invoked
+      // when closed, no observer is created
+      const instances = (global.ResizeObserver as jest.Mock).mock.results;
+      if (instances.length > 0) {
+        const observeMock = instances[0].value.observe;
+        expect(observeMock).not.toHaveBeenCalled();
+      }
+    });
+
+    it("disconnects ResizeObserver on unmount", () => {
+      const { unmount } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const instances = (global.ResizeObserver as jest.Mock).mock.results;
+      const disconnectMock = instances[instances.length - 1].value.disconnect;
+      unmount();
+      expect(disconnectMock).toHaveBeenCalled();
+    });
+
+    it("invokes updateHeight via ResizeObserver callback", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+
+      // Change scrollHeight to simulate resize
+      Object.defineProperty(HTMLDivElement.prototype, "scrollHeight", {
+        configurable: true,
+        get() {
+          return 500;
+        },
+      });
+
+      // Trigger the ResizeObserver callback within act
+      act(() => {
+        if (resizeCallback) {
+          resizeCallback();
+        }
+      });
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("500px");
+    });
+  });
+
+  describe("dynamic children", () => {
+    it("re-evaluates height when children change", () => {
+      const { rerender, container } = render(
+        <Collapse open={true}>
+          <p>Short</p>
+        </Collapse>
+      );
+
+      Object.defineProperty(HTMLDivElement.prototype, "scrollHeight", {
+        configurable: true,
+        get() {
+          return 400;
+        },
+      });
+
+      rerender(
+        <Collapse open={true}>
+          <p>Short</p>
+          <p>More content that makes it taller</p>
+        </Collapse>
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.style.maxHeight).toBe("400px");
+    });
+  });
+});

package/src/components/collapse/index.tsx

@@ -11,6 +11,7 @@ export const Collapse = (props: CollapsibleProps) => {
 
   useEffect(() => {
     const el = contentRef.current;
+    /* istanbul ignore next -- defensive guard for ref not yet attached */
     if (!el) return;
 
     const updateHeight = () => {

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Divider } from "./index";
+
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("Divider", () => {
+  it("renders a div element", () => {
+    const { container } = render(<Divider />);
+    expect(container.firstChild).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("has correct displayName", () => {
+    expect(Divider.displayName).toBe("Divider");
+  });
+
+  it("applies default classes", () => {
+    const { container } = render(<Divider />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toContain("h-[1px]");
+    expect(el.className).toContain("border-t-0");
+    expect(el.className).toContain("bg-bg-surface-tertiary-active");
+    expect(el.className).toContain("opacity-100");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<Divider className="my-custom-class" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toContain("my-custom-class");
+  });
+
+  it("passes through additional HTML attributes", () => {
+    const { container } = render(
+      <Divider data-testid="divider" id="my-divider" />
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute("data-testid", "divider");
+    expect(el).toHaveAttribute("id", "my-divider");
+  });
+
+  it("renders without className", () => {
+    const { container } = render(<Divider />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toBeInTheDocument();
+  });
+
+  it("supports role attribute", () => {
+    const { container } = render(<Divider role="separator" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute("role", "separator");
+  });
+});

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

@@ -0,0 +1,174 @@
+import "@testing-library/jest-dom";
+
+import React, { createRef, forwardRef } from "react";
+import { Image } from "./index";
+import { ImageComponentProps } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock cx
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Image", () => {
+  it("has displayName set to Image", () => {
+    expect(Image.displayName).toBe("Image");
+  });
+
+  describe("native img rendering", () => {
+    it("renders a native img element by default", () => {
+      render(<Image src="/test.png" alt="Test image" />);
+      const img = screen.getByAltText("Test image");
+      expect(img.tagName).toBe("IMG");
+    });
+
+    it("passes src prop to img", () => {
+      render(<Image src="/photo.jpg" alt="Photo" />);
+      const img = screen.getByAltText("Photo");
+      expect(img).toHaveAttribute("src", "/photo.jpg");
+    });
+
+    it("passes alt prop to img", () => {
+      render(<Image src="/img.png" alt="My image" />);
+      const img = screen.getByAltText("My image");
+      expect(img).toBeInTheDocument();
+    });
+
+    it("passes className to img", () => {
+      render(<Image src="/img.png" alt="Img" className="h-auto w-full" />);
+      const img = screen.getByAltText("Img");
+      expect(img).toHaveClass("w-full");
+      expect(img).toHaveClass("h-auto");
+    });
+
+    it("uses empty string className by default", () => {
+      render(<Image src="/img.png" alt="Img" />);
+      const img = screen.getByAltText("Img");
+      expect(img).toBeInTheDocument();
+    });
+
+    it("passes additional HTML img attributes", () => {
+      render(
+        <Image
+          src="/img.png"
+          alt="Img"
+          width={200}
+          height={100}
+          loading="lazy"
+        />
+      );
+      const img = screen.getByAltText("Img");
+      expect(img).toHaveAttribute("width", "200");
+      expect(img).toHaveAttribute("height", "100");
+      expect(img).toHaveAttribute("loading", "lazy");
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("forwards ref to native img element", () => {
+      const ref = createRef<HTMLImageElement>();
+      render(<Image ref={ref} src="/img.png" alt="Ref test" />);
+      expect(ref.current).toBeInstanceOf(HTMLImageElement);
+      expect(ref.current?.tagName).toBe("IMG");
+    });
+
+    it("forwards ref to custom component", () => {
+      const ref = createRef<HTMLImageElement>();
+      const CustomImage = forwardRef<HTMLImageElement, ImageComponentProps>(
+        function CustomImage(props, fwdRef) {
+          return <img ref={fwdRef} data-testid="custom-img" {...props} />;
+        }
+      );
+      render(
+        <Image ref={ref} as={CustomImage} src="/img.png" alt="Custom ref" />
+      );
+      expect(ref.current).toBeInstanceOf(HTMLImageElement);
+    });
+  });
+
+  describe("polymorphic rendering with 'as' prop", () => {
+    it("renders custom component when 'as' is provided", () => {
+      const CustomImage = (props: any) => (
+        <div data-testid="custom-image" data-src={props.src}>
+          {props.alt}
+        </div>
+      );
+      render(<Image as={CustomImage} src="/custom.png" alt="Custom" />);
+      expect(screen.getByTestId("custom-image")).toBeInTheDocument();
+      expect(screen.getByTestId("custom-image")).toHaveAttribute(
+        "data-src",
+        "/custom.png"
+      );
+    });
+
+    it("passes className to custom component", () => {
+      const CustomImage = ({ className, ...props }: any) => (
+        <img data-testid="custom-img" className={className} {...props} />
+      );
+      render(
+        <Image as={CustomImage} src="/img.png" alt="Cls" className="rounded" />
+      );
+      const img = screen.getByTestId("custom-img");
+      expect(img).toHaveClass("rounded");
+    });
+
+    it("passes all props to custom component", () => {
+      const CustomImage = (props: any) => (
+        <img
+          data-testid="custom-img"
+          data-fill={props.fill?.toString()}
+          data-priority={props.priority?.toString()}
+          src={props.src}
+          alt={props.alt}
+        />
+      );
+      render(
+        <Image
+          as={CustomImage}
+          src="/img.png"
+          alt="Props test"
+          fill={true}
+          priority={true}
+        />
+      );
+      const img = screen.getByTestId("custom-img");
+      expect(img).toHaveAttribute("data-fill", "true");
+      expect(img).toHaveAttribute("data-priority", "true");
+    });
+
+    it("does not render native img when as prop is provided", () => {
+      const CustomImage = (props: any) => (
+        <div data-testid="custom-wrapper">{props.alt}</div>
+      );
+      render(<Image as={CustomImage} src="/img.png" alt="No native" />);
+      expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
+
+    it("renders forwardRef component via as prop", () => {
+      const ForwardRefImage = forwardRef<HTMLImageElement, ImageComponentProps>(
+        function ForwardRefImage(props, fwdRef) {
+          return <img ref={fwdRef} data-testid="fwdref-img" {...props} />;
+        }
+      );
+      render(
+        <Image as={ForwardRefImage} src="/img.png" alt="ForwardRef test" />
+      );
+      expect(screen.getByTestId("fwdref-img")).toBeInTheDocument();
+    });
+  });
+
+  describe("edge cases", () => {
+    it("renders with empty alt for decorative images", () => {
+      const { container } = render(<Image src="/decorative.png" alt="" />);
+      const img = container.querySelector("img");
+      expect(img).toHaveAttribute("alt", "");
+    });
+
+    it("renders with no className (defaults to empty string)", () => {
+      const { container } = render(<Image src="/img.png" alt="No class" />);
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+});