@reqord/web 0.1.0

package/src/__tests__/components/feedback/feedback-list.test.tsx

@@ -0,0 +1,49 @@
+// @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 type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackList } from "../../../components/feedback/feedback-list";
+
+const baseFeedback: FeedbackEntry = {
+  githubIssue: 42,
+  type: "bug",
+  severity: "high",
+  status: "open",
+  linkedTo: {
+    requirements: [],
+    createdRequirements: [],
+    specifications: [],
+    createdSpecifications: [],
+  },
+  syncedAt: "2026-01-15T10:00:00Z",
+};
+
+describe("FeedbackList", () => {
+  afterEach(() => cleanup());
+
+  it("feedbacks空: 何も表示されない", () => {
+    const { container } = render(<FeedbackList feedbacks={[]} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("titleがある場合はtitleが表示される", () => {
+    const fb: FeedbackEntry = { ...baseFeedback, title: "Login fails on Safari" };
+    render(<FeedbackList feedbacks={[fb]} />);
+
+    expect(screen.getByTestId("feedback-title")).toHaveTextContent("Login fails on Safari");
+  });
+
+  it("titleがundefinedの場合はtitleが表示されない", () => {
+    render(<FeedbackList feedbacks={[baseFeedback]} />);
+
+    expect(screen.queryByTestId("feedback-title")).toBeNull();
+  });
+
+  it("Issue番号が表示される", () => {
+    render(<FeedbackList feedbacks={[baseFeedback]} />);
+
+    expect(screen.getByTestId("feedback-issue")).toHaveTextContent("#42");
+  });
+});

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

@@ -0,0 +1,165 @@
+// @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 type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackTable } from "../../../components/feedback/feedback-table";
+
+const baseFeedback: FeedbackEntry = {
+  githubIssue: 42,
+  type: "bug",
+  severity: "high",
+  status: "open",
+  linkedTo: {
+    requirements: ["req-000001"],
+    createdRequirements: [],
+    specifications: [],
+    createdSpecifications: [],
+  },
+  syncedAt: "2026-01-15T10:00:00Z",
+};
+
+const reqTitles: Record<string, string> = { "req-000001": "認証" };
+const specTitles: Record<string, string> = {};
+
+describe("FeedbackTable", () => {
+  afterEach(() => cleanup());
+
+  it("feedbacks空: empty メッセージが表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+    expect(screen.getByTestId("feedback-empty")).toBeInTheDocument();
+  });
+
+  it("feedbacks配列に基づく行数の正確性", () => {
+    const feedbacks: FeedbackEntry[] = [
+      baseFeedback,
+      { ...baseFeedback, githubIssue: 43, type: "improvement", severity: "medium" },
+      { ...baseFeedback, githubIssue: 44, type: "security", severity: "critical" },
+    ];
+    render(
+      <FeedbackTable
+        feedbacks={feedbacks}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getAllByTestId("feedback-row")).toHaveLength(3);
+  });
+
+  it("Issue番号が表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getByTestId("feedback-issue")).toHaveTextContent("#42");
+  });
+
+  it("タイプバッジにbug用の色クラスが適用される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const badge = screen.getByTestId("feedback-type-badge");
+    expect(badge).toHaveTextContent("bug");
+    expect(badge).toHaveClass("bg-red-100");
+  });
+
+  it("severityバッジが表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const badge = screen.getByTestId("feedback-severity-badge");
+    expect(badge).toHaveTextContent("high");
+    expect(badge).toHaveClass("bg-orange-500");
+  });
+
+  it("statusバッジが表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    const badge = screen.getByTestId("feedback-status-badge");
+    expect(badge).toHaveTextContent("open");
+    expect(badge).toHaveClass("bg-green-100");
+  });
+
+  it("type/severityがundefinedの場合はバッジが表示されない", () => {
+    const fb: FeedbackEntry = {
+      ...baseFeedback,
+      type: undefined,
+      severity: undefined,
+    };
+    render(
+      <FeedbackTable
+        feedbacks={[fb]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.queryByTestId("feedback-type-badge")).toBeNull();
+    expect(screen.queryByTestId("feedback-severity-badge")).toBeNull();
+  });
+
+  it("titleがある場合はtitleが表示される", () => {
+    const fb: FeedbackEntry = { ...baseFeedback, title: "Login button broken" };
+    render(
+      <FeedbackTable
+        feedbacks={[fb]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getByTestId("feedback-title")).toHaveTextContent("Login button broken");
+  });
+
+  it("titleがundefinedの場合は'-'が表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getByTestId("feedback-title")).toHaveTextContent("-");
+  });
+
+  it("関連Req/Specリンクが表示される", () => {
+    render(
+      <FeedbackTable
+        feedbacks={[baseFeedback]}
+        requirementTitles={reqTitles}
+        specificationTitles={specTitles}
+      />,
+    );
+
+    expect(screen.getByTestId("linked-requirement")).toHaveTextContent("認証");
+  });
+});

