PettyUI/packages/core/tests/components/drawer/drawer.test.tsx

import { fireEvent, render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { Drawer } from "../../../src/components/drawer/index";

describe("Drawer", () => {
  it("closed by default", () => {
    render(() => (
      <Drawer>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    expect(screen.queryByRole("dialog")).toBeNull();
  });

  it("opens with defaultOpen=true", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    expect(screen.getByRole("dialog")).toBeTruthy();
  });

  it("trigger click opens drawer", () => {
    render(() => (
      <Drawer>
        <Drawer.Trigger>Open</Drawer.Trigger>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    fireEvent.click(screen.getByText("Open"));
    expect(screen.getByRole("dialog")).toBeTruthy();
  });

  it("Close button closes drawer", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer>
    ));
    fireEvent.click(screen.getByText("Close"));
    expect(screen.queryByRole("dialog")).toBeNull();
  });

  it("Escape key closes drawer", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    fireEvent.keyDown(document, { key: "Escape" });
    expect(screen.queryByRole("dialog")).toBeNull();
  });

  it("content has role=dialog and aria-modal", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    const dialog = screen.getByRole("dialog");
    expect(dialog.getAttribute("aria-modal")).toBe("true");
  });

  it("data-side defaults to right", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content data-testid="content">
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    expect(screen.getByTestId("content").getAttribute("data-side")).toBe("right");
  });

  it("data-side reflects side prop", () => {
    render(() => (
      <Drawer defaultOpen side="left">
        <Drawer.Content data-testid="content">
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    expect(screen.getByTestId("content").getAttribute("data-side")).toBe("left");
  });

  it("title linked via aria-labelledby", () => {
    render(() => (
      <Drawer defaultOpen>
        <Drawer.Content>
          <Drawer.Title>My Drawer</Drawer.Title>
        </Drawer.Content>
      </Drawer>
    ));
    const dialog = screen.getByRole("dialog");
    const title = screen.getByText("My Drawer");
    expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
  });
});