57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { Art, Button, Meter, ScreenHeader, Sheet, spriteUrl } from "../src/ui";
|
|
|
|
describe("UI kit (Step 10E.2)", () => {
|
|
it("buttons default to type=button and forward disabled and clicks", async () => {
|
|
const onClick = vi.fn();
|
|
const { rerender } = render(<Button onClick={onClick}>Go</Button>);
|
|
const button = screen.getByRole("button", { name: "Go" });
|
|
expect(button).toHaveAttribute("type", "button");
|
|
await userEvent.click(button);
|
|
expect(onClick).toHaveBeenCalledOnce();
|
|
|
|
rerender(
|
|
<Button onClick={onClick} disabled>
|
|
Go
|
|
</Button>,
|
|
);
|
|
expect(screen.getByRole("button", { name: "Go" })).toBeDisabled();
|
|
});
|
|
|
|
it("meters expose their range and value", () => {
|
|
render(<Meter label="Duty" value={9} max={14} />);
|
|
const bar = screen.getByRole("progressbar", { name: "Duty" });
|
|
expect(bar).toHaveAttribute("aria-valuemin", "0");
|
|
expect(bar).toHaveAttribute("aria-valuemax", "14");
|
|
expect(bar).toHaveAttribute("aria-valuenow", "9");
|
|
});
|
|
|
|
it("sheets are modal dialogs labelled by their title", () => {
|
|
render(
|
|
<Sheet titleId="t" title="Deliver to which HQ?">
|
|
<p>Body</p>
|
|
</Sheet>,
|
|
);
|
|
const dialog = screen.getByRole("dialog", { name: "Deliver to which HQ?" });
|
|
expect(dialog).toHaveAttribute("aria-modal", "true");
|
|
expect(screen.getByRole("heading", { level: 2, name: "Deliver to which HQ?" })).toBeVisible();
|
|
});
|
|
|
|
it("the screen header is the level-1 heading", () => {
|
|
render(<ScreenHeader title="Fleet" eyebrow="Your ships" />);
|
|
expect(screen.getByRole("heading", { level: 1, name: "Fleet" })).toBeInTheDocument();
|
|
});
|
|
|
|
it("art loads the generated sprite and hides itself if it fails", () => {
|
|
const { container } = render(<Art sprite="ship-courier" />);
|
|
const img = container.querySelector("img")!;
|
|
expect(img).toHaveAttribute("src", spriteUrl("ship-courier", "1x"));
|
|
expect(img).toHaveAttribute("alt", "");
|
|
expect(img.getAttribute("srcset")).toContain("/assets/map-gen/ship-courier@2x.png 2x");
|
|
fireEvent.error(img);
|
|
expect(container.querySelector("img")).toBeNull();
|
|
});
|
|
});
|