@primitiv-ui/react 0.1.0

package/src/Accordion/__tests__/Accordion.asChild.test.tsx

@@ -0,0 +1,237 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion asChild tests", () => {
+  it("should render the child element instead of a <button> when asChild is true", () => {
+    // Arrange
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert — an anchor is rendered, not a button
+    const trigger = screen.getByRole("link", { name: "Section 1" });
+    expect(trigger.tagName).toBe("A");
+    expect(trigger).toHaveAttribute("href", "#section-1");
+  });
+
+  it("should merge ARIA attributes (aria-expanded, aria-controls, id) onto the child element when asChild is true", () => {
+    // Arrange
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    const trigger = screen.getByRole("link", { name: "Section 1" });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-controls");
+    expect(trigger).toHaveAttribute("id");
+  });
+
+  it("should compose child onClick with accordion toggle when asChild is true", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const childClick = vi.fn();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <button type="button" onClick={childClick}>
+                Section 1
+              </button>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content 1</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Section 1" });
+
+    // Act
+    await user.click(trigger);
+
+    // Assert — child handler fires and panel toggles
+    expect(childClick).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should forward ref to the child DOM element when asChild is true", () => {
+    // Arrange
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild ref={ref}>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("A");
+  });
+
+  it("should forward ref to the underlying button element when asChild is false", () => {
+    // Arrange
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger ref={ref}>Section 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("BUTTON");
+  });
+
+  it("should toggle the accordion when Enter is pressed on an asChild anchor element", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content 1</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("link", { name: "Section 1" });
+
+    // Act
+    trigger.focus();
+    await user.keyboard("[Enter]");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should toggle the accordion when Space is pressed on an asChild anchor element", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content 1</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("link", { name: "Section 1" });
+
+    // Act
+    trigger.focus();
+    await user.keyboard(" ");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should not toggle the accordion when Enter is pressed on a disabled asChild anchor element", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild disabled>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content 1</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    // disabled asChild gets role="button" injected, so query by button role
+    const trigger = screen.getByRole("button", { name: "Section 1" });
+
+    // Act
+    trigger.focus();
+    await user.keyboard("[Enter]");
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should apply role='button' when asChild is true and disabled is true", () => {
+    // Arrange
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild disabled>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert — role="button" injected so aria-disabled is semantically valid on a non-button
+    const trigger = screen.getByRole("button", { name: "Section 1" });
+    expect(trigger.tagName).toBe("A");
+    expect(trigger).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should NOT apply role='button' when asChild is true and disabled is false", () => {
+    // Arrange
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger asChild>
+              <a href="#section-1">Section 1</a>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    const trigger = screen.getByRole("link", { name: "Section 1" });
+
+    // Assert — no role="button" injected on enabled asChild elements
+    expect(trigger).not.toHaveAttribute("role", "button");
+  });
+});

package/src/Accordion/__tests__/Accordion.basic-rendering.test.tsx

