@reqord/web 0.1.0 → 0.3.0

package/src/__tests__/components/requirement/requirement-table.test.tsx

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { RequirementTable } from "../../../components/requirement/requirement-table";
+import type { Requirement } from "@reqord/shared";
+
+vi.mock("next/link", () => ({
+  default: ({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) => (
+    <a href={href} className={className}>{children}</a>
+  ),
+}));
+
+const makeReq = (id: string, overrides: Partial<Requirement> = {}): Requirement => ({
+  id,
+  title: `Requirement ${id}`,
+  status: "draft",
+  priority: "medium",
+  estimatedComplexity: "small",
+  version: "1.0",
+  format: { type: "user-story", userStory: { as: "user", iWant: "feature", soThat: "benefit" } },
+  updatedAt: "2026-01-01T00:00:00Z",
+  createdAt: "2026-01-01T00:00:00Z",
+  dependencies: { blockedBy: [], blocks: [], relatedTo: [] },
+  files: { description: "description.md", supplementary: [] },
+  successCriteria: [],
+  versionHistory: [],
+  ...overrides,
+});
+
+const requirements: Requirement[] = [
+  makeReq("req-000001", { status: "approved", priority: "high" }),
+  makeReq("req-000002", { status: "implemented", priority: "low" }),
+  makeReq("req-000003", { status: "draft", priority: "medium" }),
+];
+
+describe("RequirementTable - ソートヘッダのアクセシビリティ", () => {
+  afterEach(() => cleanup());
+
+  it("ソートボタンがbutton要素として描画される（キーボード操作可能）", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const sortButtons = screen.getAllByRole("button");
+    expect(sortButtons.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it("アクティブなソート列のthにaria-sort='ascending'が設定される", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const idHeader = screen.getByRole("columnheader", { name: /id/i });
+    expect(idHeader).toHaveAttribute("aria-sort", "ascending");
+  });
+
+  it("ソートボタンクリックで降順になるとthのaria-sort='descending'になる", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const idButton = screen.getByRole("button", { name: /id/i });
+    fireEvent.click(idButton);
+
+    const idHeader = screen.getByRole("columnheader", { name: /id/i });
+    expect(idHeader).toHaveAttribute("aria-sort", "descending");
+  });
+
+  it("非アクティブな列のthにaria-sort属性がない", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const titleHeader = screen.getByRole("columnheader", { name: /title/i });
+    expect(titleHeader).not.toHaveAttribute("aria-sort");
+  });
+
+  it("Enterキーでソートが実行できる", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const titleButton = screen.getByRole("button", { name: /title/i });
+    fireEvent.keyDown(titleButton, { key: "Enter", code: "Enter" });
+    fireEvent.click(titleButton);
+
+    const titleHeader = screen.getByRole("columnheader", { name: /title/i });
+    expect(titleHeader).toHaveAttribute("aria-sort", "ascending");
+  });
+});
+
+describe("RequirementTable - フォーム要素のアクセシビリティ", () => {
+  afterEach(() => cleanup());
+
+  it("検索inputにaria-labelが設定されている", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const searchInput = screen.getByRole("textbox");
+    expect(searchInput).toHaveAttribute("aria-label");
+  });
+
+  it("ステータスselectにaria-labelが設定されている", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const selects = screen.getAllByRole("combobox");
+    const statusSelect = selects.find(s =>
+      s.getAttribute("aria-label")?.toLowerCase().includes("status")
+    );
+    expect(statusSelect).toBeDefined();
+  });
+
+  it("プライオリティselectにaria-labelが設定されている", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const selects = screen.getAllByRole("combobox");
+    const prioritySelect = selects.find(s =>
+      s.getAttribute("aria-label")?.toLowerCase().includes("priority")
+    );
+    expect(prioritySelect).toBeDefined();
+  });
+});
+
+describe("RequirementTable - 空状態UI", () => {
+  afterEach(() => cleanup());
+
+  it("フィルタ結果が0件のとき空状態UIが表示される", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    expect(screen.getByText("No requirements found")).toBeInTheDocument();
+  });
+
+  it("フィルタ適用中に空状態UIのリセットボタンが表示される", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    expect(screen.getByText("Clear all filters")).toBeInTheDocument();
+  });
+
+  it("リセットボタンクリックでフィルタが解除され全件表示に戻る", () => {
+    render(<RequirementTable requirements={requirements} />);
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    const clearButton = screen.getByText("Clear all filters");
+    fireEvent.click(clearButton);
+
+    expect(screen.queryByText("No requirements found")).not.toBeInTheDocument();
+    expect(screen.getByText("Requirement req-000001")).toBeInTheDocument();
+  });
+
+  it("フィルタなし・0件の場合はリセットボタンが表示されない", () => {
+    render(<RequirementTable requirements={[]} />);
+
+    expect(screen.queryByText("Clear all filters")).not.toBeInTheDocument();
+  });
+});
+
+describe("RequirementTable - テーブル可読性", () => {
+  afterEach(() => cleanup());
+
+  it("テーブルヘッダにborder-b-2クラスが適用されている", () => {
+    const { container } = render(<RequirementTable requirements={requirements} />);
+
+    const thead = container.querySelector("thead");
+    expect(thead).toHaveClass("border-b-2");
+  });
+});

