42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { render, screen, within } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { MemoryRouter } from "react-router";
|
|
import { describe, expect, it } from "vitest";
|
|
import { App } from "../src/App";
|
|
import { SCREENS } from "../src/routes";
|
|
|
|
function renderAt(path: string) {
|
|
return render(
|
|
<MemoryRouter initialEntries={[path]}>
|
|
<App />
|
|
</MemoryRouter>,
|
|
);
|
|
}
|
|
|
|
describe("app layout", () => {
|
|
it("renders the header with credits and game clock, and the bottom navigation", () => {
|
|
renderAt("/");
|
|
expect(screen.getByRole("banner")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("Credits")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("Game clock")).toBeInTheDocument();
|
|
const nav = screen.getByRole("navigation", { name: "Main" });
|
|
expect(within(nav).getAllByRole("link")).toHaveLength(SCREENS.length);
|
|
});
|
|
|
|
it.each(SCREENS)("shows the $title placeholder at $path", ({ path, title }) => {
|
|
renderAt(path);
|
|
expect(screen.getByRole("heading", { level: 1, name: title })).toBeInTheDocument();
|
|
});
|
|
|
|
it("navigates between screens with the bottom navigation", async () => {
|
|
renderAt("/");
|
|
const nav = screen.getByRole("navigation", { name: "Main" });
|
|
await userEvent.click(within(nav).getByRole("link", { name: "Fleet" }));
|
|
expect(screen.getByRole("heading", { level: 1, name: "Fleet" })).toBeInTheDocument();
|
|
expect(within(nav).getByRole("link", { name: "Fleet" })).toHaveAttribute(
|
|
"aria-current",
|
|
"page",
|
|
);
|
|
});
|
|
});
|