@runfusion/fusion 0.25.0 → 0.27.0

package/dist/plugins/fusion-plugin-roadmap/src/dashboard/__tests__/RoadmapsView.test.tsx

@@ -1,1144 +0,0 @@
-/* @vitest-environment jsdom */
-import React from "react";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { RoadmapsView } from "../RoadmapsView";
-import * as api from "../api";
-import type {
-  Roadmap,
-  RoadmapMilestone,
-  RoadmapFeature,
-  RoadmapWithHierarchy,
-} from "../../roadmap-types";
-
-// Mock the API module
-vi.mock("../api", () => ({
-  fetchRoadmaps: vi.fn(),
-  fetchRoadmap: vi.fn(),
-  createRoadmap: vi.fn(),
-  updateRoadmap: vi.fn(),
-  deleteRoadmap: vi.fn(),
-  createRoadmapMilestone: vi.fn(),
-  updateRoadmapMilestone: vi.fn(),
-  deleteRoadmapMilestone: vi.fn(),
-  createRoadmapFeature: vi.fn(),
-  updateRoadmapFeature: vi.fn(),
-  deleteRoadmapFeature: vi.fn(),
-  reorderRoadmapMilestones: vi.fn(),
-  reorderRoadmapFeatures: vi.fn(),
-  moveRoadmapFeature: vi.fn(),
-  generateFeatureSuggestions: vi.fn(),
-  generateMilestoneSuggestions: vi.fn(),
-}));
-
-// Mock lucide-react icons
-const mockConfirm = vi.fn();
-
-vi.mock("../useConfirm", () => ({
-  useConfirm: () => ({ confirm: mockConfirm }),
-}));
-
-vi.mock("lucide-react", () => ({
-  Plus: ({ size, ...props }: { size?: number }) => (
-    <svg data-testid="plus-icon" {...props}>{`Plus ${size || 16}`}</svg>
-  ),
-  Pencil: (props: Record<string, unknown>) => <span data-testid="pencil-icon" {...props}>Edit</span>,
-  Trash2: (props: Record<string, unknown>) => <span data-testid="trash-icon" {...props}>Delete</span>,
-  Check: (props: Record<string, unknown>) => <span data-testid="check-icon" {...props}>Check</span>,
-  X: (props: Record<string, unknown>) => <span data-testid="x-icon" {...props}>X</span>,
-  GripVertical: (props: Record<string, unknown>) => <span data-testid="grip-icon" {...props}>Grip</span>,
-  Sparkles: (props: Record<string, unknown>) => <span data-testid="sparkles-icon" {...props}>Sparkles</span>,
-  Download: (props: Record<string, unknown>) => <span data-testid="download-icon" {...props}>Download</span>,
-  Copy: (props: Record<string, unknown>) => <span data-testid="copy-icon" {...props}>Copy</span>,
-  Loader: (props: Record<string, unknown>) => <span data-testid="loader-icon" {...props}>Loader</span>,
-  ArrowLeft: (props: Record<string, unknown>) => <span data-testid="arrow-left-icon" {...props}>ArrowLeft</span>,
-  ChevronLeft: (props: Record<string, unknown>) => <span data-testid="chevron-left-icon" {...props}>ChevronLeft</span>,
-  ChevronUp: (props: Record<string, unknown>) => <span data-testid="chevron-up-icon" {...props}>ChevronUp</span>,
-}));
-
-// Viewport mode mock helper
-function mockViewport(mode: "mobile" | "desktop") {
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    value: vi.fn().mockImplementation((query: string) => {
-      const isMobileQuery = query === "(max-width: 768px)";
-      const isTabletQuery = query === "(min-width: 769px) and (max-width: 1024px)";
-      return {
-        matches: mode === "mobile" ? isMobileQuery : false,
-        media: query,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      };
-    }),
-  });
-}
-
-const mockRoadmaps: Roadmap[] = [
-  {
-    id: "RM-001",
-    title: "Q2 Roadmap",
-    description: "Q2 product roadmap",
-    createdAt: "2026-01-01T00:00:00.000Z",
-    updatedAt: "2026-01-01T00:00:00.000Z",
-  },
-  {
-    id: "RM-002",
-    title: "Q3 Roadmap",
-    description: "Q3 product roadmap",
-    createdAt: "2026-01-02T00:00:00.000Z",
-    updatedAt: "2026-01-02T00:00:00.000Z",
-  },
-];
-
-const mockRoadmapHierarchy: RoadmapWithHierarchy = {
-  id: "RM-001",
-  title: "Q2 Roadmap",
-  description: "Q2 product roadmap",
-  createdAt: "2026-01-01T00:00:00.000Z",
-  updatedAt: "2026-01-01T00:00:00.000Z",
-  milestones: [
-    {
-      id: "RMS-001",
-      roadmapId: "RM-001",
-      title: "Milestone 1",
-      description: "First milestone",
-      orderIndex: 0,
-      createdAt: "2026-01-01T00:00:00.000Z",
-      updatedAt: "2026-01-01T00:00:00.000Z",
-      features: [
-        {
-          id: "RF-001",
-          milestoneId: "RMS-001",
-          title: "Feature 1",
-          description: "First feature",
-          orderIndex: 0,
-          createdAt: "2026-01-01T00:00:00.000Z",
-          updatedAt: "2026-01-01T00:00:00.000Z",
-        },
-      ],
-    },
-    {
-      id: "RMS-002",
-      roadmapId: "RM-001",
-      title: "Milestone 2",
-      description: "Second milestone",
-      orderIndex: 1,
-      createdAt: "2026-01-01T00:00:00.000Z",
-      updatedAt: "2026-01-01T00:00:00.000Z",
-      features: [],
-    },
-  ],
-};
-
-const mockAddToast = vi.fn();
-
-describe("RoadmapsView", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockConfirm.mockReset();
-    mockConfirm.mockResolvedValue(true);
-    mockViewport("desktop");
-    (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue(mockRoadmaps);
-    (api.fetchRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(mockRoadmapHierarchy);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("renders roadmap list in sidebar", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-    expect(screen.getByText("Q3 Roadmap")).toBeInTheDocument();
-    expect(screen.getByText("Roadmaps")).toBeInTheDocument();
-  });
-
-  it("shows empty state when no roadmaps exist", async () => {
-    (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue([]);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("No roadmaps yet. Click + to create one.")).toBeInTheDocument();
-    });
-  });
-
-  it("shows loading state initially", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    expect(screen.getByText("Loading roadmaps...")).toBeInTheDocument();
-  });
-
-  it("selects a roadmap and shows its content", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
-    });
-
-    // Should show milestones
-    expect(screen.getByText("Milestone 1")).toBeInTheDocument();
-    expect(screen.getByText("Milestone 2")).toBeInTheDocument();
-  });
-
-  it("creates a new roadmap", async () => {
-    const newRoadmap = {
-      id: "RM-003",
-      title: "New Roadmap",
-      createdAt: "2026-01-03T00:00:00.000Z",
-      updatedAt: "2026-01-03T00:00:00.000Z",
-    };
-    (api.createRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(newRoadmap);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    // Click create button
-    const createBtn = screen.getByTestId("create-roadmap-btn");
-    fireEvent.click(createBtn);
-
-    // Fill in the form
-    const titleInput = screen.getByTestId("create-roadmap-title");
-    await userEvent.type(titleInput, "New Roadmap");
-
-    // Submit
-    const submitBtn = screen.getByTestId("create-roadmap-submit");
-    fireEvent.click(submitBtn);
-
-    await waitFor(() => {
-      expect(api.createRoadmap).toHaveBeenCalledWith(
-        { title: "New Roadmap" },
-        undefined
-      );
-      expect(mockAddToast).toHaveBeenCalledWith("Roadmap created", "success");
-    });
-  });
-
-  it("renders inline edit inputs with current values for milestone and feature", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("roadmap-item-RM-001"));
-
-    await waitFor(() => {
-      expect(screen.getByText("Milestone 1")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("milestone-edit-RMS-001"));
-
-    const milestoneTitleInput = await screen.findByTestId("milestone-title-input-RMS-001");
-    expect(milestoneTitleInput).toHaveValue("Milestone 1");
-
-    fireEvent.click(screen.getByTestId("feature-edit-RF-001"));
-
-    const featureTitleInput = await screen.findByTestId("feature-title-input-RF-001");
-    expect(featureTitleInput).toHaveValue("Feature 1");
-  });
-
-  it("edits a roadmap title inline", async () => {
-    (api.updateRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue({
-      ...mockRoadmaps[0],
-      title: "Updated Title",
-    });
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    // Select the roadmap first
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
-    });
-
-    // Click edit button
-    const editBtn = screen.getByTestId("edit-roadmap-btn");
-    fireEvent.click(editBtn);
-
-    // Should show input field
-    const titleInput = screen.getByTestId("roadmap-title-input");
-    expect(titleInput).toBeInTheDocument();
-
-    // Type new title
-    await userEvent.clear(titleInput);
-    await userEvent.type(titleInput, "Updated Title");
-
-    // Save
-    fireEvent.keyDown(titleInput, { key: "Enter" });
-
-    await waitFor(() => {
-      expect(api.updateRoadmap).toHaveBeenCalledWith("RM-001", { title: "Updated Title" }, undefined);
-    });
-  });
-
-  it("deletes a roadmap after confirmation", async () => {
-    (api.deleteRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    // Select the roadmap first
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("delete-roadmap-btn")).toBeInTheDocument();
-    });
-
-    // Click delete button
-    const deleteBtn = screen.getByTestId("delete-roadmap-btn");
-    fireEvent.click(deleteBtn);
-
-    await waitFor(() => {
-      expect(mockConfirm).toHaveBeenCalledWith({
-        title: "Delete Roadmap",
-        message: "Delete this roadmap? This cannot be undone.",
-        danger: true,
-      });
-      expect(api.deleteRoadmap).toHaveBeenCalledWith("RM-001", undefined);
-      expect(mockAddToast).toHaveBeenCalledWith("Roadmap deleted", "success");
-    });
-  });
-
-  it("cancels roadmap deletion when not confirmed", async () => {
-    mockConfirm.mockResolvedValueOnce(false);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("delete-roadmap-btn")).toBeInTheDocument();
-    });
-
-    const deleteBtn = screen.getByTestId("delete-roadmap-btn");
-    fireEvent.click(deleteBtn);
-
-    expect(api.deleteRoadmap).not.toHaveBeenCalled();
-  });
-
-  it("shows empty milestones state", async () => {
-    const emptyHierarchy: RoadmapWithHierarchy = {
-      ...mockRoadmapHierarchy,
-      milestones: [],
-    };
-    (api.fetchRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(emptyHierarchy);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByText("This roadmap has no milestones.")).toBeInTheDocument();
-    });
-  });
-
-  it("shows empty features state for a milestone", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByText("Milestone 2")).toBeInTheDocument();
-    });
-
-    // Milestone 2 has no features
-    const milestone2 = screen.getByTestId("add-feature-RMS-002").closest(".roadmaps-view__milestone");
-    expect(milestone2?.textContent).toContain("No features yet.");
-  });
-
-  it("creates a milestone", async () => {
-    const newMilestone: RoadmapMilestone = {
-      id: "RMS-003",
-      roadmapId: "RM-001",
-      title: "New Milestone",
-      orderIndex: 2,
-      createdAt: "2026-01-03T00:00:00.000Z",
-      updatedAt: "2026-01-03T00:00:00.000Z",
-    };
-    (api.createRoadmapMilestone as ReturnType<typeof vi.fn>).mockResolvedValue(newMilestone);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-milestone-btn")).toBeInTheDocument();
-    });
-
-    // Click add milestone button
-    const addBtn = screen.getByTestId("add-milestone-btn");
-    fireEvent.click(addBtn);
-
-    // Fill in the form
-    const titleInput = screen.getByTestId("create-milestone-title");
-    await userEvent.type(titleInput, "New Milestone");
-
-    // Submit
-    const submitBtn = screen.getByTestId("create-milestone-submit");
-    fireEvent.click(submitBtn);
-
-    await waitFor(() => {
-      expect(api.createRoadmapMilestone).toHaveBeenCalledWith("RM-001", { title: "New Milestone" }, undefined);
-      expect(mockAddToast).toHaveBeenCalledWith("Milestone created", "success");
-    });
-  });
-
-  it("deletes a milestone after confirmation", async () => {
-    (api.deleteRoadmapMilestone as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("milestone-delete-RMS-001")).toBeInTheDocument();
-    });
-
-    const deleteBtn = screen.getByTestId("milestone-delete-RMS-001");
-    fireEvent.click(deleteBtn);
-
-    await waitFor(() => {
-      expect(mockConfirm).toHaveBeenCalledWith({
-        title: "Delete Milestone",
-        message: "Delete this milestone and all its features?",
-        danger: true,
-      });
-      expect(api.deleteRoadmapMilestone).toHaveBeenCalledWith("RMS-001", undefined);
-      expect(mockAddToast).toHaveBeenCalledWith("Milestone deleted", "success");
-    });
-  });
-
-  it("creates a feature in a milestone", async () => {
-    const newFeature: RoadmapFeature = {
-      id: "RF-002",
-      milestoneId: "RMS-001",
-      title: "New Feature",
-      orderIndex: 1,
-      createdAt: "2026-01-03T00:00:00.000Z",
-      updatedAt: "2026-01-03T00:00:00.000Z",
-    };
-    (api.createRoadmapFeature as ReturnType<typeof vi.fn>).mockResolvedValue(newFeature);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-feature-RMS-001")).toBeInTheDocument();
-    });
-
-    // Click add feature button
-    const addBtn = screen.getByTestId("add-feature-RMS-001");
-    fireEvent.click(addBtn);
-
-    // Fill in the form
-    const titleInput = screen.getByTestId("create-feature-title");
-    await userEvent.type(titleInput, "New Feature");
-
-    // Submit
-    const submitBtn = screen.getByTestId("create-feature-submit");
-    fireEvent.click(submitBtn);
-
-    await waitFor(() => {
-      expect(api.createRoadmapFeature).toHaveBeenCalledWith("RMS-001", { title: "New Feature" }, undefined);
-      expect(mockAddToast).toHaveBeenCalledWith("Feature created", "success");
-    });
-  });
-
-  it("deletes a feature after confirmation", async () => {
-    (api.deleteRoadmapFeature as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
-
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("feature-delete-RF-001")).toBeInTheDocument();
-    });
-
-    // Hover over feature to show actions
-    const featureItem = screen.getByTestId("feature-delete-RF-001").closest(".roadmaps-view__feature-item");
-    fireEvent.mouseEnter(featureItem!);
-
-    const deleteBtn = screen.getByTestId("feature-delete-RF-001");
-    fireEvent.click(deleteBtn);
-
-    await waitFor(() => {
-      expect(mockConfirm).toHaveBeenCalledWith({
-        title: "Delete Feature",
-        message: "Delete this feature?",
-        danger: true,
-      });
-      expect(api.deleteRoadmapFeature).toHaveBeenCalledWith("RF-001", undefined);
-      expect(mockAddToast).toHaveBeenCalledWith("Feature deleted", "success");
-    });
-  });
-
-  it("cancels inline edit on Escape", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-    fireEvent.click(roadmapItem);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
-    });
-
-    // Start editing
-    const editBtn = screen.getByTestId("edit-roadmap-btn");
-    fireEvent.click(editBtn);
-
-    const titleInput = screen.getByTestId("roadmap-title-input");
-    expect(titleInput).toBeInTheDocument();
-
-    // Type something
-    await userEvent.type(titleInput, "Changed");
-
-    // Cancel with Escape
-    fireEvent.keyDown(titleInput, { key: "Escape" });
-
-    // Edit should be cancelled
-    await waitFor(() => {
-      expect(screen.queryByTestId("roadmap-title-input")).not.toBeInTheDocument();
-    });
-    expect(api.updateRoadmap).not.toHaveBeenCalled();
-  });
-
-  it("shows empty main state when no roadmap selected", async () => {
-    render(<RoadmapsView addToast={mockAddToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-    });
-
-    expect(screen.getByText("Select a roadmap from the sidebar to view its milestones.")).toBeInTheDocument();
-  });
-
-  describe("Feature suggestions", () => {
-    it("shows AI Suggestions button when roadmap is selected", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      // Wait for roadmap to load
-      await waitFor(() => {
-        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-      fireEvent.click(roadmapItem);
-
-      // Wait for milestone to load and button to appear
-      await waitFor(() => {
-        expect(screen.getByTestId("generate-features-RMS-001")).toBeInTheDocument();
-      }, { timeout: 3000 });
-    });
-  });
-
-  describe("Suggestion editing", () => {
-    it("can edit milestone suggestion before accepting", async () => {
-      // Mock milestone suggestion generation
-      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
-        suggestions: [
-          { title: "Original Title", description: "Original description" },
-        ],
-      });
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-      fireEvent.click(roadmapItem);
-
-      // Wait for roadmap to load
-      await waitFor(() => {
-        expect(screen.getByText("Generate Milestone Ideas")).toBeInTheDocument();
-      });
-
-      // Generate suggestions
-      const goalInput = screen.getByTestId("goal-prompt-input");
-      await userEvent.type(goalInput, "Build an app");
-
-      const generateBtn = screen.getByTestId("generate-suggestions-btn");
-      fireEvent.click(generateBtn);
-
-      // Wait for suggestion to appear
-      await waitFor(() => {
-        expect(screen.getByText("Original Title")).toBeInTheDocument();
-      });
-
-      // This test verifies the suggestion appears after generation
-      expect(screen.getByText("Original Title")).toBeInTheDocument();
-    });
-
-    it("can edit feature suggestion before accepting", async () => {
-      // Mock feature suggestion generation
-      (api.generateFeatureSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
-        suggestions: [
-          { title: "Feature Suggestion", description: "Feature description" },
-        ],
-      });
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-      fireEvent.click(roadmapItem);
-
-      // Wait for milestone to load
-      await waitFor(() => {
-        expect(screen.getByTestId("generate-features-RMS-001")).toBeInTheDocument();
-      });
-
-      // Generate feature suggestions
-      const suggestBtn = screen.getByTestId("generate-features-RMS-001");
-      fireEvent.click(suggestBtn);
-
-      // Wait for suggestion to appear
-      await waitFor(() => {
-        expect(screen.getByText("Feature Suggestion")).toBeInTheDocument();
-      });
-
-      // Verify the suggestion card is rendered
-      expect(screen.getByText("Feature Suggestion")).toBeInTheDocument();
-      expect(screen.getByText("Feature description")).toBeInTheDocument();
-    });
-
-    it("shows edit button on suggestion cards", async () => {
-      // Mock milestone suggestion generation
-      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
-        suggestions: [
-          { title: "Test Milestone" },
-        ],
-      });
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
-      fireEvent.click(roadmapItem);
-
-      // Generate suggestions
-      const goalInput = screen.getByTestId("goal-prompt-input");
-      await userEvent.type(goalInput, "Build something");
-
-      const generateBtn = screen.getByTestId("generate-suggestions-btn");
-      fireEvent.click(generateBtn);
-
-      // Wait for suggestion to appear
-      await waitFor(() => {
-        expect(screen.getByText("Test Milestone")).toBeInTheDocument();
-      });
-
-      // Look for edit button - it should have data-testid
-      // The edit button is a pencil icon with testId like "suggestion-{id}-edit"
-      const editButtons = screen.queryAllByRole("button", { name: /edit/i });
-      expect(editButtons.length).toBeGreaterThan(0);
-    });
-
-    it("sidebar edit pencil selects the roadmap and shows inline edit", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      });
-
-      // No roadmap selected yet — main content shows empty state
-      expect(screen.getByText("Select a roadmap from the sidebar to view its milestones.")).toBeInTheDocument();
-
-      // Click the edit pencil on RM-001 in the sidebar
-      const editBtn = screen.getByTestId("roadmap-edit-RM-001");
-      fireEvent.click(editBtn);
-
-      // Roadmap should be selected and inline edit should appear
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmap-title-input")).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe("Mobile roadmap controls", () => {
-    beforeEach(() => {
-      mockViewport("mobile");
-    });
-
-    afterEach(() => {
-      mockViewport("desktop");
-    });
-
-    it("shows mobile roadmap list when no roadmap selected on mobile", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
-      });
-
-      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
-      expect(screen.getByText("Q3 Roadmap")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
-    });
-
-    it("shows mobile roadmap items when roadmaps exist on mobile", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      expect(screen.getByTestId("mobile-roadmap-item-RM-002")).toBeInTheDocument();
-    });
-
-    it("can select a roadmap from mobile list", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Click on a roadmap item
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Should show the mobile header with the roadmap title
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
-        expect(screen.getByText("Q2 Roadmap", { selector: ".roadmaps-view__mobile-header-title" })).toBeInTheDocument();
-      });
-    });
-
-    it("mobile back button deselects roadmap", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select a roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
-      });
-
-      // Click back button
-      fireEvent.click(screen.getByTestId("mobile-back-btn"));
-
-      // Should show mobile list again
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
-      });
-    });
-
-    it("mobile create button shows create form", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
-      });
-
-      // Click create button
-      fireEvent.click(screen.getByTestId("mobile-create-roadmap-btn"));
-
-      // Should show create form
-      await waitFor(() => {
-        expect(screen.getByTestId("create-roadmap-form")).toBeInTheDocument();
-        expect(screen.getByTestId("create-roadmap-title")).toBeInTheDocument();
-      });
-    });
-
-    it("mobile can create roadmap via form", async () => {
-      const newRoadmap = {
-        id: "RM-003",
-        title: "New Roadmap",
-        createdAt: "2026-01-03T00:00:00.000Z",
-        updatedAt: "2026-01-03T00:00:00.000Z",
-      };
-      (api.createRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(newRoadmap);
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
-      });
-
-      // Click create button
-      fireEvent.click(screen.getByTestId("mobile-create-roadmap-btn"));
-
-      // Fill in the form using userEvent for better React integration
-      await waitFor(() => {
-        const titleInput = screen.getByTestId("create-roadmap-title");
-        expect(titleInput).toBeInTheDocument();
-      });
-
-      const titleInput = screen.getByTestId("create-roadmap-title");
-      await userEvent.type(titleInput, "New Roadmap");
-
-      // Submit the form using fireEvent.submit
-      const form = screen.getByTestId("create-roadmap-form").querySelector("form");
-      expect(form).toBeTruthy();
-      fireEvent.submit(form!);
-
-      await waitFor(() => {
-        expect(api.createRoadmap).toHaveBeenCalledWith(
-          { title: "New Roadmap" },
-          undefined
-        );
-        expect(mockAddToast).toHaveBeenCalledWith("Roadmap created", "success");
-      });
-    });
-
-    it("mobile edit and delete buttons are visible on roadmap items", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Edit and delete buttons should be visible (not hidden behind hover on mobile)
-      expect(screen.getByTestId("mobile-roadmap-edit-RM-001")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-roadmap-delete-RM-001")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-roadmap-export-RM-001")).toBeInTheDocument();
-    });
-
-    it("shows empty state on mobile when no roadmaps", async () => {
-      (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue([]);
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
-      });
-
-      expect(screen.getByText("No roadmaps yet.")).toBeInTheDocument();
-      expect(screen.getByTestId("roadmaps-view__mobile-list").textContent).toContain("Create Roadmap");
-    });
-
-    it("mobile header shows action buttons when roadmap selected", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select a roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
-      });
-
-      // Action buttons should be visible in header
-      expect(screen.getByTestId("mobile-header-create-btn")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-header-edit-btn")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-header-delete-btn")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-back-btn")).toBeInTheDocument();
-    });
-
-    it("mobile edit pencil selects the roadmap and shows inline edit", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Click the edit pencil on RM-001 in mobile list
-      const editBtn = screen.getByTestId("mobile-roadmap-edit-RM-001");
-      fireEvent.click(editBtn);
-
-      // Should show the mobile header (roadmap selected) and inline edit
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
-        expect(screen.getByTestId("roadmap-title-input")).toBeInTheDocument();
-      });
-    });
-
-    it("mobile roadmap list has scrollable container structure", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
-      });
-
-      // The mobile list should have the scrollable container
-      const mobileList = screen.getByTestId("roadmaps-view__mobile-list");
-      expect(mobileList).toBeInTheDocument();
-
-      // The list items container should exist and be scrollable
-      const listItems = mobileList.querySelector(".roadmaps-view__mobile-list-items");
-      expect(listItems).toBeInTheDocument();
-    });
-
-    it("selecting roadmap on mobile shows detail view with header and milestone content", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Click on a roadmap item
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Should show the mobile header with back button
-      await waitFor(() => {
-        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
-        expect(screen.getByTestId("mobile-back-btn")).toBeInTheDocument();
-      });
-
-      // Should show milestone content
-      expect(screen.getByText("Milestone 1")).toBeInTheDocument();
-      expect(screen.getByText("Milestone 2")).toBeInTheDocument();
-    });
-  });
-
-  describe("Mobile suggestion panel collapse", () => {
-    beforeEach(() => {
-      mockViewport("mobile");
-    });
-
-    afterEach(() => {
-      vi.restoreAllMocks();
-    });
-
-    it("shows expand button instead of suggestion section on mobile", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // On mobile, should show the expand button instead of the goal prompt input
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
-    });
-
-    it("expands suggestion panel on mobile when button is clicked", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Expand the panel
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
-
-      // Panel should now be visible
-      await waitFor(() => {
-        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
-      });
-      expect(screen.queryByTestId("expand-suggestion-panel-btn")).not.toBeInTheDocument();
-    });
-
-    it("can collapse suggestion panel on mobile", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Expand the panel
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
-
-      // Wait for panel to expand
-      await waitFor(() => {
-        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
-      });
-
-      // Collapse the panel
-      fireEvent.click(screen.getByTestId("collapse-suggestion-panel-btn"));
-
-      // Panel should be hidden, expand button should be back
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
-    });
-
-    it("persists goal prompt and suggestions across collapse/expand on mobile", async () => {
-      // Mock milestone suggestion generation
-      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
-        suggestions: [
-          { title: "Persisted Milestone", description: "Persisted description" },
-        ],
-      });
-
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select roadmap
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Expand the panel
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
-
-      // Type into goal prompt
-      await waitFor(() => {
-        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
-      });
-      const goalInput = screen.getByTestId("goal-prompt-input");
-      await userEvent.type(goalInput, "Build an app");
-
-      // Generate suggestions
-      fireEvent.click(screen.getByTestId("generate-suggestions-btn"));
-
-      // Wait for suggestions to appear
-      await waitFor(() => {
-        expect(screen.getByText("Persisted Milestone")).toBeInTheDocument();
-      });
-
-      // Collapse the panel
-      fireEvent.click(screen.getByTestId("collapse-suggestion-panel-btn"));
-
-      // Wait for expand button to appear
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-
-      // Re-expand the panel
-      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
-
-      // Goal prompt and suggestions should persist
-      await waitFor(() => {
-        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
-      });
-      expect(screen.getByTestId("goal-prompt-input")).toHaveValue("Build an app");
-      expect(screen.getByText("Persisted Milestone")).toBeInTheDocument();
-    });
-
-    it("resets suggestion panel when switching roadmaps on mobile", async () => {
-      render(<RoadmapsView addToast={mockAddToast} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
-      });
-
-      // Select RM-001
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
-
-      // Expand the panel
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
-
-      await waitFor(() => {
-        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
-      });
-
-      // Go back to roadmap list
-      fireEvent.click(screen.getByTestId("mobile-back-btn"));
-
-      // Wait for list to appear
-      await waitFor(() => {
-        expect(screen.getByTestId("mobile-roadmap-item-RM-002")).toBeInTheDocument();
-      });
-
-      // Switch to RM-002
-      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-002"));
-
-      // Panel should be collapsed (expand button visible)
-      await waitFor(() => {
-        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
-      });
-      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
-    });
-  });
-});