@windstream/react-shared-components 0.1.93 → 0.1.94

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

@@ -0,0 +1,270 @@
+import "@testing-library/jest-dom";
+
+import { Accordion } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/collapse", () => ({
+  Collapse: ({ open, children }: any) => (
+    <div data-testid="collapse" data-open={open}>
+      {open ? children : null}
+    </div>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" data-name={name} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Accordion", () => {
+  const defaultProps = {
+    title: "Accordion Title",
+    children: <p>Accordion content</p>,
+  };
+
+  it("renders without crashing", () => {
+    render(<Accordion {...defaultProps} />);
+    expect(screen.getByText("Accordion Title")).toBeInTheDocument();
+  });
+
+  it("has displayName set to Accordion", () => {
+    expect(Accordion.displayName).toBe("Accordion");
+  });
+
+  describe("initial state", () => {
+    it("starts closed by default", () => {
+      render(<Accordion {...defaultProps} />);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "false");
+    });
+
+    it("starts open when defaultOpen is true", () => {
+      render(<Accordion {...defaultProps} defaultOpen={true} />);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "true");
+    });
+
+    it("starts closed when defaultOpen is false", () => {
+      render(<Accordion {...defaultProps} defaultOpen={false} />);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "false");
+    });
+  });
+
+  describe("openOnlyOnDesktop", () => {
+    it("opens on desktop (width >= 1024)", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+      render(<Accordion {...defaultProps} openOnlyOnDesktop={true} />);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "true");
+    });
+
+    it("stays closed on mobile (width < 1024)", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 768,
+      });
+      render(<Accordion {...defaultProps} openOnlyOnDesktop={true} />);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "false");
+    });
+
+    it("ignores defaultOpen when openOnlyOnDesktop is true", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 500,
+      });
+      render(
+        <Accordion
+          {...defaultProps}
+          openOnlyOnDesktop={true}
+          defaultOpen={true}
+        />
+      );
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "false");
+    });
+  });
+
+  describe("toggle behavior", () => {
+    it("opens when button is clicked while closed", () => {
+      render(<Accordion {...defaultProps} />);
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "true");
+    });
+
+    it("closes when button is clicked while open", () => {
+      render(<Accordion {...defaultProps} defaultOpen={true} />);
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+      const collapse = screen.getByTestId("collapse");
+      expect(collapse).toHaveAttribute("data-open", "false");
+    });
+
+    it("toggles multiple times", () => {
+      render(<Accordion {...defaultProps} />);
+      const button = screen.getByRole("button");
+      const collapse = screen.getByTestId("collapse");
+
+      fireEvent.click(button);
+      expect(collapse).toHaveAttribute("data-open", "true");
+
+      fireEvent.click(button);
+      expect(collapse).toHaveAttribute("data-open", "false");
+
+      fireEvent.click(button);
+      expect(collapse).toHaveAttribute("data-open", "true");
+    });
+  });
+
+  describe("icon state", () => {
+    it("shows keyboard_arrow_down when closed", () => {
+      render(<Accordion {...defaultProps} />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "keyboard_arrow_down");
+    });
+
+    it("shows keyboard_arrow_up when open", () => {
+      render(<Accordion {...defaultProps} defaultOpen={true} />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "keyboard_arrow_up");
+    });
+
+    it("toggles icon when clicked", () => {
+      render(<Accordion {...defaultProps} />);
+      const button = screen.getByRole("button");
+      const icon = screen.getByTestId("material-icon");
+
+      expect(icon).toHaveAttribute("data-name", "keyboard_arrow_down");
+      fireEvent.click(button);
+      expect(icon).toHaveAttribute("data-name", "keyboard_arrow_up");
+    });
+  });
+
+  describe("children rendering", () => {
+    it("renders children when open", () => {
+      render(<Accordion {...defaultProps} defaultOpen={true} />);
+      expect(screen.getByText("Accordion content")).toBeInTheDocument();
+    });
+
+    it("does not render children when closed", () => {
+      render(<Accordion {...defaultProps} />);
+      expect(screen.queryByText("Accordion content")).not.toBeInTheDocument();
+    });
+
+    it("renders complex children", () => {
+      render(
+        <Accordion title="Test">
+          <div data-testid="child-1">Child 1</div>
+          <div data-testid="child-2">Child 2</div>
+        </Accordion>
+      );
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+      expect(screen.getByTestId("child-1")).toBeInTheDocument();
+      expect(screen.getByTestId("child-2")).toBeInTheDocument();
+    });
+  });
+
+  describe("className props", () => {
+    it("applies containerClassName to outer div", () => {
+      const { container } = render(
+        <Accordion {...defaultProps} containerClassName="custom-container" />
+      );
+      expect(container.firstChild).toHaveClass("custom-container");
+    });
+
+    it("applies titleClassName to title span", () => {
+      render(<Accordion {...defaultProps} titleClassName="custom-title" />);
+      const titleSpan = screen.getByText("Accordion Title");
+      expect(titleSpan).toHaveClass("custom-title");
+    });
+
+    it("applies buttonClassName to button", () => {
+      render(<Accordion {...defaultProps} buttonClassName="custom-button" />);
+      const button = screen.getByRole("button");
+      expect(button.className).toContain("custom-button");
+    });
+
+    it("applies iconClassName to material icon", () => {
+      render(<Accordion {...defaultProps} iconClassName="custom-icon" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveClass("custom-icon");
+    });
+
+    it("applies className to content div when open", () => {
+      render(
+        <Accordion
+          {...defaultProps}
+          defaultOpen={true}
+          className="custom-content"
+        />
+      );
+      const contentDiv = screen.getByText("Accordion content").parentElement;
+      expect(contentDiv).toHaveClass("custom-content");
+    });
+  });
+
+  describe("borderRadiusNone", () => {
+    it("applies rounded-none when borderRadiusNone is true", () => {
+      const { container } = render(
+        <Accordion {...defaultProps} borderRadiusNone={true} />
+      );
+      expect(container.firstChild).toHaveClass("rounded-none");
+    });
+
+    it("applies rounded-surface-xs when borderRadiusNone is false", () => {
+      const { container } = render(
+        <Accordion {...defaultProps} borderRadiusNone={false} />
+      );
+      expect(container.firstChild).toHaveClass("rounded-surface-xs");
+    });
+
+    it("applies rounded-surface-xs by default", () => {
+      const { container } = render(<Accordion {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("rounded-surface-xs");
+    });
+
+    it("applies rounded-none to button when borderRadiusNone is true", () => {
+      render(<Accordion {...defaultProps} borderRadiusNone={true} />);
+      const button = screen.getByRole("button");
+      expect(button.className).toContain("rounded-none");
+    });
+
+    it("applies rounded-t-surface-xs to button when borderRadiusNone is false", () => {
+      render(<Accordion {...defaultProps} borderRadiusNone={false} />);
+      const button = screen.getByRole("button");
+      expect(button.className).toContain("rounded-t-surface-xs");
+    });
+  });
+
+  describe("button attributes", () => {
+    it("renders button with type button", () => {
+      render(<Accordion {...defaultProps} />);
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "button");
+    });
+  });
+});

