8 files changed, 374 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");
+	});
+});