@reqord/web 0.1.0

package/src/__tests__/components/graph/issue-node.test.tsx

@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { IssueNode } from "../../../components/graph/issue-node";
+
+// Mock @xyflow/react Handle and Position
+vi.mock("@xyflow/react", () => ({
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+const defaultNodeProps = {
+  selected: false,
+  dragging: false,
+  draggable: true,
+  selectable: true,
+  deletable: false,
+  zIndex: 0,
+  isConnectable: true,
+  positionAbsoluteX: 0,
+  positionAbsoluteY: 0,
+};
+
+describe("IssueNode", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders issue number text", () => {
+    render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    expect(screen.getByText("Issue #123")).toBeInTheDocument();
+  });
+
+  it("renders open status with yellow background class", () => {
+    const { container } = render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-yellow-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders closed status with green background class", () => {
+    const { container } = render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-124"
+        data={{
+          label: "Issue #124",
+          status: "closed",
+          issueNumber: 124,
+          issueUrl: "https://github.com/test/repo/issues/124",
+        }}
+        type="issue"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-green-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders in_progress status with blue background class", () => {
+    const { container } = render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-125"
+        data={{
+          label: "Issue #125",
+          status: "in_progress",
+          issueNumber: 125,
+          issueUrl: "https://github.com/test/repo/issues/125",
+        }}
+        type="issue"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-blue-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders status badge", () => {
+    render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    expect(screen.getByText("open")).toBeInTheDocument();
+  });
+
+  it("renders only target handle", () => {
+    render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    expect(screen.getByTestId("handle-target")).toBeInTheDocument();
+    expect(screen.queryByTestId("handle-source")).not.toBeInTheDocument();
+  });
+
+  it("opens issue URL in new tab when clicked", () => {
+    const windowOpenSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+
+    render(
+      <IssueNode
+        {...defaultNodeProps}
+        id="issue-spec-000001-123"
+        data={{
+          label: "Issue #123",
+          status: "open",
+          issueNumber: 123,
+          issueUrl: "https://github.com/test/repo/issues/123",
+        }}
+        type="issue"
+      />
+    );
+
+    const node = screen.getByText("Issue #123").closest("div");
+    if (node) {
+      fireEvent.click(node);
+    }
+
+    expect(windowOpenSpy).toHaveBeenCalledWith(
+      "https://github.com/test/repo/issues/123",
+      "_blank",
+      "noopener,noreferrer"
+    );
+
+    windowOpenSpy.mockRestore();
+  });
+});

package/src/__tests__/components/graph/requirement-node.test.tsx