package/src/components/accordion/index.tsx

@@ -1,70 +1,70 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { AccordionProps } from "@shared/components/accordion/types";
-import { Button } from "@shared/components/button";
-import { Collapse } from "@shared/components/collapse";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { cx } from "@shared/utils";
-
-export const Accordion: React.FC<AccordionProps> = props => {
-  const {
-    title,
-    defaultOpen,
-    children,
-    containerClassName,
-    titleClassName,
-    className,
-    buttonClassName,
-    iconClassName,
-    openOnlyOnDesktop,
-    borderRadiusNone = false,
-  } = props;
-  const [open, setOpen] = useState<boolean>(Boolean(false));
-
-  useEffect(() => {
-    // Only execute responsive logic if the prop is true
-    if (openOnlyOnDesktop) {
-      const isDesktop = window.innerWidth >= 1024;
-      setOpen(isDesktop);
-    } else {
-      // Otherwise, fall back to standard defaultOpen behavior
-      setOpen(Boolean(defaultOpen));
-    }
-  }, [openOnlyOnDesktop, defaultOpen]);
-
-  return (
-    <div
-      className={cx(
-        borderRadiusNone ? "rounded-none border" : "rounded-surface-xs border",
-        containerClassName
-      )}
-    >
-      <Button
-        type="button"
-        className={cx(
-          borderRadiusNone ? "rounded-none" : "rounded-t-surface-xs",
-          "flex w-full items-center justify-between gap-4 px-4 py-3 text-left",
-          buttonClassName
-        )}
-        onClick={() => setOpen(v => !v)}
-      >
-        <span className={cx("label5 flex-1", titleClassName)}>{title}</span>
-        <MaterialIcon
-          className={cx("flex-shrink-0", iconClassName)}
-          name={open ? "keyboard_arrow_up" : "keyboard_arrow_down"}
-          fill={1}
-          size={24}
-        />
-      </Button>
-      <Collapse open={open}>
-        <div className={cx("px-4 py-4", className)}>{children}</div>
-      </Collapse>
-    </div>
-  );
-};
-
-Accordion.displayName = "Accordion";
-
-export type { AccordionProps };
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { AccordionProps } from "@shared/components/accordion/types";
+import { Button } from "@shared/components/button";
+import { Collapse } from "@shared/components/collapse";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { cx } from "@shared/utils";
+
+export const Accordion: React.FC<AccordionProps> = props => {
+  const {
+    title,
+    defaultOpen,
+    children,
+    containerClassName,
+    titleClassName,
+    className,
+    buttonClassName,
+    iconClassName,
+    openOnlyOnDesktop,
+    borderRadiusNone = false,
+  } = props;
+  const [open, setOpen] = useState<boolean>(Boolean(false));
+
+  useEffect(() => {
+    // Only execute responsive logic if the prop is true
+    if (openOnlyOnDesktop) {
+      const isDesktop = window.innerWidth >= 1024;
+      setOpen(isDesktop);
+    } else {
+      // Otherwise, fall back to standard defaultOpen behavior
+      setOpen(Boolean(defaultOpen));
+    }
+  }, [openOnlyOnDesktop, defaultOpen]);
+
+  return (
+    <div
+      className={cx(
+        borderRadiusNone ? "rounded-none border" : "rounded-surface-xs border",
+        containerClassName
+      )}
+    >
+      <Button
+        type="button"
+        className={cx(
+          borderRadiusNone ? "rounded-none" : "rounded-t-surface-xs",
+          "flex w-full items-center justify-between gap-4 px-4 py-3 text-left",
+          buttonClassName
+        )}
+        onClick={() => setOpen(v => !v)}
+      >
+        <span className={cx("label5 flex-1", titleClassName)}>{title}</span>
+        <MaterialIcon
+          className={cx("flex-shrink-0", iconClassName)}
+          name={open ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          fill={1}
+          size={24}
+        />
+      </Button>
+      <Collapse open={open}>
+        <div className={cx("px-4 py-4", className)}>{children}</div>
+      </Collapse>
+    </div>
+  );
+};
+
+Accordion.displayName = "Accordion";
+
+export type { AccordionProps };

package/src/components/accordion/types.ts

@@ -1,12 +1,12 @@
-export type AccordionProps = {
-  title: string;
-  defaultOpen?: boolean;
-  openOnlyOnDesktop?: boolean;
-  containerClassName?: string;
-  children: React.ReactNode;
-  titleClassName?: string;
-  className?: string;
-  buttonClassName?: string;
-  iconClassName?: string;
-  borderRadiusNone?: boolean;
-};
+export type AccordionProps = {
+  title: string;
+  defaultOpen?: boolean;
+  openOnlyOnDesktop?: boolean;
+  containerClassName?: string;
+  children: React.ReactNode;
+  titleClassName?: string;
+  className?: string;
+  buttonClassName?: string;
+  iconClassName?: string;
+  borderRadiusNone?: boolean;
+};