@primitiv-ui/react 0.1.0

package/src/ContextMenu/__tests__/ContextMenu.mouse-interaction.test.tsx

@@ -0,0 +1,227 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu mouse interaction", () => {
+  it("opens the menu and reports onOpenChange(true) when the Trigger receives a contextmenu event", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const trigger = screen.getByText("Area");
+
+    // Act
+    fireEvent.contextMenu(trigger, { clientX: 40, clientY: 80 });
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("suppresses the native browser menu by calling preventDefault on the contextmenu event", () => {
+    // Arrange
+    render(
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const trigger = screen.getByText("Area");
+
+    // Act — fireEvent returns false when the dispatched event was default-prevented.
+    const result = fireEvent.contextMenu(trigger, { clientX: 0, clientY: 0 });
+
+    // Assert
+    expect(result).toBe(false);
+  });
+
+  it("positions Content via fixed coordinates matching the cursor", () => {
+    // Arrange
+    render(
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const trigger = screen.getByText("Area");
+
+    // Act
+    fireEvent.contextMenu(trigger, { clientX: 123, clientY: 456 });
+
+    // Assert
+    const menu = screen.getByRole("menu", { hidden: true });
+    expect(menu).toHaveStyle({
+      position: "fixed",
+      left: "123px",
+      top: "456px",
+    });
+  });
+
+  it("does not open and does not call onOpenChange when the Trigger is disabled", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu.Root onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger disabled>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const trigger = screen.getByText("Area");
+
+    // Act
+    fireEvent.contextMenu(trigger, { clientX: 10, clientY: 10 });
+
+    // Assert
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("adds data-highlighted to an Item when the pointer enters it", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    await user.hover(item);
+
+    // Assert
+    expect(item).toHaveAttribute("data-highlighted");
+  });
+
+  it("removes data-highlighted from an Item when the pointer leaves", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    await user.hover(item);
+    await user.unhover(item);
+
+    // Assert
+    expect(item).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("closes the menu when the user clicks outside both the trigger and the content", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <div>
+        <ContextMenu.Root defaultOpen onOpenChange={onOpenChange}>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Item>Rename</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+        <button type="button">Outside</button>
+      </div>,
+    );
+
+    // Act
+    await user.click(screen.getByText("Outside"));
+
+    // Assert
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("closes an open sub-menu when the pointer moves onto a sibling item in the parent menu", async () => {
+    // Mirrors the keyboard contract: focus returning to the parent menu
+    // dismisses the sub. With the mouse, moving off the sub-trigger and onto
+    // another item in the same parent menu must likewise close the sub.
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>New</ContextMenu.Item>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Email</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+    const sibling = screen.getByRole("menuitem", {
+      name: "New",
+      hidden: true,
+    });
+
+    // Act — hover sub-trigger to open it, then move onto the sibling
+    await user.hover(subTrigger);
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.hover(sibling);
+
+    // Assert — sub has closed and its trigger is no longer highlighted
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+    expect(subTrigger).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("supplants an open sibling sub when the pointer hovers a second SubTrigger", async () => {
+    // Two sibling subs. Hovering A opens A; hovering B must close A and open B.
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Email</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Move to</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Trash</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const a = screen.getByRole("menuitem", { name: "Share", hidden: true });
+    const b = screen.getByRole("menuitem", { name: "Move to", hidden: true });
+
+    // Act
+    await user.hover(a);
+    expect(a).toHaveAttribute("aria-expanded", "true");
+    await user.hover(b);
+
+    // Assert
+    expect(a).toHaveAttribute("aria-expanded", "false");
+    expect(b).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.radio-item.test.tsx

@@ -0,0 +1,127 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.RadioGroup + ContextMenu.RadioItem", () => {
+  it("renders RadioItem as role=menuitemradio with aria-checked", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.RadioGroup defaultValue="light">
+            <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
+            <ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
+          </ContextMenu.RadioGroup>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    expect(
+      screen.getByRole("menuitemradio", { name: "Light", hidden: true }),
+    ).toHaveAttribute("aria-checked", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Dark", hidden: true }),
+    ).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("selects a RadioItem on click and updates the group value (uncontrolled)", () => {
+    // Arrange
+    const onValueChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.RadioGroup onValueChange={onValueChange}>
+            <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
+            <ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
+          </ContextMenu.RadioGroup>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    fireEvent.click(
+      screen.getByRole("menuitemradio", { name: "Dark", hidden: true }),
+    );
+
+    // Assert
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith("dark");
+  });
+
+  it("defers the active value to the consumer in controlled mode", () => {
+    // Arrange
+    function Controlled() {
+      const [value, setValue] = useState("light");
+      return (
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.RadioGroup value={value} onValueChange={setValue}>
+              <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
+              <ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
+            </ContextMenu.RadioGroup>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      );
+    }
+    render(<Controlled />);
+    fireEvent.click(
+      screen.getByRole("menuitemradio", { name: "Dark", hidden: true }),
+    );
+
+    // Assert
+    expect(
+      screen.getByRole("menuitemradio", { name: "Dark", hidden: true }),
+    ).toHaveAttribute("aria-checked", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Light", hidden: true }),
+    ).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("throws when RadioItem is rendered outside a RadioGroup", () => {
+    // Arrange — suppress the React error boundary noise for the expected throw
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    // Act + Assert
+    expect(() =>
+      render(
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
+          </ContextMenu.Content>
+        </ContextMenu.Root>,
+      ),
+    ).toThrow(/RadioItem must be rendered inside/);
+
+    spy.mockRestore();
+  });
+
+  it("no-ops when disabled", () => {
+    // Arrange
+    const onValueChange = vi.fn();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.RadioGroup onValueChange={onValueChange}>
+            <ContextMenu.RadioItem value="light" disabled>
+              Light
+            </ContextMenu.RadioItem>
+          </ContextMenu.RadioGroup>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    fireEvent.click(
+      screen.getByRole("menuitemradio", { name: "Light", hidden: true }),
+    );
+
+    // Assert
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.reading-direction.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider";
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu reading direction", () => {
+  it("opens a sub-menu on ArrowLeft when dir=rtl", async () => {
+    // Arrange — in RTL the inline-forward arrow is ArrowLeft.
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen dir="rtl">
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Email</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("does not open the sub-menu on ArrowRight when dir=rtl", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen dir="rtl">
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Email</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("closes the sub-menu on ArrowRight when dir=rtl", async () => {
+    // Arrange — focus auto-lands inside the open sub-content.
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen dir="rtl">
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Sub defaultOpen>
+            <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <ContextMenu.Item>Email</ContextMenu.Item>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+    expect(subTrigger).toHaveFocus();
+  });
+
+  it("inherits dir=rtl from a DirectionProvider when no dir prop is passed on Root", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <ContextMenu.Root defaultOpen>
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Sub>
+              <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+              <ContextMenu.SubContent>
+                <ContextMenu.Item>Email</ContextMenu.Item>
+              </ContextMenu.SubContent>
+            </ContextMenu.Sub>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      </DirectionProvider>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("lets an explicit dir prop on Root override the inherited DirectionProvider value", async () => {
+    // Arrange — provider says ltr but Root says rtl; rtl wins.
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="ltr">
+        <ContextMenu.Root defaultOpen dir="rtl">
+          <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Sub>
+              <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+              <ContextMenu.SubContent>
+                <ContextMenu.Item>Email</ContextMenu.Item>
+              </ContextMenu.SubContent>
+            </ContextMenu.Sub>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      </DirectionProvider>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.separator.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu.Separator", () => {
+  it("renders as <li role=separator>", () => {
+    // Arrange & Act
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item>Delete</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Assert
+    const separator = screen.getByRole("separator", { hidden: true });
+    expect(separator.tagName).toBe("LI");
+  });
+
+  it("is skipped by arrow-key navigation", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <ContextMenu.Root defaultOpen>
+        <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item>Delete</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>,
+    );
+
+    // Act
+    await user.keyboard("{ArrowDown}");
+
+    // Assert — focus skips the separator entirely
+    expect(
+      screen.getByRole("menuitem", { name: "Delete", hidden: true }),
+    ).toHaveFocus();
+  });
+});

package/src/ContextMenu/__tests__/ContextMenu.state-modes.test.tsx

@@ -0,0 +1,119 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+
+import { ContextMenu } from "../ContextMenu";
+
+describe("ContextMenu state modes", () => {
+  it("honours controlled open prop and defers to onOpenChange callback", () => {
+    // Arrange
+    function Controlled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => setOpen(true)}
+            data-testid="external"
+          >
+            Open
+          </button>
+          <ContextMenu.Root open={open} onOpenChange={setOpen}>
+            <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+            <ContextMenu.Content>
+              <ContextMenu.Item>Rename</ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Root>
+        </>
+      );
+    }
+    render(<Controlled />);
+    const menu = screen.getByRole("menu", { hidden: true });
+    expect(menu).toHaveAttribute("data-state", "closed");
+
+    // Act — flip external state, no user gesture on the trigger
+    fireEvent.click(screen.getByTestId("external"));
+
+    // Assert — menu opened solely because the parent passed open=true
+    expect(menu).toHaveAttribute("data-state", "open");
+  });
+
+  it("does not call onOpenChange when the consumer flips controlled open externally", () => {
+    // Arrange
+    const onOpenChange = vi.fn();
+    function Controlled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(true);
+              onOpenChange.mockClear();
+            }}
+            data-testid="external"
+          >
+            Open
+          </button>
+          <ContextMenu.Root open={open} onOpenChange={onOpenChange}>
+            <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+            <ContextMenu.Content>
+              <ContextMenu.Item>Rename</ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Root>
+        </>
+      );
+    }
+    render(<Controlled />);
+
+    // Act
+    fireEvent.click(screen.getByTestId("external"));
+
+    // Assert — onOpenChange must only fire for user-driven transitions
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("honours controlled open prop on ContextMenu.Sub", () => {
+    // Arrange — the external button lives outside any open menu, so we keep
+    // Root closed during the flip; otherwise Content's outside-click handler
+    // would fire on the same gesture and cascade-close the sub. The
+    // assertion is on Sub.open's reflection in aria-expanded, which is
+    // independent of Root's open state.
+    function Controlled() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => setOpen(true)}
+            data-testid="external"
+          >
+            Open sub
+          </button>
+          <ContextMenu.Root>
+            <ContextMenu.Trigger>Area</ContextMenu.Trigger>
+            <ContextMenu.Content>
+              <ContextMenu.Sub open={open} onOpenChange={setOpen}>
+                <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
+                <ContextMenu.SubContent>
+                  <ContextMenu.Item>Nested</ContextMenu.Item>
+                </ContextMenu.SubContent>
+              </ContextMenu.Sub>
+            </ContextMenu.Content>
+          </ContextMenu.Root>
+        </>
+      );
+    }
+    render(<Controlled />);
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "More",
+      hidden: true,
+    });
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+
+    // Act
+    fireEvent.click(screen.getByTestId("external"));
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+});