104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import "@testing-library/jest-dom";
|
|
import fs from "node:fs";
|
|
import path from "node:path";
|
|
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { MemoryRouter } from "react-router";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { resolveRepoPath } from "~/utils/testing/repoPaths";
|
|
import { MobileNav } from "./DocsMobileNav";
|
|
import { DocsSidebarNav } from "./DocsSidebarNav";
|
|
|
|
vi.mock("~/utils/data/useRootData", () => ({
|
|
useRootData: () => ({
|
|
appConfiguration: {
|
|
branding: {},
|
|
},
|
|
}),
|
|
}));
|
|
|
|
describe("docs navigation", () => {
|
|
it("renders parents with children as expand-only controls", () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<DocsSidebarNav
|
|
items={[
|
|
{
|
|
title: "Settings",
|
|
path: "/settings",
|
|
items: [{ title: "Overview", path: "/settings" }],
|
|
},
|
|
]}
|
|
/>
|
|
</MemoryRouter>
|
|
);
|
|
|
|
expect(screen.getByRole("button", { name: "Settings" })).toHaveAttribute("aria-expanded", "true");
|
|
expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute("href", "/settings");
|
|
expect(screen.queryByRole("link", { name: "Settings" })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("does not render disabled docs items as links", () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<DocsSidebarNav
|
|
items={[
|
|
{
|
|
title: "Settings",
|
|
items: [{ title: "Disabled Plugin", path: "/settings/plugin", disabled: true }],
|
|
},
|
|
]}
|
|
/>
|
|
</MemoryRouter>
|
|
);
|
|
|
|
expect(screen.queryByRole("link", { name: "Disabled Plugin" })).not.toBeInTheDocument();
|
|
expect(screen.getByText("Disabled Plugin")).toHaveAttribute("aria-disabled", "true");
|
|
});
|
|
|
|
it("renders an accessible mobile docs sheet title and description", () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<MobileNav items={[]} />
|
|
</MemoryRouter>
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Toggle menu" }));
|
|
|
|
const dialog = screen.getByRole("dialog", { name: "Docs navigation" });
|
|
const heading = screen.getByRole("heading", { name: "Docs navigation" });
|
|
const description = screen.getByText("Displays the mobile docs navigation.");
|
|
|
|
expect(dialog).toHaveAccessibleDescription("Displays the mobile docs navigation.");
|
|
expect(heading.closest('[data-slot="sheet-header"]')).toHaveClass("sr-only");
|
|
expect(description.closest('[data-slot="sheet-header"]')).toHaveClass("sr-only");
|
|
});
|
|
|
|
it("keeps mobile docs parents as non-link controls", () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<MobileNav
|
|
items={[
|
|
{
|
|
title: "Settings",
|
|
path: "/settings",
|
|
items: [{ title: "Overview", path: "/settings" }],
|
|
},
|
|
]}
|
|
/>
|
|
</MemoryRouter>
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Toggle menu" }));
|
|
|
|
expect(screen.getByRole("button", { name: "Settings" })).toHaveAttribute("aria-expanded", "true");
|
|
expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute("href", "/settings");
|
|
expect(screen.queryByRole("link", { name: "Settings" })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("adds an explicit overview child for knowledge-base category paths", () => {
|
|
const source = fs.readFileSync(resolveRepoPath(path.join("apps/web/app/modules/knowledgeBase/components/layouts/KbDocsLayout.tsx")), "utf8");
|
|
|
|
expect(source).toContain('items: [{ title: t("shared.overview"), path: category.href }]');
|
|
});
|
|
});
|