package/src/__tests__/components/flags/flag-badge.test.tsx

@@ -0,0 +1,41 @@
+// @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 { FeedbackBadge } from "../../../components/feedback/feedback-badge";
+
+describe("FeedbackBadge", () => {
+  afterEach(() => cleanup());
+
+  it("bugタイプにred色クラスが適用される", () => {
+    render(<FeedbackBadge type="bug" />);
+    const badge = screen.getByTestId("feedback-badge-bug");
+    expect(badge).toHaveClass("bg-red-100");
+    expect(badge).toHaveTextContent("Bug");
+  });
+
+  it("improvementタイプにblue色クラスが適用される", () => {
+    render(<FeedbackBadge type="improvement" />);
+    const badge = screen.getByTestId("feedback-badge-improvement");
+    expect(badge).toHaveClass("bg-blue-100");
+    expect(badge).toHaveTextContent("Improvement");
+  });
+
+  it("spec-mismatchタイプにpurple色クラスが適用される", () => {
+    render(<FeedbackBadge type="spec-mismatch" />);
+    const badge = screen.getByTestId("feedback-badge-spec-mismatch");
+    expect(badge).toHaveClass("bg-purple-100");
+    expect(badge).toHaveTextContent("Spec Mismatch");
+  });
+
+  it("severity propsがある場合のみseverityバッジが表示される", () => {
+    render(<FeedbackBadge type="bug" severity="high" />);
+    expect(screen.getByTestId("feedback-severity")).toHaveTextContent("high");
+  });
+
+  it("severity propsがない場合はseverityバッジが表示されない", () => {
+    render(<FeedbackBadge type="bug" />);
+    expect(screen.queryByTestId("feedback-severity")).toBeNull();
+  });
+});

package/src/__tests__/components/flags/flag-list.test.tsx