@@ -0,0 +1,151 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { RequirementNode } from "../../../components/graph/requirement-node";
+
+const mockPush = vi.fn();
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+// Mock @xyflow/react Handle and Position
+vi.mock("@xyflow/react", () => ({
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+describe("RequirementNode", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  const baseProps = {
+    id: "req-000001",
+    type: "requirement" as const,
+    selected: false,
+    dragging: false,
+    draggable: true,
+    selectable: true,
+    deletable: false,
+    zIndex: 0,
+    isConnectable: true,
+    positionAbsoluteX: 0,
+    positionAbsoluteY: 0,
+    data: {
+      label: "User Login",
+      status: "draft",
+      priority: "medium",
+      specCount: 3,
+    },
+  };
+
+  describe("drill down button visibility", () => {
+    it("shows drill down button when onDrillDown is defined and specCount > 0", () => {
+      const onDrillDown = vi.fn();
+
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 3, onDrillDown }}
+        />
+      );
+
+      expect(screen.getByRole("button", { name: /3 specs/i })).toBeInTheDocument();
+    });
+
+    it("does NOT show drill down button when onDrillDown is undefined", () => {
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 3 }}
+        />
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("does NOT show drill down button when specCount is 0", () => {
+      const onDrillDown = vi.fn();
+
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 0, onDrillDown }}
+        />
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("drill down button interaction", () => {
+    it("calls onDrillDown with node id when button is clicked", () => {
+      const onDrillDown = vi.fn();
+
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 2, onDrillDown }}
+        />
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: /2 specs/i }));
+
+      expect(onDrillDown).toHaveBeenCalledWith("req-000001");
+    });
+
+    it("does NOT trigger parent onClick when button is clicked", () => {
+      const onDrillDown = vi.fn();
+
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 2, onDrillDown }}
+        />
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: /2 specs/i }));
+
+      // router.push should not be called - button stopPropagation prevents it
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("body click navigation", () => {
+    it("calls router.push with requirement path when body is clicked", () => {
+      render(<RequirementNode {...baseProps} />);
+
+      // Click the node ID text area (part of the body, not button)
+      fireEvent.click(screen.getByText("req-000001"));
+
+      expect(mockPush).toHaveBeenCalledWith("/requirements/req-000001");
+    });
+  });
+
+  describe("rendering", () => {
+    it("renders node id and label", () => {
+      render(<RequirementNode {...baseProps} />);
+
+      expect(screen.getByText("req-000001")).toBeInTheDocument();
+      expect(screen.getByText("User Login")).toBeInTheDocument();
+    });
+
+    it("shows singular 'spec' for specCount of 1", () => {
+      const onDrillDown = vi.fn();
+
+      render(
+        <RequirementNode
+          {...baseProps}
+          data={{ ...baseProps.data, specCount: 1, onDrillDown }}
+        />
+      );
+
+      expect(screen.getByRole("button", { name: /1 spec$/i })).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/components/graph/specification-node.test.tsx

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { SpecificationNode } from "../../../components/graph/specification-node";
+
+// Mock @xyflow/react Handle and Position
+vi.mock("@xyflow/react", () => ({
+  Handle: ({ type }: any) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: "left", Right: "right", Top: "top", Bottom: "bottom" },
+}));
+
+const defaultNodeProps = {
+  selected: false,
+  dragging: false,
+  draggable: true,
+  selectable: true,
+  deletable: false,
+  zIndex: 0,
+  isConnectable: true,
+  positionAbsoluteX: 0,
+  positionAbsoluteY: 0,
+};
+
+describe("SpecificationNode", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders spec ID text", () => {
+    render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000001"
+        data={{ label: "spec-000001", status: "draft" }}
+        type="specification"
+      />
+    );
+
+    expect(screen.getByText("spec-000001")).toBeInTheDocument();
+  });
+
+  it("renders draft status with blue background class", () => {
+    const { container } = render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000001"
+        data={{ label: "spec-000001", status: "draft" }}
+        type="specification"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-blue-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders approved status with green background class", () => {
+    const { container } = render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000002"
+        data={{ label: "spec-000002", status: "approved" }}
+        type="specification"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-green-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders implemented status with emerald background class", () => {
+    const { container } = render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000003"
+        data={{ label: "spec-000003", status: "implemented" }}
+        type="specification"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-emerald-300");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders implemented status with emerald background class", () => {
+    const { container } = render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000004"
+        data={{ label: "spec-000004", status: "implemented" }}
+        type="specification"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-emerald-300");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders deprecated status with red background class", () => {
+    const { container } = render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000005"
+        data={{ label: "spec-000005", status: "deprecated" }}
+        type="specification"
+      />
+    );
+
+    const nodeDiv = container.querySelector(".bg-red-200");
+    expect(nodeDiv).toBeInTheDocument();
+  });
+
+  it("renders status badge", () => {
+    render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000001"
+        data={{ label: "spec-000001", status: "draft" }}
+        type="specification"
+      />
+    );
+
+    expect(screen.getByText("draft")).toBeInTheDocument();
+  });
+
+  it("renders both target and source handles", () => {
+    render(
+      <SpecificationNode
+        {...defaultNodeProps}
+        id="spec-000001"
+        data={{ label: "spec-000001", status: "draft" }}
+        type="specification"
+      />
+    );
+
+    expect(screen.getByTestId("handle-target")).toBeInTheDocument();
+    expect(screen.getByTestId("handle-source")).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/specification/spec-tabs.test.tsx

@@ -0,0 +1,153 @@
+// @vitest-environment jsdom
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { SpecTabs } from "../../../components/specification/spec-tabs";
+
+// Mock child components
+vi.mock("../../../components/specification/tab-design", () => ({
+  TabDesign: ({ content }: { content: string | null }) => (
+    <div data-testid="tab-design">Design: {content ?? "null"}</div>
+  ),
+}));
+
+vi.mock("../../../components/specification/tab-research", () => ({
+  TabResearch: ({ content }: { content: string | null }) => (
+    <div data-testid="tab-research">Research: {content ?? "null"}</div>
+  ),
+}));
+
+vi.mock("../../../components/specification/tab-coverage", () => ({
+  TabCoverage: ({ successCriteria }: { successCriteria: string[] | null }) => (
+    <div data-testid="tab-coverage">Coverage: {successCriteria?.length ?? 0} criteria</div>
+  ),
+}));
+
+vi.mock("../../../components/specification/tab-issues", () => ({
+  TabIssues: ({ issues }: { issues: any[] | null }) => (
+    <div data-testid="tab-issues">Issues: {issues?.length ?? 0} issues</div>
+  ),
+}));
+
+vi.mock("../../../components/specification/tab-history", () => ({
+  TabHistory: ({ versionHistory }: { versionHistory: any[] }) => (
+    <div data-testid="tab-history">History: {versionHistory.length} versions</div>
+  ),
+}));
+
+vi.mock("../../../components/ui/tabs", () => ({
+  Tabs: ({ tabs, activeTab, onTabChange }: any) => (
+    <div data-testid="tabs-container">
+      {tabs.map((tab: any) => (
+        <button
+          key={tab.id}
+          data-testid={`tab-button-${tab.id}`}
+          data-active={activeTab === tab.id}
+          onClick={() => onTabChange(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+describe("SpecTabs", () => {
+  afterEach(() => {
+    cleanup();
+    // Reset URL hash
+    if (typeof window !== "undefined") {
+      window.location.hash = "";
+    }
+  });
+
+  it("defaults to design tab", () => {
+    render(
+      <SpecTabs
+        design="# Design"
+        research="# Research"
+        successCriteria={[]}
+        issues={[]}
+        versionHistory={[]}
+      />
+    );
+
+    const designButton = screen.getByTestId("tab-button-design");
+    expect(designButton).toHaveAttribute("data-active", "true");
+    expect(screen.getByTestId("tab-design")).toBeInTheDocument();
+  });
+
+  it("changes active tab when tab button is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <SpecTabs
+        design="# Design"
+        research="# Research"
+        successCriteria={[]}
+        issues={[]}
+        versionHistory={[]}
+      />
+    );
+
+    const researchButton = screen.getByTestId("tab-button-research");
+    await user.click(researchButton);
+
+    expect(researchButton).toHaveAttribute("data-active", "true");
+    expect(screen.getByTestId("tab-research")).toBeInTheDocument();
+  });
+
+  it("passes design content to TabDesign", () => {
+    render(
+      <SpecTabs
+        design="# Design content"
+        research={null}
+        successCriteria={[]}
+        issues={[]}
+        versionHistory={[]}
+      />
+    );
+
+    // Design tab should be active by default
+    const designTab = screen.getByTestId("tab-design");
+    expect(designTab).toBeInTheDocument();
+    expect(designTab).toHaveTextContent("Design: # Design content");
+  });
+
+  it("passes research content to TabResearch", async () => {
+    const user = userEvent.setup();
+    render(
+      <SpecTabs
+        design={null}
+        research="# Research content"
+        successCriteria={[]}
+        issues={[]}
+        versionHistory={[]}
+      />
+    );
+
+    await user.click(screen.getByTestId("tab-button-research"));
+
+    expect(screen.getByText("Research: # Research content")).toBeInTheDocument();
+  });
+
+  it("handles null content for both tabs", async () => {
+    const user = userEvent.setup();
+    render(<SpecTabs design={null} research={null} successCriteria={[]} issues={[]} versionHistory={[]} />);
+
+    // Design tab shown by default
+    expect(screen.getByTestId("tab-design")).toHaveTextContent("Design: null");
+
+    // Switch to research tab
+    await user.click(screen.getByTestId("tab-button-research"));
+    expect(screen.getByTestId("tab-research")).toHaveTextContent("Research: null");
+  });
+
+  it("renders both Design and Research tab labels", () => {
+    render(<SpecTabs design={null} research={null} successCriteria={[]} issues={[]} versionHistory={[]} />);
+
+    expect(screen.getByTestId("tab-button-design")).toHaveTextContent("Design");
+    expect(screen.getByTestId("tab-button-research")).toHaveTextContent("Research");
+  });
+});

package/src/__tests__/components/specification/tab-coverage.test.tsx

@@ -0,0 +1,70 @@
+// @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 { TabCoverage } from "../../../components/specification/tab-coverage";
+
+describe("TabCoverage", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders table with correct number of rows when successCriteria is provided", () => {
+    const criteria = [
+      "User can login with email and password",
+      "System validates input fields",
+      "Error messages are displayed on failure",
+    ];
+
+    render(<TabCoverage successCriteria={criteria} />);
+
+    // Check for table headers
+    expect(screen.getByText("#")).toBeInTheDocument();
+    expect(screen.getByText("Criteria")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+
+    // Check for all criteria rows
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("User can login with email and password")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("System validates input fields")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText("Error messages are displayed on failure")).toBeInTheDocument();
+  });
+
+  it("shows empty state when successCriteria is null", () => {
+    render(<TabCoverage successCriteria={null} />);
+
+    expect(screen.getByText("No success criteria available")).toBeInTheDocument();
+    expect(screen.queryByText("#")).not.toBeInTheDocument();
+  });
+
+  it("shows empty state when successCriteria is empty array", () => {
+    render(<TabCoverage successCriteria={[]} />);
+
+    expect(screen.getByText("No success criteria available")).toBeInTheDocument();
+    expect(screen.queryByText("#")).not.toBeInTheDocument();
+  });
+
+  it("each criterion shows Unchecked status", () => {
+    const criteria = ["Criterion 1", "Criterion 2"];
+
+    render(<TabCoverage successCriteria={criteria} />);
+
+    const uncheckedStatuses = screen.getAllByText("Unchecked");
+    expect(uncheckedStatuses).toHaveLength(2);
+  });
+
+  it("renders striped table rows with even rows having gray background", () => {
+    const criteria = ["First", "Second", "Third"];
+
+    const { container } = render(<TabCoverage successCriteria={criteria} />);
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows).toHaveLength(3);
+
+    // Check that even rows (index 1) have bg-gray-50
+    expect(rows[1].className).toContain("bg-gray-50");
+  });
+});