test(frontend): add comprehensive tests for components, hooks, and state

Add 84 new tests covering Jotai atoms (play/watch state transitions,
game timing, score management), utility functions (calcCodeSize,
checkGameResultKind), UI components (SubmitStatusLabel, LeftTime,
SubmitButton, InputText, BorderedContainerWithCaption,
FoldableBorderedContainerWithCaption, UserIcon, PlayerNameAndIcon),
and the usePageTitle hook.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

11 files changed, 797 insertions, 0 deletions

diff --git a/frontend/app/components/BorderedContainerWithCaption.test.tsx b/frontend/app/components/BorderedContainerWithCaption.test.tsx
new file mode 100644
index 0000000..621dcb3
--- /dev/null
+++ b/frontend/app/components/BorderedContainerWithCaption.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import BorderedContainerWithCaption from "./BorderedContainerWithCaption";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("BorderedContainerWithCaption", () => {
+	test("renders caption as heading", () => {
+		render(
+			<BorderedContainerWithCaption caption="Test Caption">
+				Content
+			</BorderedContainerWithCaption>,
+		);
+		expect(screen.getByText("Test Caption")).toBeDefined();
+		expect(screen.getByText("Test Caption").tagName).toBe("H2");
+	});
+
+	test("renders children", () => {
+		render(
+			<BorderedContainerWithCaption caption="Title">
+				Child Content
+			</BorderedContainerWithCaption>,
+		);
+		expect(screen.getByText("Child Content")).toBeDefined();
+	});
+
+	test("wraps in bordered container with blue border", () => {
+		render(
+			<BorderedContainerWithCaption caption="Title">
+				Content
+			</BorderedContainerWithCaption>,
+		);
+		const container = screen.getByText("Content").closest(".border-2");
+		expect(container).not.toBeNull();
+	});
+});
diff --git a/frontend/app/components/FoldableBorderedContainerWithCaption.test.tsx b/frontend/app/components/FoldableBorderedContainerWithCaption.test.tsx
new file mode 100644
index 0000000..a4434ff
--- /dev/null
+++ b/frontend/app/components/FoldableBorderedContainerWithCaption.test.tsx
@@ -0,0 +1,56 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import FoldableBorderedContainerWithCaption from "./FoldableBorderedContainerWithCaption";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("FoldableBorderedContainerWithCaption", () => {
+	test("renders caption", () => {
+		render(
+			<FoldableBorderedContainerWithCaption caption="Foldable Title">
+				Content
+			</FoldableBorderedContainerWithCaption>,
+		);
+		expect(screen.getByText("Foldable Title")).toBeDefined();
+	});
+
+	test("shows children by default (open state)", () => {
+		render(
+			<FoldableBorderedContainerWithCaption caption="Title">
+				<div data-testid="child">Visible</div>
+			</FoldableBorderedContainerWithCaption>,
+		);
+		const child = screen.getByTestId("child");
+		expect(child.parentElement?.className).not.toContain("hidden");
+	});
+
+	test("hides children when toggle button is clicked", () => {
+		render(
+			<FoldableBorderedContainerWithCaption caption="Title">
+				<div data-testid="child">Content</div>
+			</FoldableBorderedContainerWithCaption>,
+		);
+		const toggleButton = screen.getByRole("button");
+		fireEvent.click(toggleButton);
+		const child = screen.getByTestId("child");
+		expect(child.parentElement?.className).toContain("hidden");
+	});
+
+	test("shows children again when toggle button is clicked twice", () => {
+		render(
+			<FoldableBorderedContainerWithCaption caption="Title">
+				<div data-testid="child">Content</div>
+			</FoldableBorderedContainerWithCaption>,
+		);
+		const toggleButton = screen.getByRole("button");
+		fireEvent.click(toggleButton);
+		fireEvent.click(toggleButton);
+		const child = screen.getByTestId("child");
+		expect(child.parentElement?.className).not.toContain("hidden");
+	});
+});
diff --git a/frontend/app/components/Gaming/LeftTime.test.tsx b/frontend/app/components/Gaming/LeftTime.test.tsx
new file mode 100644
index 0000000..742d8eb
--- /dev/null
+++ b/frontend/app/components/Gaming/LeftTime.test.tsx
@@ -0,0 +1,47 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import LeftTime from "./LeftTime";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("LeftTime", () => {
+	test("renders MM:SS format for short durations", () => {
+		render(<LeftTime sec={65} />);
+		expect(screen.getByText("01:05")).toBeDefined();
+	});
+
+	test("renders 00:00 for zero seconds", () => {
+		render(<LeftTime sec={0} />);
+		expect(screen.getByText("00:00")).toBeDefined();
+	});
+
+	test("renders MM:SS with leading zeros", () => {
+		render(<LeftTime sec={5} />);
+		expect(screen.getByText("00:05")).toBeDefined();
+	});
+
+	test("renders 59:59 for max MM:SS range", () => {
+		render(<LeftTime sec={3599} />);
+		expect(screen.getByText("59:59")).toBeDefined();
+	});
+
+	test("renders long format with hours", () => {
+		render(<LeftTime sec={3661} />);
+		expect(screen.getByText("1h 1m 1s")).toBeDefined();
+	});
+
+	test("renders long format with days", () => {
+		render(<LeftTime sec={90061} />);
+		expect(screen.getByText("1d 1h 1m 1s")).toBeDefined();
+	});
+
+	test("renders long format omitting zero day and minute", () => {
+		render(<LeftTime sec={3605} />);
+		expect(screen.getByText("1h 5s")).toBeDefined();
+	});
+});
diff --git a/frontend/app/components/InputText.test.tsx b/frontend/app/components/InputText.test.tsx
new file mode 100644
index 0000000..2072b37
--- /dev/null
+++ b/frontend/app/components/InputText.test.tsx
@@ -0,0 +1,36 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import InputText from "./InputText";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("InputText", () => {
+	test("renders an input element", () => {
+		render(<InputText data-testid="input" />);
+		const input = screen.getByTestId("input");
+		expect(input.tagName).toBe("INPUT");
+	});
+
+	test("passes placeholder prop", () => {
+		render(<InputText placeholder="Enter text" data-testid="input" />);
+		const input = screen.getByTestId("input") as HTMLInputElement;
+		expect(input.placeholder).toBe("Enter text");
+	});
+
+	test("passes type prop", () => {
+		render(<InputText type="password" data-testid="input" />);
+		const input = screen.getByTestId("input") as HTMLInputElement;
+		expect(input.type).toBe("password");
+	});
+
+	test("has border styling", () => {
+		render(<InputText data-testid="input" />);
+		const input = screen.getByTestId("input");
+		expect(input.className).toContain("border-sky-600");
+	});
+});
diff --git a/frontend/app/components/PlayerNameAndIcon.test.tsx b/frontend/app/components/PlayerNameAndIcon.test.tsx
new file mode 100644
index 0000000..5a9dd49
--- /dev/null
+++ b/frontend/app/components/PlayerNameAndIcon.test.tsx
@@ -0,0 +1,39 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import PlayerNameAndIcon from "./PlayerNameAndIcon";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("PlayerNameAndIcon", () => {
+	test("renders display name", () => {
+		render(
+			<PlayerNameAndIcon
+				profile={{ id: 1, displayName: "Alice", iconPath: null }}
+			/>,
+		);
+		expect(screen.getByText("Alice")).toBeDefined();
+	});
+
+	test("does not render icon when iconPath is null", () => {
+		render(
+			<PlayerNameAndIcon
+				profile={{ id: 1, displayName: "Bob", iconPath: null }}
+			/>,
+		);
+		expect(screen.queryByRole("img")).toBeNull();
+	});
+
+	test("renders icon when iconPath is provided", () => {
+		render(
+			<PlayerNameAndIcon
+				profile={{ id: 1, displayName: "Carol", iconPath: "icons/carol.png" }}
+			/>,
+		);
+		expect(screen.getByAltText("Carol のアイコン")).toBeDefined();
+	});
+});
diff --git a/frontend/app/components/SubmitButton.test.tsx b/frontend/app/components/SubmitButton.test.tsx
new file mode 100644
index 0000000..ebf3416
--- /dev/null
+++ b/frontend/app/components/SubmitButton.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import SubmitButton from "./SubmitButton";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("SubmitButton", () => {
+	test("renders children text", () => {
+		render(<SubmitButton>Submit</SubmitButton>);
+		expect(screen.getByText("Submit")).toBeDefined();
+	});
+
+	test("renders as a button element", () => {
+		render(<SubmitButton>Click</SubmitButton>);
+		const button = screen.getByText("Click");
+		expect(button.tagName).toBe("BUTTON");
+	});
+
+	test("can be disabled", () => {
+		render(<SubmitButton disabled>Submit</SubmitButton>);
+		const button = screen.getByText("Submit") as HTMLButtonElement;
+		expect(button.disabled).toBe(true);
+	});
+
+	test("is not disabled by default", () => {
+		render(<SubmitButton>Submit</SubmitButton>);
+		const button = screen.getByText("Submit") as HTMLButtonElement;
+		expect(button.disabled).toBe(false);
+	});
+
+	test("has sky-600 background styling", () => {
+		render(<SubmitButton>Submit</SubmitButton>);
+		const button = screen.getByText("Submit");
+		expect(button.className).toContain("bg-sky-600");
+	});
+});
diff --git a/frontend/app/components/SubmitStatusLabel.test.tsx b/frontend/app/components/SubmitStatusLabel.test.tsx
new file mode 100644
index 0000000..cdedf9e
--- /dev/null
+++ b/frontend/app/components/SubmitStatusLabel.test.tsx
@@ -0,0 +1,52 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import SubmitStatusLabel from "./SubmitStatusLabel";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("SubmitStatusLabel", () => {
+	test("renders '提出待ち' for none status", () => {
+		render(<SubmitStatusLabel status="none" />);
+		expect(screen.getByText("提出待ち")).toBeDefined();
+	});
+
+	test("renders '実行中...' for running status", () => {
+		render(<SubmitStatusLabel status="running" />);
+		expect(screen.getByText("実行中...")).toBeDefined();
+	});
+
+	test("renders '成功' for success status", () => {
+		render(<SubmitStatusLabel status="success" />);
+		expect(screen.getByText("成功")).toBeDefined();
+	});
+
+	test("renders 'テスト失敗' for wrong_answer status", () => {
+		render(<SubmitStatusLabel status="wrong_answer" />);
+		expect(screen.getByText("テスト失敗")).toBeDefined();
+	});
+
+	test("renders '時間切れ' for timeout status", () => {
+		render(<SubmitStatusLabel status="timeout" />);
+		expect(screen.getByText("時間切れ")).toBeDefined();
+	});
+
+	test("renders 'コンパイルエラー' for compile_error status", () => {
+		render(<SubmitStatusLabel status="compile_error" />);
+		expect(screen.getByText("コンパイルエラー")).toBeDefined();
+	});
+
+	test("renders '実行時エラー' for runtime_error status", () => {
+		render(<SubmitStatusLabel status="runtime_error" />);
+		expect(screen.getByText("実行時エラー")).toBeDefined();
+	});
+
+	test("renders '！内部エラー！' for internal_error status", () => {
+		render(<SubmitStatusLabel status="internal_error" />);
+		expect(screen.getByText("！内部エラー！")).toBeDefined();
+	});
+});
diff --git a/frontend/app/components/UserIcon.test.tsx b/frontend/app/components/UserIcon.test.tsx
new file mode 100644
index 0000000..964aae1
--- /dev/null
+++ b/frontend/app/components/UserIcon.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import UserIcon from "./UserIcon";
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("UserIcon", () => {
+	test("renders an img element", () => {
+		render(
+			<UserIcon
+				iconPath="icons/test.png"
+				displayName="TestUser"
+				className="w-16 h-16"
+			/>,
+		);
+		const img = screen.getByAltText("TestUser のアイコン");
+		expect(img.tagName).toBe("IMG");
+	});
+
+	test("sets alt text with display name", () => {
+		render(
+			<UserIcon
+				iconPath="icons/test.png"
+				displayName="Alice"
+				className="w-16 h-16"
+			/>,
+		);
+		expect(screen.getByAltText("Alice のアイコン")).toBeDefined();
+	});
+
+	test("applies rounded-full and border classes", () => {
+		render(
+			<UserIcon
+				iconPath="icons/test.png"
+				displayName="Bob"
+				className="w-16 h-16"
+			/>,
+		);
+		const img = screen.getByAltText("Bob のアイコン");
+		expect(img.className).toContain("rounded-full");
+		expect(img.className).toContain("border-4");
+		expect(img.className).toContain("border-white");
+	});
+
+	test("applies custom className", () => {
+		render(
+			<UserIcon
+				iconPath="icons/test.png"
+				displayName="Bob"
+				className="w-48 h-48"
+			/>,
+		);
+		const img = screen.getByAltText("Bob のアイコン");
+		expect(img.className).toContain("w-48");
+		expect(img.className).toContain("h-48");
+	});
+});
diff --git a/frontend/app/hooks/usePageTitle.test.ts b/frontend/app/hooks/usePageTitle.test.ts
new file mode 100644
index 0000000..2e1a3ec
--- /dev/null
+++ b/frontend/app/hooks/usePageTitle.test.ts
@@ -0,0 +1,23 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { usePageTitle } from "./usePageTitle";
+
+describe("usePageTitle", () => {
+	test("sets document title", () => {
+		renderHook(() => usePageTitle("Test Page"));
+		expect(document.title).toBe("Test Page");
+	});
+
+	test("updates document title when value changes", () => {
+		const { rerender } = renderHook(({ title }) => usePageTitle(title), {
+			initialProps: { title: "First" },
+		});
+		expect(document.title).toBe("First");
+
+		rerender({ title: "Second" });
+		expect(document.title).toBe("Second");
+	});
+});
diff --git a/frontend/app/states/play.test.ts b/frontend/app/states/play.test.ts
new file mode 100644
index 0000000..0f73039
--- /dev/null
+++ b/frontend/app/states/play.test.ts
@@ -0,0 +1,194 @@
+import { createStore } from "jotai";
+import { describe, expect, test } from "vitest";
+import {
+	calcCodeSize,
+	gameStateKindAtom,
+	gamingLeftTimeSecondsAtom,
+	handleSubmitCodePostAtom,
+	handleSubmitCodePreAtom,
+	scoreAtom,
+	setCurrentTimestampAtom,
+	setDurationSecondsAtom,
+	setGameStartedAtAtom,
+	setLatestGameStateAtom,
+	startingLeftTimeSecondsAtom,
+	statusAtom,
+} from "./play";
+
+describe("calcCodeSize", () => {
+	test("counts UTF-8 bytes after removing whitespace (swift)", () => {
+		expect(calcCodeSize("print(1)", "swift")).toBe(8);
+	});
+
+	test("removes all whitespace for swift", () => {
+		expect(calcCodeSize("print( 1 )\n", "swift")).toBe(8);
+	});
+
+	test("removes <?php tag for php", () => {
+		expect(calcCodeSize("<?php echo 1;", "php")).toBe(6);
+	});
+
+	test("removes <? short tag for php", () => {
+		expect(calcCodeSize("<? echo 1;", "php")).toBe(6);
+	});
+
+	test("removes ?> closing tag for php", () => {
+		expect(calcCodeSize("<?php echo 1;?>", "php")).toBe(6);
+	});
+
+	test("removes whitespace and tags together for php", () => {
+		expect(calcCodeSize("<?php\n echo 1; \n?>", "php")).toBe(6);
+	});
+
+	test("returns 0 for empty string", () => {
+		expect(calcCodeSize("", "swift")).toBe(0);
+	});
+
+	test("counts multi-byte characters correctly", () => {
+		// "あ" is 3 bytes in UTF-8
+		expect(calcCodeSize("あ", "swift")).toBe(3);
+	});
+
+	test("php with only tags and whitespace returns 0", () => {
+		expect(calcCodeSize("<?php ?>", "php")).toBe(0);
+	});
+});
+
+describe("Jotai atoms", () => {
+	test("gameStateKindAtom returns 'loading' initially", () => {
+		const store = createStore();
+		expect(store.get(gameStateKindAtom)).toBe("loading");
+	});
+
+	test("gameStateKindAtom returns 'waiting' when timestamp set but no startedAt", () => {
+		const store = createStore();
+		store.set(setCurrentTimestampAtom);
+		expect(store.get(gameStateKindAtom)).toBe("waiting");
+	});
+
+	test("gameStateKindAtom returns 'starting' when now < startedAt", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now + 60);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gameStateKindAtom)).toBe("starting");
+	});
+
+	test("gameStateKindAtom returns 'gaming' when now >= startedAt and now < finishedAt", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now - 10);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gameStateKindAtom)).toBe("gaming");
+	});
+
+	test("gameStateKindAtom returns 'finished' when now >= finishedAt", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now - 400);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gameStateKindAtom)).toBe("finished");
+	});
+
+	test("startingLeftTimeSecondsAtom returns null when startedAt is null", () => {
+		const store = createStore();
+		expect(store.get(startingLeftTimeSecondsAtom)).toBeNull();
+	});
+
+	test("startingLeftTimeSecondsAtom returns null when currentTimestamp is null", () => {
+		const store = createStore();
+		store.set(setGameStartedAtAtom, 1000);
+		expect(store.get(startingLeftTimeSecondsAtom)).toBeNull();
+	});
+
+	test("startingLeftTimeSecondsAtom returns remaining time before start", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now + 30);
+		const leftTime = store.get(startingLeftTimeSecondsAtom);
+		expect(leftTime).toBeGreaterThanOrEqual(29);
+		expect(leftTime).toBeLessThanOrEqual(30);
+	});
+
+	test("startingLeftTimeSecondsAtom returns 0 when past start time", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now - 10);
+		expect(store.get(startingLeftTimeSecondsAtom)).toBe(0);
+	});
+
+	test("gamingLeftTimeSecondsAtom returns null when startedAt is null", () => {
+		const store = createStore();
+		expect(store.get(gamingLeftTimeSecondsAtom)).toBeNull();
+	});
+
+	test("gamingLeftTimeSecondsAtom returns remaining game time", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now - 10);
+		store.set(setDurationSecondsAtom, 300);
+		const leftTime = store.get(gamingLeftTimeSecondsAtom);
+		expect(leftTime).toBeGreaterThanOrEqual(289);
+		expect(leftTime).toBeLessThanOrEqual(290);
+	});
+
+	test("gamingLeftTimeSecondsAtom clamps to 0 when game is over", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now - 400);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gamingLeftTimeSecondsAtom)).toBe(0);
+	});
+
+	test("gamingLeftTimeSecondsAtom clamps to duration before start", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+		store.set(setCurrentTimestampAtom);
+		store.set(setGameStartedAtAtom, now + 60);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gamingLeftTimeSecondsAtom)).toBe(300);
+	});
+
+	test("statusAtom returns 'running' when submitting code", () => {
+		const store = createStore();
+		store.set(handleSubmitCodePreAtom);
+		expect(store.get(statusAtom)).toBe("running");
+	});
+
+	test("statusAtom returns raw status when not submitting", () => {
+		const store = createStore();
+		expect(store.get(statusAtom)).toBe("none");
+	});
+
+	test("handleSubmitCodePostAtom resets submitting state", () => {
+		const store = createStore();
+		store.set(handleSubmitCodePreAtom);
+		expect(store.get(statusAtom)).toBe("running");
+		store.set(handleSubmitCodePostAtom);
+		expect(store.get(statusAtom)).toBe("none");
+	});
+
+	test("setLatestGameStateAtom updates status and score", () => {
+		const store = createStore();
+		store.set(setLatestGameStateAtom, {
+			code: "",
+			status: "success",
+			score: 42,
+			best_score_submitted_at: null,
+		});
+		expect(store.get(statusAtom)).toBe("success");
+		expect(store.get(scoreAtom)).toBe(42);
+	});
+
+	test("scoreAtom returns null initially", () => {
+		const store = createStore();
+		expect(store.get(scoreAtom)).toBeNull();
+	});
+});
diff --git a/frontend/app/states/watch.test.ts b/frontend/app/states/watch.test.ts
new file mode 100644
index 0000000..dae1cb9
--- /dev/null
+++ b/frontend/app/states/watch.test.ts
@@ -0,0 +1,206 @@
+import { createStore } from "jotai";
+import { describe, expect, test } from "vitest";
+import {
+	calcCodeSize,
+	checkGameResultKind,
+	gameStateKindAtom,
+	gamingLeftTimeSecondsAtom,
+	latestGameStatesAtom,
+	rankingAtom,
+	setCurrentTimestampAtom,
+	setDurationSecondsAtom,
+	setGameStartedAtAtom,
+	setLatestGameStatesAtom,
+	startingLeftTimeSecondsAtom,
+} from "./watch";
+
+describe("checkGameResultKind", () => {
+	test("returns null when game is not finished", () => {
+		expect(checkGameResultKind("gaming", null, null)).toBeNull();
+		expect(checkGameResultKind("waiting", null, null)).toBeNull();
+		expect(checkGameResultKind("starting", null, null)).toBeNull();
+		expect(checkGameResultKind("loading", null, null)).toBeNull();
+	});
+
+	test("returns draw when both scores are null", () => {
+		expect(checkGameResultKind("finished", null, null)).toBe("draw");
+	});
+
+	test("returns draw when both states have null scores", () => {
+		const stateA = {
+			code: "",
+			status: "none" as const,
+			score: null,
+			best_score_submitted_at: null,
+		};
+		const stateB = {
+			code: "",
+			status: "none" as const,
+			score: null,
+			best_score_submitted_at: null,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("draw");
+	});
+
+	test("returns winB when only A has null score", () => {
+		const stateA = {
+			code: "",
+			status: "none" as const,
+			score: null,
+			best_score_submitted_at: null,
+		};
+		const stateB = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winB");
+	});
+
+	test("returns winA when only B has null score", () => {
+		const stateA = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		const stateB = {
+			code: "",
+			status: "none" as const,
+			score: null,
+			best_score_submitted_at: null,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winA");
+	});
+
+	test("returns winA when A has lower score (code golf)", () => {
+		const stateA = {
+			code: "a",
+			status: "success" as const,
+			score: 5,
+			best_score_submitted_at: 1000,
+		};
+		const stateB = {
+			code: "abcdefghij",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winA");
+	});
+
+	test("returns winB when B has lower score (code golf)", () => {
+		const stateA = {
+			code: "abcdefghij",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		const stateB = {
+			code: "a",
+			status: "success" as const,
+			score: 5,
+			best_score_submitted_at: 1000,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winB");
+	});
+
+	test("breaks tie by earlier submission time - A wins", () => {
+		const stateA = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		const stateB = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1060,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winA");
+	});
+
+	test("breaks tie by earlier submission time - B wins", () => {
+		const stateA = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1060,
+		};
+		const stateB = {
+			code: "echo 1;",
+			status: "success" as const,
+			score: 10,
+			best_score_submitted_at: 1000,
+		};
+		expect(checkGameResultKind("finished", stateA, stateB)).toBe("winB");
+	});
+});
+
+describe("watch calcCodeSize", () => {
+	test("works the same as play calcCodeSize", () => {
+		expect(calcCodeSize("<?php echo 1;", "php")).toBe(6);
+		expect(calcCodeSize("print(1)", "swift")).toBe(8);
+	});
+});
+
+describe("watch Jotai atoms", () => {
+	test("gameStateKindAtom returns 'loading' initially", () => {
+		const store = createStore();
+		expect(store.get(gameStateKindAtom)).toBe("loading");
+	});
+
+	test("gameStateKindAtom transitions through states correctly", () => {
+		const store = createStore();
+		const now = Math.floor(Date.now() / 1000);
+
+		store.set(setCurrentTimestampAtom);
+		expect(store.get(gameStateKindAtom)).toBe("waiting");
+
+		store.set(setGameStartedAtAtom, now + 60);
+		store.set(setDurationSecondsAtom, 300);
+		expect(store.get(gameStateKindAtom)).toBe("starting");
+
+		store.set(setGameStartedAtAtom, now - 10);
+		expect(store.get(gameStateKindAtom)).toBe("gaming");
+
+		store.set(setGameStartedAtAtom, now - 400);
+		expect(store.get(gameStateKindAtom)).toBe("finished");
+	});
+
+	test("rankingAtom is empty initially", () => {
+		const store = createStore();
+		expect(store.get(rankingAtom)).toEqual([]);
+	});
+
+	test("latestGameStatesAtom is empty initially", () => {
+		const store = createStore();
+		expect(store.get(latestGameStatesAtom)).toEqual({});
+	});
+
+	test("setLatestGameStatesAtom updates states", () => {
+		const store = createStore();
+		const states = {
+			player1: {
+				code: "echo 1;",
+				status: "success" as const,
+				score: 10,
+				best_score_submitted_at: 1000,
+			},
+		};
+		store.set(setLatestGameStatesAtom, states);
+		expect(store.get(latestGameStatesAtom)).toEqual(states);
+	});
+
+	test("startingLeftTimeSecondsAtom returns null initially", () => {
+		const store = createStore();
+		expect(store.get(startingLeftTimeSecondsAtom)).toBeNull();
+	});
+
+	test("gamingLeftTimeSecondsAtom returns null initially", () => {
+		const store = createStore();
+		expect(store.get(gamingLeftTimeSecondsAtom)).toBeNull();
+	});
+});