galaxy-game/ui/frontend/tests/view-state.test.ts

import "@testing-library/jest-dom/vitest";
import { fireEvent, render } from "@testing-library/svelte";
import { describe, expect, it, vi } from "vitest";

import ViewState from "../src/lib/ui/view-state.svelte";

describe("ViewState", () => {
	it("announces an error assertively (role=alert)", () => {
		const ui = render(ViewState, {
			props: { kind: "error", message: "it broke", testid: "vs" },
		});
		const el = ui.getByTestId("vs");
		expect(el).toHaveAttribute("role", "alert");
		expect(el).toHaveAttribute("data-kind", "error");
		expect(el).toHaveTextContent("it broke");
	});

	it("announces loading politely (role=status)", () => {
		const ui = render(ViewState, {
			props: { kind: "loading", message: "loading…" },
		});
		expect(ui.getByRole("status")).toHaveTextContent("loading…");
	});

	it("renders an action button that fires onAction", async () => {
		const onAction = vi.fn();
		const ui = render(ViewState, {
			props: {
				kind: "error",
				message: "failed",
				actionLabel: "retry",
				onAction,
			},
		});
		await fireEvent.click(ui.getByText("retry"));
		expect(onAction).toHaveBeenCalledOnce();
	});

	it("omits the action button when no handler is given", () => {
		const ui = render(ViewState, {
			props: { kind: "empty", message: "nothing here" },
		});
		expect(ui.queryByRole("button")).toBeNull();
	});
});