@@ -0,0 +1,333 @@
+import { render, screen } from "@testing-library/react";
+
+import { Accordion } from "../Accordion";
+import { type HeadingLevel } from "../../types";
+
+describe("Accordion basic rendering tests", () => {
+  it('should apply the attribute data-orientation="vertical" to the accordion by default', () => {
+    // Arrange
+    render(<Accordion.Root data-testid="test-accordion" />);
+    const accordion = screen.getByTestId("test-accordion");
+
+    // Assert
+    expect(accordion).toHaveAttribute("data-orientation", "vertical");
+  });
+
+  it('should apply the attribute data-orientation="horizontal" to the accordion when orientation="horizontal" is provided', () => {
+    // Arrange
+    render(
+      <Accordion.Root
+        data-testid="test-accordion"
+        orientation="horizontal"
+      />,
+    );
+    const accordion = screen.getByTestId("test-accordion");
+
+    // Assert
+    expect(accordion).toHaveAttribute("data-orientation", "horizontal");
+  });
+
+  it("should NOT apply aria-orientation to the accordion root", () => {
+    // Arrange
+    render(
+      <Accordion.Root
+        data-testid="test-accordion"
+        orientation="horizontal"
+      />,
+    );
+    const accordion = screen.getByTestId("test-accordion");
+
+    // Assert
+    expect(accordion).not.toHaveAttribute("aria-orientation");
+  });
+
+  it('should apply the attribute aria-expanded="false" to the accordion item trigger by default', () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root data-testid="test-accordion">
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should give the accordion item trigger a unique id", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute(
+      "id",
+      expect.stringContaining("-heading-"),
+    );
+  });
+
+  it('should apply the correct "aria-controls" attribute to the accordion item trigger button', () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute(
+      "aria-controls",
+      expect.stringContaining("-panel-"),
+    );
+  });
+
+  it('should apply the aria-hidden="true" attribute to the accordion trigger icon wrapper', () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>
+              {title}
+              <Accordion.TriggerIcon>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5v14" />
+                </svg>
+              </Accordion.TriggerIcon>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+    const iconWrapper = accordionItemTrigger.querySelector("[aria-hidden='true']");
+
+    // Assert
+    expect(iconWrapper).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it('should apply aria-hidden="true" to the icon wrapper when the icon is a React component (not an inline DOM element)', () => {
+    // Arrange — simulates lucide-react, react-icons, or any custom icon component
+    const ComponentIcon = () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M5 12h14" />
+      </svg>
+    );
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>
+              {title}
+              <Accordion.TriggerIcon>
+                <ComponentIcon />
+              </Accordion.TriggerIcon>
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+    const iconWrapper = trigger.querySelector("[aria-hidden='true']");
+
+    // Assert
+    expect(iconWrapper).not.toBeNull();
+    expect(iconWrapper).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should give the accordion item content panel a unique id", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content);
+
+    // Assert
+    expect(accordionItemPanel).toHaveAttribute(
+      "id",
+      expect.stringContaining("-panel-"),
+    );
+  });
+
+  it('should apply the correct "aria-labelledby" attribute to the accordion item content panel', () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content);
+
+    // Assert
+    expect(accordionItemPanel).toHaveAttribute(
+      "aria-labelledby",
+      expect.stringContaining("-heading-"),
+    );
+  });
+
+  it('should apply the attribute role="region" to the accordion item content panel', () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content);
+
+    // Assert
+    expect(accordionItemPanel).toHaveAttribute("role", "region");
+  });
+
+  it("accordion item content panel should not be visible by default", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content);
+
+    // Assert
+    expect(accordionItemPanel).not.toBeVisible();
+  });
+
+  it("accordion item content panel should have a hidden attribute by default", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content);
+
+    // Assert
+    expect(accordionItemPanel).toHaveAttribute("hidden");
+  });
+
+  it("should render the accordion header as an h3 element by default", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+    const accordionHeader = accordionItemTrigger.parentElement;
+
+    // Assert
+    expect(accordionHeader?.tagName).toBe("H3");
+  });
+
+  it.each([
+    { level: 1 as HeadingLevel },
+    { level: 2 as HeadingLevel },
+    { level: 3 as HeadingLevel },
+    { level: 4 as HeadingLevel },
+    { level: 5 as HeadingLevel },
+    { level: 6 as HeadingLevel },
+  ])(
+    "should render the accordion header as an h$level element when level=$level is provided",
+    ({ level }) => {
+      // Arrange
+      const title = "Accordion Trigger 1";
+      render(
+        <Accordion.Root>
+          <Accordion.Item>
+            <Accordion.Header level={level}>
+              <Accordion.Trigger>{title}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Content</Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>,
+      );
+      const accordionItemTrigger = screen.getByRole("button", {
+        name: title,
+      });
+      const accordionHeader = accordionItemTrigger.parentElement;
+
+      // Assert
+      expect(accordionHeader?.tagName).toBe(`H${level}`);
+    },
+  );
+});