package/src/__tests__/components/specification/specification-table.test.tsx

@@ -0,0 +1,189 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { SpecificationTable } from "../../../components/specification/specification-table";
+import type { Specification } from "@reqord/shared";
+
+vi.mock("next/link", () => ({
+  default: ({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) => (
+    <a href={href} className={className}>{children}</a>
+  ),
+}));
+
+const makeSpec = (id: string, overrides: Partial<Specification> = {}): Specification => ({
+  id,
+  requirementId: "req-000001",
+  title: `Specification ${id}`,
+  status: "draft",
+  version: "1.0",
+  updatedAt: "2026-01-01T00:00:00Z",
+  createdAt: "2026-01-01T00:00:00Z",
+  files: { design: "design.md", supplementary: [] },
+  versionHistory: [],
+  ...overrides,
+});
+
+const specifications: Specification[] = [
+  makeSpec("spec-000001", { status: "approved", requirementId: "req-000001" }),
+  makeSpec("spec-000002", { status: "implemented", requirementId: "req-000002" }),
+  makeSpec("spec-000003", { status: "draft", requirementId: "req-000001" }),
+];
+
+const requirementTitleMap: Record<string, string> = {
+  "req-000001": "Auth Requirement",
+  "req-000002": "Dashboard Requirement",
+};
+
+describe("SpecificationTable - ソートヘッダのアクセシビリティ", () => {
+  afterEach(() => cleanup());
+
+  it("ソートボタンがbutton要素として描画される（キーボード操作可能）", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const sortButtons = screen.getAllByRole("button");
+    expect(sortButtons.length).toBeGreaterThanOrEqual(6);
+  });
+
+  it("アクティブなソート列のthにaria-sort='ascending'が設定される", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const idHeader = screen.getByRole("columnheader", { name: /id/i });
+    expect(idHeader).toHaveAttribute("aria-sort", "ascending");
+  });
+
+  it("ソートボタンクリックで降順になるとthのaria-sort='descending'になる", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const idButton = screen.getByRole("button", { name: /id/i });
+    fireEvent.click(idButton);
+
+    const idHeader = screen.getByRole("columnheader", { name: /id/i });
+    expect(idHeader).toHaveAttribute("aria-sort", "descending");
+  });
+
+  it("非アクティブな列のthにaria-sort属性がない", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const titleHeader = screen.getByRole("columnheader", { name: /title/i });
+    expect(titleHeader).not.toHaveAttribute("aria-sort");
+  });
+});
+
+describe("SpecificationTable - フォーム要素のアクセシビリティ", () => {
+  afterEach(() => cleanup());
+
+  it("検索inputにaria-labelが設定されている", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const searchInput = screen.getByRole("textbox");
+    expect(searchInput).toHaveAttribute("aria-label");
+  });
+
+  it("ステータスselectにaria-labelが設定されている", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const selects = screen.getAllByRole("combobox");
+    const statusSelect = selects.find(s =>
+      s.getAttribute("aria-label")?.toLowerCase().includes("status")
+    );
+    expect(statusSelect).toBeDefined();
+  });
+});
+
+describe("SpecificationTable - 空状態UI", () => {
+  afterEach(() => cleanup());
+
+  it("フィルタ結果が0件のとき空状態UIが表示される", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    expect(screen.getByText("No specifications found")).toBeInTheDocument();
+  });
+
+  it("フィルタ適用中に空状態UIのリセットボタンが表示される", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    expect(screen.getByText("Clear all filters")).toBeInTheDocument();
+  });
+
+  it("リセットボタンクリックでフィルタが解除され全件表示に戻る", () => {
+    render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const searchInput = screen.getByRole("textbox");
+    fireEvent.change(searchInput, { target: { value: "nonexistent-xyz-abc" } });
+
+    const clearButton = screen.getByText("Clear all filters");
+    fireEvent.click(clearButton);
+
+    expect(screen.queryByText("No specifications found")).not.toBeInTheDocument();
+    expect(screen.getByText("Specification spec-000001")).toBeInTheDocument();
+  });
+});
+
+describe("SpecificationTable - テーブル可読性", () => {
+  afterEach(() => cleanup());
+
+  it("テーブルヘッダにborder-b-2クラスが適用されている", () => {
+    const { container } = render(
+      <SpecificationTable
+        specifications={specifications}
+        requirementTitleMap={requirementTitleMap}
+      />
+    );
+
+    const thead = container.querySelector("thead");
+    expect(thead).toHaveClass("border-b-2");
+  });
+});

