diff --git a/changelog.d/added-docs-sidebar-tests.md b/changelog.d/added-docs-sidebar-tests.md new file mode 100644 index 0000000..dd28564 --- /dev/null +++ b/changelog.d/added-docs-sidebar-tests.md @@ -0,0 +1 @@ +- Add behavior tests for the DocsSidebar component (mount-time collapse state, folder and project row toggles, scroll offset throttling). diff --git a/src/__tests__/DocsSidebar.behavior.test.tsx b/src/__tests__/DocsSidebar.behavior.test.tsx new file mode 100644 index 0000000..bfb2e57 --- /dev/null +++ b/src/__tests__/DocsSidebar.behavior.test.tsx @@ -0,0 +1,474 @@ +// @vitest-environment jsdom +// +// Covers the branches of src/components/docs/DocsSidebar.tsx that +// DocsChrome.behavior.test.tsx leaves untouched: +// - mount-time collapse state: the folder chain leading to the active page +// stays open (findActivePath), siblings collapse (collapseAll), and +// `theme.collapsed === false` pins a folder open +// - general sections (Community/Contributing/News): expanded only when the +// current path is inside them, with their own nested active-path handling +// - getFirstChildRoute(): recursion through nested folders and the +// no-navigable-route fallback that renders a plain toggle button +// - folder click expands a collapsed folder without re-collapsing an +// open one; the chevron button toggles either way +// - hidden items (index, _meta, '#', Separator, Meta, blank title) are not +// rendered +// - active-project header button collapses/expands the whole tree; the tree +// is omitted when the pageMap has no project items +// - non-active project rows: label link expands a collapsed row, chevron +// toggles, and the docs guide path renders every project as a link +// - scroll handling: requestAnimationFrame-throttled offset recalculation +// - mobile close button and SidebarFooter collapse wiring through DocsProvider +import React, { type ReactNode } from "react"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { + act, + cleanup, + fireEvent, + render, + screen, +} from "@testing-library/react"; + +vi.mock("next/link", () => ({ + default: ({ + href, + children, + ...rest + }: { + href?: string; + children?: ReactNode; + }) => ( + key !== "prefetch") + )} + > + {children} + + ), +})); + +let pathname = "/docs/hive/overview/introduction"; +vi.mock("next/navigation", () => ({ + usePathname: () => pathname, +})); + +import { DocsProvider } from "../components/docs/DocsProvider"; +import { DocsSidebar } from "../components/docs/DocsSidebar"; + +type MenuItem = React.ComponentProps["pageMap"][number]; + +function renderSidebar(pageMap: MenuItem[], projectId = "hive") { + return render( + + + + ); +} + +/** The chevron