@@ -0,0 +1,51 @@
+// @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 type { FeedbackEntry } from "@reqord/shared";
+import { FeedbackList } from "../../../components/feedback/feedback-list";
+
+const makeFeedback = (overrides: Partial<FeedbackEntry> = {}): FeedbackEntry => ({
+  githubIssue: 1,
+  type: "bug",
+  severity: "high",
+  linkedTo: {
+    requirements: [],
+    createdRequirements: [],
+    specifications: ["spec-000001"],
+    createdSpecifications: [],
+  },
+  syncedAt: "2026-01-01T00:00:00Z",
+  status: "open",
+  ...overrides,
+});
+
+describe("FeedbackList", () => {
+  afterEach(() => cleanup());
+
+  it("feedbacks空配列: 何も表示されない", () => {
+    const { container } = render(<FeedbackList feedbacks={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("feedbackエントリ: githubIssueとseverityバッジが表示される", () => {
+    render(<FeedbackList feedbacks={[makeFeedback({ githubIssue: 42, severity: "high" })]} />);
+
+    expect(screen.getByTestId("feedback-list")).toBeInTheDocument();
+    expect(screen.getByTestId("feedback-severity")).toHaveTextContent("high");
+    expect(screen.getByTestId("feedback-issue")).toHaveTextContent("#42");
+  });
+
+  it("複数feedback: 全件表示される", () => {
+    const feedbacks: FeedbackEntry[] = [
+      makeFeedback({ githubIssue: 1, type: "bug" }),
+      makeFeedback({ githubIssue: 2, type: "improvement" }),
+      makeFeedback({ githubIssue: 3, type: "security" }),
+    ];
+    render(<FeedbackList feedbacks={feedbacks} />);
+
+    const items = screen.getAllByTestId("feedback-item");
+    expect(items).toHaveLength(3);
+  });
+});

package/src/__tests__/components/gantt/gantt-bar.test.tsx

@@ -0,0 +1,190 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { GanttBar } from "@/components/gantt/gantt-bar";
+import type { GanttTask } from "@/lib/gantt-data";
+
+describe("GanttBar", () => {
+  const mockTask: GanttTask = {
+    id: "1",
+    title: "Test Task",
+    issueNumber: 123,
+    issueUrl: "https://github.com/test/repo/issues/123",
+    priority: "P0",
+    state: "open",
+    estimatedHours: 4,
+    startOffset: 0,
+    dependencies: [],
+    isCriticalPath: false,
+  };
+
+  it("renders closed state with green color", () => {
+    const task = { ...mockTask, state: "closed" };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("fill", "#22c55e");
+  });
+
+  it("renders in_progress state with blue color", () => {
+    const task = { ...mockTask, state: "in_progress" };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("fill", "#3b82f6");
+  });
+
+  it("renders blocked state with red color", () => {
+    const task = { ...mockTask, state: "blocked" };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("fill", "#ef4444");
+  });
+
+  it("renders open state with gray color", () => {
+    const task = { ...mockTask, state: "open" };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("fill", "#9ca3af");
+  });
+
+  it("renders bar with correct width based on estimatedHours", () => {
+    const task = { ...mockTask, estimatedHours: 8 };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("width", "480"); // 8 * 60
+  });
+
+  it("renders bar with correct x position based on startOffset", () => {
+    const task = { ...mockTask, startOffset: 4, estimatedHours: 4 };
+    const { container } = render(
+      <svg>
+        <GanttBar task={task} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("x", "440"); // 4 * 60 + 200
+  });
+
+  it("renders bar with correct y position", () => {
+    const { container } = render(
+      <svg>
+        <GanttBar task={mockTask} y={100} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("y", "100");
+  });
+
+  it("renders bar with correct height", () => {
+    const { container } = render(
+      <svg>
+        <GanttBar task={mockTask} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const rect = container.querySelector("rect");
+    expect(rect).toHaveAttribute("height", "24"); // BAR_HEIGHT constant
+  });
+
+  it("calls onHover with task on mouse enter", () => {
+    const onHover = vi.fn();
+    const { container } = render(
+      <svg>
+        <GanttBar
+          task={mockTask}
+          y={0}
+          hourWidth={60}
+          leftLabelWidth={200}
+          onHover={onHover}
+        />
+      </svg>
+    );
+
+    const group = container.querySelector("g");
+    if (group) {
+      fireEvent.mouseEnter(group);
+    }
+    expect(onHover).toHaveBeenCalledWith(mockTask);
+  });
+
+  it("calls onHover with null on mouse leave", () => {
+    const onHover = vi.fn();
+    const { container } = render(
+      <svg>
+        <GanttBar
+          task={mockTask}
+          y={0}
+          hourWidth={60}
+          leftLabelWidth={200}
+          onHover={onHover}
+        />
+      </svg>
+    );
+
+    const group = container.querySelector("g");
+    if (group) {
+      fireEvent.mouseLeave(group);
+    }
+    expect(onHover).toHaveBeenCalledWith(null);
+  });
+
+  it("calls onClick with task when clicked", () => {
+    const onClick = vi.fn();
+    const { container } = render(
+      <svg>
+        <GanttBar
+          task={mockTask}
+          y={0}
+          hourWidth={60}
+          leftLabelWidth={200}
+          onClick={onClick}
+        />
+      </svg>
+    );
+
+    const group = container.querySelector("g");
+    if (group) {
+      fireEvent.click(group);
+    }
+    expect(onClick).toHaveBeenCalledWith(mockTask);
+  });
+
+  it("renders task title as text", () => {
+    const { container } = render(
+      <svg>
+        <GanttBar task={mockTask} y={0} hourWidth={60} leftLabelWidth={200} />
+      </svg>
+    );
+
+    const text = container.querySelector("text");
+    expect(text).toHaveTextContent("Test Task");
+  });
+});

package/src/__tests__/components/gantt/gantt-chart.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { GanttChart } from "@/components/gantt/gantt-chart";
+import type { GanttData } from "@/lib/gantt-data";
+
+describe("GanttChart", () => {
+  const mockData: GanttData = {
+    specId: "spec-000001",
+    groups: [
+      {
+        priority: "P0",
+        label: "P0: Sequential",
+        tasks: [
+          {
+            id: "1",
+            title: "Task 1",
+            issueNumber: 100,
+            issueUrl: "https://github.com/test/repo/issues/100",
+            priority: "P0",
+            state: "closed",
+            estimatedHours: 4,
+            startOffset: 0,
+            dependencies: [],
+            isCriticalPath: true,
+          },
+          {
+            id: "2",
+            title: "Task 2",
+            issueNumber: 101,
+            issueUrl: "https://github.com/test/repo/issues/101",
+            priority: "P0",
+            state: "in_progress",
+            estimatedHours: 4,
+            startOffset: 4,
+            dependencies: [100],
+            isCriticalPath: true,
+          },
+        ],
+      },
+      {
+        priority: "P1",
+        label: "P1: Parallel",
+        tasks: [
+          {
+            id: "3",
+            title: "Task 3",
+            issueNumber: 102,
+            issueUrl: "https://github.com/test/repo/issues/102",
+            priority: "P1",
+            state: "open",
+            estimatedHours: 4,
+            startOffset: 8,
+            dependencies: [],
+            isCriticalPath: false,
+          },
+        ],
+      },
+    ],
+    totalEstimatedHours: 12,
+    timelineStart: 0,
+    timelineEnd: 12,
+  };
+
+  it("renders SVG element", () => {
+    const { container } = render(<GanttChart data={mockData} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  it("renders correct number of task bars", () => {
+    const { container } = render(<GanttChart data={mockData} />);
+    const rects = container.querySelectorAll("rect");
+    // Each task has a rect, plus group headers
+    expect(rects.length).toBeGreaterThanOrEqual(3); // 3 tasks minimum
+  });
+
+  it("renders group labels", () => {
+    render(<GanttChart data={mockData} />);
+    const labels = screen.getAllByText("P0: Sequential");
+    expect(labels.length).toBeGreaterThanOrEqual(1);
+    const p1Labels = screen.getAllByText("P1: Parallel");
+    expect(p1Labels.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders legend component", () => {
+    render(<GanttChart data={mockData} />);
+    const completed = screen.getAllByText("Completed");
+    expect(completed.length).toBeGreaterThanOrEqual(1);
+    const inProgress = screen.getAllByText("In Progress");
+    expect(inProgress.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders empty chart when no groups", () => {
+    const emptyData: GanttData = {
+      specId: "spec-000001",
+      groups: [],
+      totalEstimatedHours: 0,
+      timelineStart: 0,
+      timelineEnd: 0,
+    };
+
+    const { container } = render(<GanttChart data={emptyData} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  it("handles single task", () => {
+    const singleTaskData: GanttData = {
+      specId: "spec-000001",
+      groups: [
+        {
+          priority: "P0",
+          label: "P0: Sequential",
+          tasks: [
+            {
+              id: "1",
+              title: "Only Task",
+              issueNumber: 100,
+              issueUrl: "https://github.com/test/repo/issues/100",
+              priority: "P0",
+              state: "open",
+              estimatedHours: 4,
+              startOffset: 0,
+              dependencies: [],
+              isCriticalPath: true,
+            },
+          ],
+        },
+      ],
+      totalEstimatedHours: 4,
+      timelineStart: 0,
+      timelineEnd: 4,
+    };
+
+    render(<GanttChart data={singleTaskData} />);
+    expect(screen.getByText("Only Task")).toBeInTheDocument();
+  });
+});