127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import {
|
|
NavigationToolRail,
|
|
type NavigationToolId
|
|
} from "../src/components/NavigationToolRail";
|
|
import { NavigationWorkspace } from "../src/components/NavigationWorkspace";
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe("NavigationToolRail", () => {
|
|
it("renders the fixed tool order with accessible state and badge information", () => {
|
|
const onSelect = vi.fn<(tool: NavigationToolId) => void>();
|
|
|
|
render(
|
|
<NavigationToolRail
|
|
activeTool="conditions"
|
|
onSelect={onSelect}
|
|
workspaceId="test-workspace"
|
|
statuses={{
|
|
anchor: "alarm",
|
|
conditions: "active",
|
|
upcoming: "caution",
|
|
route: "caution"
|
|
}}
|
|
badges={{ upcoming: 123, route: 4 }}
|
|
/>
|
|
);
|
|
|
|
const rail = screen.getByRole("navigation", { name: "Navigationswerkzeuge" });
|
|
const buttons = within(rail).getAllByRole("button");
|
|
expect(buttons.map((button) => button.dataset.tool)).toEqual([
|
|
"boat",
|
|
"anchor",
|
|
"conditions",
|
|
"upcoming",
|
|
"route"
|
|
]);
|
|
|
|
expect(screen.getByRole("button", { name: /Mein Boot, bereit, öffnen/ })).toBeVisible();
|
|
|
|
const anchor = screen.getByRole("button", { name: /Ankerwache, Alarm, öffnen/ });
|
|
expect(anchor).toHaveAttribute("data-status", "alarm");
|
|
expect(anchor).toHaveAttribute("aria-controls", "test-workspace");
|
|
expect(anchor).toHaveAttribute("aria-expanded", "false");
|
|
expect(anchor).toHaveAttribute("aria-pressed", "false");
|
|
|
|
const conditions = screen.getByRole("button", {
|
|
name: /Wetter und Tide, aktiv, geöffnet/
|
|
});
|
|
expect(conditions).toHaveAttribute("aria-expanded", "true");
|
|
expect(conditions).toHaveAttribute("aria-pressed", "true");
|
|
|
|
const upcoming = screen.getByRole("button", {
|
|
name: /Als Nächstes, Warnung, 99\+ Hinweise, öffnen/
|
|
});
|
|
expect(upcoming).toHaveAttribute("data-status", "caution");
|
|
expect(within(upcoming).getByText("99+")).toBeVisible();
|
|
|
|
const route = screen.getByRole("button", {
|
|
name: /Route, Warnung, 4 Hinweise, öffnen/
|
|
});
|
|
expect(within(route).getByText("4")).toBeVisible();
|
|
fireEvent.click(route);
|
|
expect(onSelect).toHaveBeenCalledWith("route");
|
|
});
|
|
});
|
|
|
|
describe("NavigationWorkspace", () => {
|
|
it("keeps compact content inaccessible and exposes controlled size and close actions", () => {
|
|
const onSheetStateChange = vi.fn();
|
|
const onClose = vi.fn();
|
|
const onBack = vi.fn();
|
|
|
|
const { container, rerender } = render(
|
|
<NavigationWorkspace
|
|
id="test-workspace"
|
|
activeTool="route"
|
|
title="Routenübersicht"
|
|
summary="12 sm bis zum Ziel"
|
|
status="active"
|
|
sheetState="compact"
|
|
presentation="bottom-sheet"
|
|
onSheetStateChange={onSheetStateChange}
|
|
onBack={onBack}
|
|
onClose={onClose}
|
|
footer={<button type="button">Navigation starten</button>}
|
|
>
|
|
<button type="button">Route bearbeiten</button>
|
|
</NavigationWorkspace>
|
|
);
|
|
|
|
const workspace = screen.getByRole("complementary", { name: "Routenübersicht" });
|
|
expect(workspace).toHaveAttribute("data-tool", "route");
|
|
expect(workspace).toHaveAttribute("data-status", "active");
|
|
expect(workspace).toHaveAttribute("data-presentation", "bottom-sheet");
|
|
expect(workspace).toHaveAttribute("data-sheet-state", "compact");
|
|
expect(container.querySelector(".navigation-workspace-body")).toHaveAttribute("hidden");
|
|
expect(container.querySelector(".navigation-workspace-footer")).toHaveAttribute("hidden");
|
|
expect(screen.queryByRole("button", { name: "Route bearbeiten" })).not.toBeInTheDocument();
|
|
|
|
fireEvent.click(
|
|
screen.getByRole("button", { name: "Arbeitsbereich auf halbe Höhe vergrößern" })
|
|
);
|
|
expect(onSheetStateChange).toHaveBeenCalledWith("half");
|
|
fireEvent.click(screen.getByRole("button", { name: "Zurück" }));
|
|
expect(onBack).toHaveBeenCalledTimes(1);
|
|
fireEvent.click(screen.getByRole("button", { name: "Route schließen" }));
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
|
|
rerender(
|
|
<NavigationWorkspace
|
|
id="test-workspace"
|
|
activeTool="route"
|
|
title="Routenübersicht"
|
|
sheetState="half"
|
|
onClose={onClose}
|
|
>
|
|
<button type="button">Route bearbeiten</button>
|
|
</NavigationWorkspace>
|
|
);
|
|
expect(screen.getByRole("button", { name: "Route bearbeiten" })).toBeVisible();
|
|
expect(container.querySelector(".navigation-workspace-body")).not.toHaveAttribute("hidden");
|
|
});
|
|
});
|