deadhead-space-freight-tycoon/apps/web/test/layout.test.tsx

53 lines
2.3 KiB
TypeScript

import { screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { SCREENS } from "../src/routes";
import { fakeApi, renderApp, samplePlayerState } from "./render";
const signedIn = () =>
fakeApi({
getPlayerState: () =>
samplePlayerState({ company: { id: "c", name: "D", credits: 1234, loanBalance: 0 } }),
});
describe("app layout", () => {
it("renders the header with credits and game clock, and the bottom navigation", async () => {
renderApp(signedIn());
expect(await screen.findByRole("banner")).toBeInTheDocument();
expect(screen.getByLabelText("Credits")).toHaveTextContent("1,234 cr");
expect(screen.getByLabelText("Game clock")).toHaveTextContent(
// Device-locale clock by default (CR-011): 24-hour or 12-hour.
/^\d{4}-\d{2}-\d{2} \d{1,2}:\d{2}( [AP]M)?$/,
);
const nav = screen.getByRole("navigation", { name: "Main" });
expect(within(nav).getAllByRole("link")).toHaveLength(SCREENS.length);
});
it.each(SCREENS)("shows the $title placeholder at $path", async ({ path, title }) => {
renderApp(signedIn(), path);
expect(await screen.findByRole("heading", { level: 1, name: title })).toBeInTheDocument();
});
it("navigates between screens with the bottom navigation", async () => {
renderApp(signedIn());
const nav = await screen.findByRole("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",
);
});
it("opens on the Bridge tab, the Dashboard, with HQs among eight tabs (CR-020)", async () => {
renderApp(signedIn());
const nav = await screen.findByRole("navigation", { name: "Main" });
const links = within(nav).getAllByRole("link");
expect(links).toHaveLength(8);
expect(links[0]).toHaveAccessibleName("Bridge");
expect(links[0]).toHaveAttribute("aria-current", "page");
expect(screen.getByRole("heading", { level: 1, name: "Dashboard" })).toBeInTheDocument();
expect(within(nav).getByRole("link", { name: "HQs" })).toHaveAttribute("href", "/hqs");
});
});