@exegia/corpora-ui 2.0.0 → 3.1.0

package/src/components/composed/tree/__tests__/tree.test.tsx

@@ -1,522 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { FileTextIcon, FolderIcon, SearchIcon } from "lucide-react"
-
-import { Tree } from "../index"
-import type { ITreeNode } from "../type"
-import { moveNode } from "../utils"
-
-/** 3-level data — `navigation` promotes the top level to section names. */
-const SECTIONED: ITreeNode[] = [
-  {
-    id: "research",
-    label: "Research",
-    children: [
-      { id: "search", label: "Search", icon: <SearchIcon />, href: "/search" },
-      {
-        id: "library",
-        label: "Library",
-        children: [
-          { id: "manuscripts", label: "Manuscripts", href: "/m" },
-          { id: "codices", label: "Codices", href: "/c" },
-        ],
-      },
-    ],
-  },
-  {
-    id: "workspace",
-    label: "Workspace",
-    children: [{ id: "notes", label: "Notes", href: "/notes" }],
-  },
-]
-
-/** 2-level data — the top level stays plain link rows. */
-const FLAT_NAV: ITreeNode[] = [
-  { id: "search", label: "Search", href: "/search" },
-  {
-    id: "library",
-    label: "Library",
-    children: [{ id: "manuscripts", label: "Manuscripts", href: "/m" }],
-  },
-]
-
-const TOC: ITreeNode[] = [
-  {
-    id: "guide",
-    label: "Guide",
-    href: "/guide",
-    children: [
-      {
-        id: "setup",
-        label: "Setup",
-        children: [{ id: "install", label: "Install" }],
-      },
-    ],
-  },
-  { id: "api", label: "API", href: "/api" },
-]
-
-const RAIL: ITreeNode[] = [
-  { id: "search", label: "Search", icon: <SearchIcon />, href: "/search" },
-  { id: "notes", label: "Notes", icon: <FileTextIcon />, href: "/notes" },
-]
-
-const FILES: ITreeNode[] = [
-  {
-    id: "src",
-    label: "src",
-    icon: <FolderIcon />,
-    defaultOpen: true,
-    children: [
-      { id: "index-ts", label: "index.ts" },
-      { id: "utils-ts", label: "utils.ts" },
-    ],
-  },
-  { id: "readme", label: "README.md" },
-]
-
-/** Branch exits run through AnimatePresence — let them settle on real
- * timers, then query once (happy-dom serves stale waitFor queries while
- * an exit is in flight). Wrapped in act so the presence teardown that lands
- * during the wait is a tracked React update, not an "outside act" warning. */
-const settleExit = () =>
-  act(() => new Promise<void>((resolve) => setTimeout(resolve, 400)))
-
-describe("Tree · navigation", () => {
-  test("3-level data renders top level as collapsible sections above button rows", async () => {
-    const user = userEvent.setup()
-    render(<Tree items={SECTIONED} variant="navigation" />)
-
-    const section = screen.getByRole("button", { name: "Research" })
-    expect(section.getAttribute("aria-expanded")).toBe("true")
-    // Sections are plain heading buttons; item rows are the shared Button.
-    // Neither is an anchor — `href` is metadata for onNavigate now.
-    expect(document.querySelector("a")).toBeNull()
-    const search = screen.getByRole("button", { name: "Search" })
-    expect(search.getAttribute("data-slot")).toBe("tree-row")
-    expect(search.getAttribute("type")).toBe("button")
-
-    // Collapsing the section folds its items away.
-    await user.click(section)
-    await settleExit()
-    expect(screen.queryByRole("button", { name: "Search" })).toBeNull()
-  })
-
-  test("2-level data keeps top level as leaf rows and parents as toggles", async () => {
-    const user = userEvent.setup()
-    render(<Tree items={FLAT_NAV} variant="navigation" />)
-
-    // A leaf row carries no aria-expanded; a parent row does.
-    const search = screen.getByRole("button", { name: "Search" })
-    expect(search.getAttribute("aria-expanded")).toBeNull()
-    const parent = screen.getByRole("button", { name: "Library" })
-    expect(parent.getAttribute("aria-expanded")).toBe("false")
-
-    await user.click(parent)
-    expect(
-      await screen.findByRole("button", { name: "Manuscripts" })
-    ).toBeDefined()
-  })
-
-  test("read-only variants render no drag or rename affordances", () => {
-    render(<Tree items={SECTIONED} variant="navigation" />)
-    const rows = document.querySelectorAll('[data-slot="tree-row"]')
-    expect(rows.length).toBeGreaterThan(0)
-    for (const row of rows) expect(row.getAttribute("draggable")).toBeNull()
-  })
-
-  test("activeId marks the row current and expands collapsed ancestors", async () => {
-    const { rerender } = render(
-      <Tree items={SECTIONED} variant="navigation" />
-    )
-    // Library starts collapsed — its children are absent.
-    expect(screen.queryByRole("button", { name: "Codices" })).toBeNull()
-
-    rerender(<Tree activeId="codices" items={SECTIONED} variant="navigation" />)
-    const active = await screen.findByRole("button", { name: "Codices" })
-    expect(active.getAttribute("aria-current")).toBe("page")
-    expect(active.hasAttribute("data-active")).toBe(true)
-  })
-
-  test("onNavigate fires for leaf rows after the node's own onSelect", async () => {
-    const user = userEvent.setup()
-    const order: string[] = []
-    const items: ITreeNode[] = [
-      {
-        id: "a",
-        label: "Alpha",
-        href: "/a",
-        onSelect: () => order.push("onSelect"),
-      },
-    ]
-    render(
-      <Tree
-        items={items}
-        onNavigate={() => order.push("onNavigate")}
-        variant="navigation"
-      />
-    )
-    await user.click(screen.getByRole("button", { name: "Alpha" }))
-    expect(order).toEqual(["onSelect", "onNavigate"])
-  })
-
-  test("href is passed through to onNavigate, never rendered as an anchor", async () => {
-    const user = userEvent.setup()
-    const onNavigate = mock((_node: ITreeNode) => {})
-    render(<Tree items={FLAT_NAV} onNavigate={onNavigate} variant="navigation" />)
-
-    const search = screen.getByRole("button", { name: "Search" })
-    expect(search.tagName).toBe("BUTTON")
-    expect(search.getAttribute("href")).toBeNull()
-
-    await user.click(search)
-    expect(onNavigate).toHaveBeenCalledTimes(1)
-    expect(onNavigate.mock.calls[0]?.[0]?.href).toBe("/search")
-  })
-
-  test("sound=false strips the cuelume attributes from every row", () => {
-    render(<Tree items={FLAT_NAV} sound={false} variant="navigation" />)
-    for (const row of document.querySelectorAll('[data-slot="tree-row"]')) {
-      expect(row.hasAttribute("data-cuelume-press")).toBe(false)
-      expect(row.hasAttribute("data-cuelume-release")).toBe(false)
-    }
-  })
-})
-
-describe("Tree · toc", () => {
-  test("parents select on the row and expand from the overlay toggle", async () => {
-    const user = userEvent.setup()
-    const onNavigate = mock((_node: ITreeNode) => {})
-    render(<Tree items={TOC} onNavigate={onNavigate} variant="toc" />)
-
-    // Guide is a parent, but toc parents are selectable rows — the row
-    // itself carries no aria-expanded; the overlay chevron does.
-    const guide = screen.getByRole("button", { name: "Guide" })
-    expect(guide.getAttribute("aria-expanded")).toBeNull()
-    expect(guide.tagName).toBe("BUTTON")
-    const toggle = screen.getByRole("button", { name: "Expand Guide" })
-    expect(toggle.getAttribute("aria-expanded")).toBe("false")
-
-    // Pressing the row selects (and reports the node with its href) without
-    // expanding it.
-    await user.click(guide)
-    expect(onNavigate).toHaveBeenCalledTimes(1)
-    expect(onNavigate.mock.calls[0]?.[0]?.href).toBe("/guide")
-    expect(screen.queryByRole("button", { name: "Setup" })).toBeNull()
-
-    // The overlay toggle expands without selecting.
-    await user.click(toggle)
-    expect(await screen.findByRole("button", { name: "Setup" })).toBeDefined()
-    expect(onNavigate).toHaveBeenCalledTimes(1)
-    expect(toggle.getAttribute("aria-expanded")).toBe("true")
-
-    // Nested parents get their own overlay toggle; leaves get none.
-    await user.click(screen.getByRole("button", { name: "Expand Setup" }))
-    expect(await screen.findByRole("button", { name: "Install" })).toBeDefined()
-    expect(screen.queryByRole("button", { name: "Expand Install" })).toBeNull()
-
-    // Nothing in a toc renders as an anchor any more.
-    expect(document.querySelector("a")).toBeNull()
-  })
-
-  test("rows below the route level keep the native #{id} jump after select", async () => {
-    const user = userEvent.setup()
-    const order: string[] = []
-    window.location.hash = ""
-    render(
-      <Tree
-        items={TOC}
-        onNavigate={(node) => order.push(`navigate:${node.id}:${window.location.hash}`)}
-        variant="toc"
-      />
-    )
-
-    // Depth 0 is a route (href "/guide"): no hash is written — routing is
-    // the consumer's job in onNavigate.
-    await user.click(screen.getByRole("button", { name: "Guide" }))
-    expect(window.location.hash).toBe("")
-
-    await user.click(screen.getByRole("button", { name: "Expand Guide" }))
-    await user.click(await screen.findByRole("button", { name: "Setup" }))
-    // onNavigate ran first (hash still empty inside it), then the jump —
-    // the order the old anchor default gave.
-    expect(order).toEqual(["navigate:guide:", "navigate:setup:"])
-    expect(window.location.hash).toBe("#setup")
-
-    await user.click(screen.getByRole("button", { name: "Expand Setup" }))
-    await user.click(await screen.findByRole("button", { name: "Install" }))
-    expect(window.location.hash).toBe("#install")
-
-    // An explicit hash href wins over the id.
-    window.location.hash = ""
-    render(
-      <Tree
-        items={[
-          {
-            id: "top",
-            label: "Top",
-            children: [{ id: "leaf", label: "Leaf", href: "#custom" }],
-          },
-        ]}
-        variant="toc"
-      />
-    )
-    await user.click(screen.getByRole("button", { name: "Expand Top" }))
-    await user.click(await screen.findByRole("button", { name: "Leaf" }))
-    expect(window.location.hash).toBe("#custom")
-    window.location.hash = ""
-  })
-})
-
-describe("Tree · sidebar", () => {
-  test("the rail spans its container in both states", async () => {
-    // The rail no longer narrows itself to a fixed px column — its fold is
-    // the container's width change (an icon-collapsed panel). Both states
-    // must keep w-full so rows span the rail edge to edge.
-    const { rerender } = render(<Tree items={RAIL} variant="sidebar" />)
-    const rail = () => document.querySelector('[data-slot="tree"]')
-
-    expect(rail()?.className).toContain("w-full")
-    expect(rail()?.getAttribute("data-collapsed")).toBeNull()
-
-    rerender(<Tree collapsed items={RAIL} variant="sidebar" />)
-    await settleExit()
-    expect(rail()?.className).toContain("w-full")
-    expect(rail()?.className).not.toContain("w-10")
-    expect(rail()?.getAttribute("data-collapsed")).toBe("")
-    // Collapsed rows are full-width tiles with the icon centred, stepped up
-    // to size-5 and foreground colour — the icon is the whole row.
-    const row = screen.getByRole("button", { name: "Search" })
-    expect(row.className).toContain("h-10!")
-    expect(row.className).toContain("rounded-md!")
-    expect(row.className).toContain("justify-center")
-    expect(row.className).toContain("w-full")
-    const icon = row.querySelector('[data-slot="tree-row-icon"]')
-    expect(icon?.className).toContain("size-5")
-    expect(icon?.className).toContain("text-foreground")
-
-    // Back open — rows drop the tile treatment, icons step back down.
-    rerender(<Tree items={RAIL} variant="sidebar" />)
-    await settleExit()
-    expect(rail()?.className).toContain("w-full")
-    expect(rail()?.getAttribute("data-collapsed")).toBeNull()
-    const reopened = screen.getByRole("button", { name: "Search" })
-    expect(reopened.className).not.toContain("h-10!")
-    expect(
-      reopened.querySelector('[data-slot="tree-row-icon"]')?.className
-    ).not.toContain("size-5")
-  })
-
-  test("collapsed shows icon-only rows that keep an accessible name", async () => {
-    const { rerender } = render(<Tree items={RAIL} variant="sidebar" />)
-    expect(screen.getByRole("button", { name: "Search" }).textContent).toContain(
-      "Search"
-    )
-
-    rerender(<Tree collapsed items={RAIL} variant="sidebar" />)
-    await settleExit()
-    const row = screen.getByRole("button", { name: "Search" })
-    // The label folds to nothing rather than unmounting — keeping it in the
-    // DOM is what lets the fold animate — so assert the fold, not absence.
-    const label = row.querySelector('[data-slot="tree-row-label"]')
-    expect(label?.textContent).toBe("Search")
-    expect(label?.getAttribute("style")).toContain("display: none")
-    // With the label hidden, aria-label is what names the row.
-    expect(row.getAttribute("aria-label")).toBe("Search")
-  })
-
-  test("rail rows are tooltip triggers and keep identity across collapse", async () => {
-    // happy-dom can't drive Base UI's hover/focus-visible open logic, so
-    // assert the wiring: Base UI stamps its trigger attribute on the row.
-    const { rerender } = render(<Tree collapsed items={RAIL} variant="sidebar" />)
-    const collapsedRow = screen.getByRole("button", { name: "Search" })
-    expect(collapsedRow.hasAttribute("data-base-ui-tooltip-trigger")).toBe(true)
-
-    // The tooltip wrapper stays mounted when the rail expands (it is only
-    // disabled) — a remounted row would cut the label fold animation short.
-    // Let the label unfold before querying: mid-animation it is still
-    // display:none, and the row has no aria-label once expanded, so it has
-    // no accessible name to match on until the fold-out finishes.
-    // NB this asserts identity, not the fold-out itself — motion settles
-    // instantly under happy-dom, while in a real browser the rail currently
-    // does not reanimate back open. That defect is tracked separately; do
-    // not read this test as covering it.
-    rerender(<Tree items={RAIL} variant="sidebar" />)
-    await settleExit()
-    expect(screen.getByRole("button", { name: "Search" })).toBe(collapsedRow)
-  })
-
-  test("the active rail row swaps to the secondary Button variant", () => {
-    render(<Tree activeId="search" items={RAIL} variant="sidebar" />)
-    const active = screen.getByRole("button", { name: "Search" })
-    const idle = screen.getByRole("button", { name: "Notes" })
-    expect(active.getAttribute("aria-current")).toBe("page")
-    // Button's cva emits bg-secondary for "secondary" and nothing of the
-    // sort for "ghost" — the cheapest observable proxy for the variant.
-    expect(active.className).toContain("bg-secondary")
-    expect(idle.className).not.toContain("bg-secondary")
-  })
-
-  test("nested children are ignored — the rail is single-level", () => {
-    const items: ITreeNode[] = [
-      {
-        id: "top",
-        label: "Top",
-        icon: <SearchIcon />,
-        children: [{ id: "nested", label: "Nested" }],
-      },
-    ]
-    render(<Tree items={items} variant="sidebar" />)
-    expect(screen.queryByText("Nested")).toBeNull()
-    // No chevron either — the row is a plain button.
-    expect(
-      screen.getByRole("button", { name: "Top" }).getAttribute("aria-expanded")
-    ).toBeNull()
-  })
-})
-
-describe("Tree · files", () => {
-  test("folders toggle on row press; only leaves navigate", async () => {
-    const user = userEvent.setup()
-    const onNavigate = mock(() => {})
-    render(<Tree items={FILES} onNavigate={onNavigate} variant="files" />)
-
-    await user.click(screen.getByText("index.ts"))
-    expect(onNavigate).toHaveBeenCalledTimes(1)
-
-    const folder = screen.getByRole("button", { name: /^src/ })
-    await user.click(folder)
-    expect(onNavigate).toHaveBeenCalledTimes(1)
-    await settleExit()
-    expect(screen.queryByText("index.ts")).toBeNull()
-  })
-
-  test("trailing actions sit beside the row, not inside it", async () => {
-    const user = userEvent.setup()
-    const onDelete = mock(() => {})
-    render(
-      <Tree
-        items={FILES}
-        renderTrailing={(node) => (
-          <button onClick={onDelete} type="button">
-            {`Delete ${node.label}`}
-          </button>
-        )}
-        variant="files"
-      />
-    )
-
-    // Every row is a <button> — one nesting the trailing button would be
-    // invalid markup React warns about.
-    for (const row of document.querySelectorAll('[data-slot="tree-row"]')) {
-      expect(row.querySelector("button, a")).toBeNull()
-    }
-
-    // Still wired: pressing it does not also toggle or navigate the row.
-    const folder = screen.getByRole("button", { name: /^src/ })
-    await user.click(screen.getByRole("button", { name: "Delete src" }))
-    expect(onDelete).toHaveBeenCalledTimes(1)
-    expect(folder.getAttribute("aria-expanded")).toBe("true")
-  })
-
-  test("double-click renames inline; Enter commits, Escape cancels", async () => {
-    const user = userEvent.setup()
-    const onRename = mock(() => {})
-    render(<Tree items={FILES} onRename={onRename} variant="files" />)
-
-    await user.dblClick(screen.getByText("README.md"))
-    const input = document.querySelector<HTMLInputElement>(
-      '[data-slot="tree-rename-input"]'
-    )
-    expect(input).not.toBeNull()
-    await user.clear(input as HTMLInputElement)
-    await user.type(input as HTMLInputElement, "NOTES.md{Enter}")
-    expect(onRename).toHaveBeenCalledWith("readme", "NOTES.md")
-
-    // Escape leaves the label untouched.
-    await user.dblClick(screen.getByText("README.md"))
-    await user.keyboard("{Escape}")
-    expect(onRename).toHaveBeenCalledTimes(1)
-  })
-
-  test("drag reorders around a row and drops into a folder", () => {
-    const onMove = mock(() => {})
-    render(<Tree items={FILES} onMove={onMove} variant="files" />)
-    const rows = Array.from(
-      document.querySelectorAll<HTMLElement>('[data-slot="tree-row"]')
-    )
-    const src = rows.find((row) => row.dataset.id === "src") as HTMLElement
-    const readme = rows.find(
-      (row) => row.dataset.id === "readme"
-    ) as HTMLElement
-    expect(src.getAttribute("draggable")).toBe("true")
-
-    // happy-dom rects are zero-height, so the hook falls back to the
-    // 0.5 midpoint → "inside" for folders, "after" for leaves.
-    fireEvent.dragStart(readme)
-    fireEvent.dragOver(src)
-    fireEvent.drop(src)
-    expect(onMove).toHaveBeenCalledWith("readme", "src", 2)
-
-    // A folder never drops into its own subtree.
-    onMove.mockClear()
-    fireEvent.dragStart(src)
-    const indexRow = rows.find(
-      (row) => row.dataset.id === "index-ts"
-    ) as HTMLElement
-    fireEvent.dragOver(indexRow)
-    fireEvent.drop(indexRow)
-    expect(onMove).not.toHaveBeenCalled()
-  })
-
-  test("moveNode reducer lifts and reinserts immutably", () => {
-    const next = moveNode(FILES, "readme", "src", 2)
-    const src = next.find((node) => node.id === "src")
-    expect(src?.children?.map((child) => child.id)).toEqual([
-      "index-ts",
-      "utils-ts",
-      "readme",
-    ])
-    // Refuses a drop into the moved node's own subtree.
-    expect(moveNode(FILES, "src", "index-ts", 0)).toEqual(FILES)
-    // The input is untouched.
-    expect(FILES.find((node) => node.id === "src")?.children?.length).toBe(2)
-  })
-})
-
-describe("Tree · keyboard", () => {
-  test("arrows walk visible rows; right expands, left collapses", async () => {
-    const user = userEvent.setup()
-    render(<Tree items={FLAT_NAV} variant="navigation" />)
-
-    const search = screen.getByRole("button", { name: "Search" })
-    search.focus()
-    await user.keyboard("{ArrowDown}")
-    const library = screen.getByRole("button", { name: "Library" })
-    expect(document.activeElement).toBe(library)
-
-    await user.keyboard("{ArrowRight}")
-    expect(
-      await screen.findByRole("button", { name: "Manuscripts" })
-    ).toBeDefined()
-    await waitFor(() =>
-      expect(library.getAttribute("aria-expanded")).toBe("true")
-    )
-
-    await user.keyboard("{ArrowLeft}")
-    await settleExit()
-    expect(screen.queryByRole("button", { name: "Manuscripts" })).toBeNull()
-    expect(document.activeElement).toBe(library)
-  })
-
-  test("F2 starts a rename on the focused files row", async () => {
-    const user = userEvent.setup()
-    render(<Tree items={FILES} onRename={() => {}} variant="files" />)
-    screen.getByText("README.md").closest("button")?.focus()
-    await user.keyboard("{F2}")
-    expect(
-      document.querySelector('[data-slot="tree-rename-input"]')
-    ).not.toBeNull()
-  })
-})