package/src/__tests__/components/ui/badge.test.tsx

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { StatusBadge, PriorityBadge, ComplexityBadge } from "../../../components/ui/badge";
+
+describe("StatusBadge", () => {
+  afterEach(() => cleanup());
+
+  it("draftステータスに正しいクラスが適用される", () => {
+    const { container } = render(<StatusBadge status="draft" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Draft");
+    expect(badge.className).toContain("bg-gray-100");
+    expect(badge.className).toContain("text-gray-600");
+  });
+
+  it("approvedステータスにblue系クラスが適用される", () => {
+    const { container } = render(<StatusBadge status="approved" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Approved");
+    expect(badge.className).toContain("bg-blue-50");
+    expect(badge.className).toContain("text-blue-700");
+  });
+
+  it("implementedステータスにemerald系クラスが適用される", () => {
+    const { container } = render(<StatusBadge status="implemented" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Implemented");
+    expect(badge.className).toContain("bg-emerald-50");
+    expect(badge.className).toContain("text-emerald-700");
+  });
+
+  it("deprecatedステータスにred系クラスが適用される", () => {
+    const { container } = render(<StatusBadge status="deprecated" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Deprecated");
+    expect(badge.className).toContain("bg-red-50");
+    expect(badge.className).toContain("text-red-700");
+  });
+
+  it("ring-1 ring-insetクラスで輪郭が明確化されている", () => {
+    const { container } = render(<StatusBadge status="draft" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge.className).toContain("ring-1");
+    expect(badge.className).toContain("ring-inset");
+  });
+});
+
+describe("PriorityBadge", () => {
+  afterEach(() => cleanup());
+
+  it("highプライオリティに正しいクラスが適用される", () => {
+    const { container } = render(<PriorityBadge priority="high" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("High");
+    expect(badge.className).toContain("bg-red-100");
+  });
+
+  it("mediumプライオリティに正しいクラスが適用される", () => {
+    const { container } = render(<PriorityBadge priority="medium" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Medium");
+    expect(badge.className).toContain("bg-orange-100");
+  });
+
+  it("lowプライオリティに正しいクラスが適用される", () => {
+    const { container } = render(<PriorityBadge priority="low" />);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveTextContent("Low");
+    expect(badge.className).toContain("bg-blue-100");
+  });
+});
+
+describe("ComplexityBadge", () => {
+  afterEach(() => cleanup());
+
+  it("smallに正しいラベルが表示される", () => {
+    render(<ComplexityBadge complexity="small" />);
+    expect(screen.getByText("S")).toBeInTheDocument();
+  });
+
+  it("mediumに正しいラベルが表示される", () => {
+    render(<ComplexityBadge complexity="medium" />);
+    expect(screen.getByText("M")).toBeInTheDocument();
+  });
+
+  it("largeに正しいラベルが表示される", () => {
+    render(<ComplexityBadge complexity="large" />);
+    expect(screen.getByText("L")).toBeInTheDocument();
+  });
+
+  it("xlargeに正しいラベルが表示される", () => {
+    render(<ComplexityBadge complexity="xlarge" />);
+    expect(screen.getByText("XL")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/ui/button.test.tsx

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { Button } from "../../../components/ui/button";
+
+describe("Button", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("variant", () => {
+    it("renders primary variant with warm-800 background by default", () => {
+      render(<Button>Click me</Button>);
+
+      const button = screen.getByRole("button", { name: "Click me" });
+      expect(button).toHaveClass("bg-warm-800");
+      expect(button).toHaveClass("text-white");
+    });
+
+    it("renders secondary variant with gray outline", () => {
+      render(<Button variant="secondary">Secondary</Button>);
+
+      const button = screen.getByRole("button", { name: "Secondary" });
+      expect(button).toHaveClass("border");
+      expect(button).toHaveClass("border-warm-300");
+      expect(button).toHaveClass("bg-white");
+      expect(button).toHaveClass("text-warm-700");
+    });
+
+    it("renders danger variant with red background", () => {
+      render(<Button variant="danger">Delete</Button>);
+
+      const button = screen.getByRole("button", { name: "Delete" });
+      expect(button).toHaveClass("bg-accent");
+      expect(button).toHaveClass("text-white");
+    });
+
+    it("renders ghost variant with transparent background", () => {
+      render(<Button variant="ghost">Ghost</Button>);
+
+      const button = screen.getByRole("button", { name: "Ghost" });
+      expect(button).toHaveClass("text-warm-700");
+      expect(button).not.toHaveClass("bg-warm-800");
+      expect(button).not.toHaveClass("bg-white");
+    });
+  });
+
+  describe("size", () => {
+    it("renders md size by default", () => {
+      render(<Button>Medium</Button>);
+
+      const button = screen.getByRole("button", { name: "Medium" });
+      expect(button).toHaveClass("px-4");
+      expect(button).toHaveClass("py-2");
+      expect(button).toHaveClass("text-sm");
+    });
+
+    it("renders sm size with smaller padding", () => {
+      render(<Button size="sm">Small</Button>);
+
+      const button = screen.getByRole("button", { name: "Small" });
+      expect(button).toHaveClass("px-3");
+      expect(button).toHaveClass("py-1.5");
+      expect(button).toHaveClass("text-xs");
+    });
+
+    it("renders lg size with larger padding", () => {
+      render(<Button size="lg">Large</Button>);
+
+      const button = screen.getByRole("button", { name: "Large" });
+      expect(button).toHaveClass("px-6");
+      expect(button).toHaveClass("py-3");
+      expect(button).toHaveClass("text-base");
+    });
+  });
+
+  it("passes additional className prop", () => {
+    render(<Button className="custom-class">Click</Button>);
+
+    const button = screen.getByRole("button", { name: "Click" });
+    expect(button).toHaveClass("custom-class");
+  });
+
+  it("passes native button props like disabled", () => {
+    render(<Button disabled>Disabled</Button>);
+
+    const button = screen.getByRole("button", { name: "Disabled" });
+    expect(button).toBeDisabled();
+  });
+
+  it("renders children correctly", () => {
+    render(<Button>Submit</Button>);
+
+    expect(screen.getByText("Submit")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/ui/card.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { Card } from "../../../components/ui/card";
+
+describe("Card", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders children correctly", () => {
+    render(<Card>Card content</Card>);
+
+    expect(screen.getByText("Card content")).toBeInTheDocument();
+  });
+
+  it("renders default variant with standard styles", () => {
+    render(<Card data-testid="card">Content</Card>);
+
+    const card = screen.getByTestId("card");
+    expect(card).toHaveClass("rounded-xl");
+    expect(card).toHaveClass("border");
+    expect(card).toHaveClass("border-warm-200");
+    expect(card).toHaveClass("bg-white");
+    expect(card).toHaveClass("p-6");
+    expect(card).toHaveClass("shadow-sm");
+  });
+
+  it("renders hero variant with gradient background", () => {
+    render(<Card variant="hero" data-testid="hero-card">Hero content</Card>);
+
+    const card = screen.getByTestId("hero-card");
+    expect(card).toHaveClass("bg-warm-100");
+  });
+
+  it("hero variant does not apply bg-white", () => {
+    render(<Card variant="hero" data-testid="hero-card">Hero content</Card>);
+
+    const card = screen.getByTestId("hero-card");
+    expect(card).not.toHaveClass("bg-white");
+  });
+
+  it("passes additional className prop", () => {
+    render(<Card className="custom-class" data-testid="card">Content</Card>);
+
+    const card = screen.getByTestId("card");
+    expect(card).toHaveClass("custom-class");
+  });
+
+  it("renders as a div element", () => {
+    render(<Card data-testid="card">Content</Card>);
+
+    const card = screen.getByTestId("card");
+    expect(card.tagName).toBe("DIV");
+  });
+});