feat(FN-936): add modal description persistence for re-entry
- Add modalPersistence hook for saving/restoring modal state (description, goal) via localStorage - Update PlanningModeModal to persist and restore description across re-opens - Update SubtaskBreakdownModal to persist and clear description on resume flow - Update MissionInterviewModal to clear goal after starting interview - Add unit tests for modalPersistence hook - Add integration tests for modal re-entry behavior across all three modals - Add changeset for published package patch bump
This commit is contained in:
gsxdsm
@@ -13,6 +13,11 @@ import {
|
||||
type MissionPlanFeature,
|
||||
type MissionWithHierarchy,
|
||||
} from "../api";
|
||||
import {
|
||||
saveMissionGoal,
|
||||
getMissionGoal,
|
||||
clearMissionGoal,
|
||||
} from "../hooks/modalPersistence";
|
||||
import {
|
||||
Target,
|
||||
X,
|
||||
@@ -90,17 +95,20 @@ export function MissionInterviewModal({
|
||||
try {
|
||||
const { sessionId } = await startMissionInterview(goal.trim(), projectId);
|
||||
currentSessionIdRef.current = sessionId;
|
||||
clearMissionGoal();
|
||||
|
||||
const connection = connectMissionInterviewStream(sessionId, projectId, {
|
||||
onThinking: (data) => {
|
||||
setStreamingOutput((prev) => prev + data);
|
||||
},
|
||||
onQuestion: (question) => {
|
||||
clearMissionGoal();
|
||||
setView({ type: "question", sessionId, question });
|
||||
setStreamingOutput("");
|
||||
setHasProgress(true);
|
||||
},
|
||||
onSummary: (summary) => {
|
||||
clearMissionGoal();
|
||||
setView({ type: "summary", sessionId, summary });
|
||||
setEditedSummary(summary);
|
||||
setStreamingOutput("");
|
||||
@@ -144,6 +152,12 @@ export function MissionInterviewModal({
|
||||
handleStartInterview(initialGoalProp);
|
||||
}, 0);
|
||||
return () => clearTimeout(timer);
|
||||
} else if (isOpen && !initialGoalProp && !hasAutoStartedRef.current && view.type === "initial") {
|
||||
// Check localStorage for persisted goal when no prop provided
|
||||
const persisted = getMissionGoal();
|
||||
if (persisted) {
|
||||
setMissionGoal(persisted);
|
||||
}
|
||||
}
|
||||
}, [isOpen, initialGoalProp, view.type, handleStartInterview]);
|
||||
|
||||
@@ -164,6 +178,7 @@ export function MissionInterviewModal({
|
||||
|
||||
if (session.status === "awaiting_input" && session.currentQuestion) {
|
||||
try {
|
||||
clearMissionGoal();
|
||||
const question = JSON.parse(session.currentQuestion) as import("@fusion/core").PlanningQuestion;
|
||||
currentSessionIdRef.current = session.id;
|
||||
setHasProgress(true);
|
||||
@@ -173,6 +188,7 @@ export function MissionInterviewModal({
|
||||
}
|
||||
} else if (session.status === "complete" && session.result) {
|
||||
try {
|
||||
clearMissionGoal();
|
||||
const summary = JSON.parse(session.result) as MissionPlanSummary;
|
||||
currentSessionIdRef.current = session.id;
|
||||
setHasProgress(true);
|
||||
@@ -194,10 +210,12 @@ export function MissionInterviewModal({
|
||||
setStreamingOutput((prev) => prev + data);
|
||||
},
|
||||
onQuestion: (question) => {
|
||||
clearMissionGoal();
|
||||
setView({ type: "question", sessionId: session.id, question });
|
||||
setStreamingOutput("");
|
||||
},
|
||||
onSummary: (summary) => {
|
||||
clearMissionGoal();
|
||||
setView({ type: "summary", sessionId: session.id, summary });
|
||||
setEditedSummary(summary);
|
||||
setStreamingOutput("");
|
||||
@@ -251,6 +269,11 @@ export function MissionInterviewModal({
|
||||
}, [isOpen, view]);
|
||||
|
||||
const handleCancel = useCallback(async () => {
|
||||
// Save to localStorage BEFORE any cleanup
|
||||
if (missionGoal) {
|
||||
saveMissionGoal(missionGoal);
|
||||
}
|
||||
|
||||
if (hasProgress) {
|
||||
if (!confirm("Are you sure you want to close? Your interview progress will be lost.")) {
|
||||
return;
|
||||
@@ -278,7 +301,7 @@ export function MissionInterviewModal({
|
||||
setIsCreating(false);
|
||||
currentSessionIdRef.current = null;
|
||||
onClose();
|
||||
}, [hasProgress, view, onClose, projectId]);
|
||||
}, [missionGoal, hasProgress, view, onClose, projectId]);
|
||||
|
||||
// Escape key handler
|
||||
useEffect(() => {
|
||||
@@ -330,6 +353,7 @@ export function MissionInterviewModal({
|
||||
try {
|
||||
const mission = await createMissionFromInterview(view.sessionId, editedSummary || undefined, projectId);
|
||||
onMissionCreated(mission);
|
||||
clearMissionGoal();
|
||||
// Reset state without confirmation
|
||||
streamConnectionRef.current?.close();
|
||||
streamConnectionRef.current = null;
|
||||
|
||||
@@ -13,6 +13,11 @@ import {
|
||||
type PlanningSession,
|
||||
type SubtaskItem,
|
||||
} from "../api";
|
||||
import {
|
||||
savePlanningDescription,
|
||||
getPlanningDescription,
|
||||
clearPlanningDescription,
|
||||
} from "../hooks/modalPersistence";
|
||||
import { Lightbulb, X, Loader2, CheckCircle, ArrowLeft, ArrowRight, Sparkles, ListTree, GripVertical, ArrowUp, ArrowDown, Plus, Trash2 } from "lucide-react";
|
||||
|
||||
interface PlanningModeModalProps {
|
||||
@@ -83,6 +88,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
setStreamingOutput((prev) => prev + data);
|
||||
},
|
||||
onQuestion: (question) => {
|
||||
clearPlanningDescription();
|
||||
setView({
|
||||
type: "question",
|
||||
session: { sessionId, currentQuestion: question, summary: null },
|
||||
@@ -91,6 +97,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
setHasProgress(true);
|
||||
},
|
||||
onSummary: (summary) => {
|
||||
clearPlanningDescription();
|
||||
setView({
|
||||
type: "summary",
|
||||
session: { sessionId, currentQuestion: null, summary },
|
||||
@@ -138,6 +145,12 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
handleStartPlanning(initialPlanProp);
|
||||
}, 0);
|
||||
return () => clearTimeout(timer);
|
||||
} else if (isOpen && !initialPlanProp && !hasAutoStartedRef.current && view.type === "initial") {
|
||||
// Check localStorage for persisted description when no prop provided
|
||||
const persisted = getPlanningDescription();
|
||||
if (persisted) {
|
||||
setInitialPlan(persisted);
|
||||
}
|
||||
}
|
||||
}, [isOpen, initialPlanProp, view.type, handleStartPlanning]);
|
||||
|
||||
@@ -153,11 +166,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
currentSessionIdRef.current = resumeSessionId;
|
||||
|
||||
if (session.status === "awaiting_input" && session.currentQuestion) {
|
||||
clearPlanningDescription();
|
||||
const question = JSON.parse(session.currentQuestion);
|
||||
setView({ type: "question", session: { sessionId: resumeSessionId, currentQuestion: question, summary: null } });
|
||||
if (session.thinkingOutput) setStreamingOutput(session.thinkingOutput);
|
||||
setHasProgress(true);
|
||||
} else if (session.status === "complete" && session.result) {
|
||||
clearPlanningDescription();
|
||||
const summary = JSON.parse(session.result);
|
||||
setView({ type: "summary", session: { sessionId: resumeSessionId, currentQuestion: null, summary }, summary });
|
||||
setEditedSummary(summary);
|
||||
@@ -169,11 +184,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
const connection = connectPlanningStream(resumeSessionId, projectId, {
|
||||
onThinking: (data) => setStreamingOutput((prev) => prev + data),
|
||||
onQuestion: (question) => {
|
||||
clearPlanningDescription();
|
||||
setView({ type: "question", session: { sessionId: resumeSessionId, currentQuestion: question, summary: null } });
|
||||
setStreamingOutput("");
|
||||
setHasProgress(true);
|
||||
},
|
||||
onSummary: (summary) => {
|
||||
clearPlanningDescription();
|
||||
setView({ type: "summary", session: { sessionId: resumeSessionId, currentQuestion: null, summary }, summary });
|
||||
setEditedSummary(summary);
|
||||
setStreamingOutput("");
|
||||
@@ -227,6 +244,11 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
}, [isOpen, view]);
|
||||
|
||||
const handleCancel = useCallback(async () => {
|
||||
// Save to localStorage BEFORE any cleanup (preserve for re-entry)
|
||||
if (initialPlan) {
|
||||
savePlanningDescription(initialPlan);
|
||||
}
|
||||
|
||||
// Show confirmation if user has made progress
|
||||
if (hasProgress) {
|
||||
if (!confirm("Are you sure you want to close? Your planning progress will be lost.")) {
|
||||
@@ -254,7 +276,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
|
||||
setHasProgress(false);
|
||||
currentSessionIdRef.current = null;
|
||||
onClose();
|
||||
}, [hasProgress, view, onClose]);
|
||||
}, [initialPlan, hasProgress, view, onClose]);
|
||||
|
||||
// Handle escape key to close
|
||||
useEffect(() => {
|
||||
|
||||
@@ -14,6 +14,12 @@ vi.mock("../api", () => ({
|
||||
cancelSubtaskBreakdown: (...args: any[]) => mockCancelSubtaskBreakdown(...args),
|
||||
}));
|
||||
|
||||
vi.mock("../hooks/modalPersistence", () => ({
|
||||
saveSubtaskDescription: vi.fn(),
|
||||
getSubtaskDescription: vi.fn(() => ""),
|
||||
clearSubtaskDescription: vi.fn(),
|
||||
}));
|
||||
|
||||
const SAMPLE_SUBTASKS = [
|
||||
{ id: "subtask-1", title: "First", description: "Do first", suggestedSize: "S" as const, dependsOn: [] },
|
||||
{ id: "subtask-2", title: "Second", description: "Do second", suggestedSize: "M" as const, dependsOn: ["subtask-1"] },
|
||||
|
||||
@@ -8,6 +8,11 @@ import {
|
||||
fetchAiSession,
|
||||
type SubtaskItem,
|
||||
} from "../api";
|
||||
import {
|
||||
saveSubtaskDescription,
|
||||
getSubtaskDescription,
|
||||
clearSubtaskDescription,
|
||||
} from "../hooks/modalPersistence";
|
||||
import { CheckCircle, Loader2, ListTree, Plus, Trash2, X, GripVertical, ArrowUp, ArrowDown } from "lucide-react";
|
||||
|
||||
interface SubtaskBreakdownModalProps {
|
||||
@@ -61,6 +66,8 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
const [subtasks, setSubtasks] = useState<SubtaskItem[]>([]);
|
||||
const [thinkingOutput, setThinkingOutput] = useState("");
|
||||
const [showThinking, setShowThinking] = useState(true);
|
||||
// Local description: synced from prop, can fall back to localStorage
|
||||
const [localDescription, setLocalDescription] = useState(initialDescription);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dirty, setDirty] = useState(false);
|
||||
|
||||
@@ -84,6 +91,10 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
}, [subtasks]);
|
||||
|
||||
const resetState = useCallback(() => {
|
||||
// Save to localStorage before cleanup (preserve for re-entry)
|
||||
if (localDescription) {
|
||||
saveSubtaskDescription(localDescription);
|
||||
}
|
||||
streamRef.current?.close();
|
||||
streamRef.current = null;
|
||||
setView({ type: "initial" });
|
||||
@@ -93,7 +104,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
setError(null);
|
||||
setDirty(false);
|
||||
autoStartedRef.current = false;
|
||||
}, []);
|
||||
}, [localDescription]);
|
||||
|
||||
const handleClose = useCallback(async () => {
|
||||
if ((dirty || view.type === "editing" || view.type === "creating") && !confirm("Close subtask breakdown? Unsaved changes will be lost.")) {
|
||||
@@ -111,17 +122,18 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
}, [dirty, onClose, resetState, sessionId, view.type, projectId]);
|
||||
|
||||
const beginBreakdown = useCallback(async () => {
|
||||
if (!initialDescription.trim()) return;
|
||||
if (!localDescription.trim()) return;
|
||||
setError(null);
|
||||
setThinkingOutput("");
|
||||
|
||||
try {
|
||||
const { sessionId } = await startSubtaskBreakdown(initialDescription.trim(), projectId);
|
||||
const { sessionId } = await startSubtaskBreakdown(localDescription.trim(), projectId);
|
||||
setView({ type: "generating", sessionId });
|
||||
streamRef.current?.close();
|
||||
streamRef.current = connectSubtaskStream(sessionId, projectId, {
|
||||
onThinking: (data) => setThinkingOutput((prev) => prev + data),
|
||||
onSubtasks: (items) => {
|
||||
clearSubtaskDescription();
|
||||
setSubtasks(items);
|
||||
setView({ type: "editing", sessionId });
|
||||
setDirty(false);
|
||||
@@ -135,7 +147,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
setError(err.message || "Failed to start subtask breakdown");
|
||||
setView({ type: "initial" });
|
||||
}
|
||||
}, [initialDescription]);
|
||||
}, [localDescription, projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
@@ -144,8 +156,15 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
}
|
||||
|
||||
if (isOpen && initialDescription && !autoStartedRef.current) {
|
||||
setLocalDescription(initialDescription);
|
||||
autoStartedRef.current = true;
|
||||
void beginBreakdown();
|
||||
} else if (isOpen && !initialDescription && !autoStartedRef.current) {
|
||||
// Check localStorage for persisted description when no prop provided
|
||||
const persisted = getSubtaskDescription();
|
||||
if (persisted) {
|
||||
setLocalDescription(persisted);
|
||||
}
|
||||
}
|
||||
}, [isOpen, initialDescription, beginBreakdown, resetState]);
|
||||
|
||||
@@ -163,6 +182,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
streamRef.current = connectSubtaskStream(resumeSessionId, projectId, {
|
||||
onThinking: (data) => setThinkingOutput((prev) => prev + data),
|
||||
onSubtasks: (items) => {
|
||||
clearSubtaskDescription();
|
||||
setSubtasks(items);
|
||||
setView({ type: "editing", sessionId: resumeSessionId });
|
||||
setDirty(false);
|
||||
@@ -173,6 +193,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
},
|
||||
});
|
||||
} else if (session.status === "complete" && session.result) {
|
||||
clearSubtaskDescription();
|
||||
const items = JSON.parse(session.result) as SubtaskItem[];
|
||||
setSubtasks(items);
|
||||
setView({ type: "editing", sessionId: resumeSessionId });
|
||||
@@ -345,7 +366,7 @@ export function SubtaskBreakdownModal({ isOpen, onClose, initialDescription, onT
|
||||
<div className="planning-initial">
|
||||
<div className="planning-view-scroll">
|
||||
<p className="text-muted">Preparing to break this task into subtasks.</p>
|
||||
<pre className="planning-thinking-output">{initialDescription}</pre>
|
||||
<pre className="planning-thinking-output">{localDescription}</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,410 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
|
||||
|
||||
// Use vi.hoisted to ensure mock functions are defined before vi.mock factory runs
|
||||
const {
|
||||
mockSavePlanningDescription,
|
||||
mockGetPlanningDescription,
|
||||
mockClearPlanningDescription,
|
||||
mockSaveSubtaskDescription,
|
||||
mockGetSubtaskDescription,
|
||||
mockClearSubtaskDescription,
|
||||
mockSaveMissionGoal,
|
||||
mockGetMissionGoal,
|
||||
mockClearMissionGoal,
|
||||
} = vi.hoisted(() => ({
|
||||
mockSavePlanningDescription: vi.fn(),
|
||||
mockGetPlanningDescription: vi.fn(() => ""),
|
||||
mockClearPlanningDescription: vi.fn(),
|
||||
mockSaveSubtaskDescription: vi.fn(),
|
||||
mockGetSubtaskDescription: vi.fn(() => ""),
|
||||
mockClearSubtaskDescription: vi.fn(),
|
||||
mockSaveMissionGoal: vi.fn(),
|
||||
mockGetMissionGoal: vi.fn(() => ""),
|
||||
mockClearMissionGoal: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../../hooks/modalPersistence", () => ({
|
||||
savePlanningDescription: (...args: any[]) => mockSavePlanningDescription(...args),
|
||||
getPlanningDescription: (...args: any[]) => mockGetPlanningDescription(...args),
|
||||
clearPlanningDescription: (...args: any[]) => mockClearPlanningDescription(...args),
|
||||
saveSubtaskDescription: (...args: any[]) => mockSaveSubtaskDescription(...args),
|
||||
getSubtaskDescription: (...args: any[]) => mockGetSubtaskDescription(...args),
|
||||
clearSubtaskDescription: (...args: any[]) => mockClearSubtaskDescription(...args),
|
||||
saveMissionGoal: (...args: any[]) => mockSaveMissionGoal(...args),
|
||||
getMissionGoal: (...args: any[]) => mockGetMissionGoal(...args),
|
||||
clearMissionGoal: (...args: any[]) => mockClearMissionGoal(...args),
|
||||
}));
|
||||
|
||||
// Mock the API functions
|
||||
const {
|
||||
mockStartPlanningStreaming,
|
||||
mockConnectPlanningStream,
|
||||
mockCancelPlanning,
|
||||
mockCreateTaskFromPlanning,
|
||||
mockRespondToPlanning,
|
||||
mockStartSubtaskBreakdown,
|
||||
mockConnectSubtaskStream,
|
||||
mockCancelSubtaskBreakdown,
|
||||
mockCreateTasksFromBreakdown,
|
||||
mockStartMissionInterview,
|
||||
mockConnectMissionInterviewStream,
|
||||
mockCancelMissionInterview,
|
||||
mockCreateMissionFromInterview,
|
||||
} = vi.hoisted(() => ({
|
||||
mockStartPlanningStreaming: vi.fn(),
|
||||
mockConnectPlanningStream: vi.fn(),
|
||||
mockCancelPlanning: vi.fn(),
|
||||
mockCreateTaskFromPlanning: vi.fn(),
|
||||
mockRespondToPlanning: vi.fn(),
|
||||
mockStartSubtaskBreakdown: vi.fn(),
|
||||
mockConnectSubtaskStream: vi.fn(),
|
||||
mockCancelSubtaskBreakdown: vi.fn(),
|
||||
mockCreateTasksFromBreakdown: vi.fn(),
|
||||
mockStartMissionInterview: vi.fn(),
|
||||
mockConnectMissionInterviewStream: vi.fn(),
|
||||
mockCancelMissionInterview: vi.fn(),
|
||||
mockCreateMissionFromInterview: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../../api", () => ({
|
||||
startPlanningStreaming: (...args: any[]) => mockStartPlanningStreaming(...args),
|
||||
connectPlanningStream: (...args: any[]) => mockConnectPlanningStream(...args),
|
||||
cancelPlanning: (...args: any[]) => mockCancelPlanning(...args),
|
||||
createTaskFromPlanning: (...args: any[]) => mockCreateTaskFromPlanning(...args),
|
||||
respondToPlanning: (...args: any[]) => mockRespondToPlanning(...args),
|
||||
startSubtaskBreakdown: (...args: any[]) => mockStartSubtaskBreakdown(...args),
|
||||
connectSubtaskStream: (...args: any[]) => mockConnectSubtaskStream(...args),
|
||||
cancelSubtaskBreakdown: (...args: any[]) => mockCancelSubtaskBreakdown(...args),
|
||||
createTasksFromBreakdown: (...args: any[]) => mockCreateTasksFromBreakdown(...args),
|
||||
startMissionInterview: (...args: any[]) => mockStartMissionInterview(...args),
|
||||
connectMissionInterviewStream: (...args: any[]) => mockConnectMissionInterviewStream(...args),
|
||||
cancelMissionInterview: (...args: any[]) => mockCancelMissionInterview(...args),
|
||||
createMissionFromInterview: (...args: any[]) => mockCreateMissionFromInterview(...args),
|
||||
fetchSettings: vi.fn().mockResolvedValue({ modelPresets: [], autoSelectModelPreset: false, defaultPresetBySize: {} }),
|
||||
fetchModels: vi.fn().mockResolvedValue({ models: [], favoriteProviders: [] }),
|
||||
fetchWorkflowSteps: vi.fn().mockResolvedValue([]),
|
||||
refineText: vi.fn(),
|
||||
getRefineErrorMessage: vi.fn((err: any) => err?.message || "Failed to refine"),
|
||||
updateGlobalSettings: vi.fn().mockResolvedValue({}),
|
||||
duplicateTask: vi.fn().mockResolvedValue({}),
|
||||
uploadAttachment: vi.fn(),
|
||||
deleteAttachment: vi.fn(),
|
||||
updateTask: vi.fn(),
|
||||
pauseTask: vi.fn(),
|
||||
unpauseTask: vi.fn(),
|
||||
fetchTaskDetail: vi.fn(),
|
||||
requestSpecRevision: vi.fn(),
|
||||
approvePlan: vi.fn(),
|
||||
rejectPlan: vi.fn(),
|
||||
refineTask: vi.fn(),
|
||||
}));
|
||||
|
||||
// Import components AFTER mocking
|
||||
import { PlanningModeModal } from "../PlanningModeModal";
|
||||
import { SubtaskBreakdownModal } from "../SubtaskBreakdownModal";
|
||||
import { MissionInterviewModal } from "../MissionInterviewModal";
|
||||
|
||||
describe("ModalReentry", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockGetPlanningDescription.mockReturnValue("");
|
||||
mockGetSubtaskDescription.mockReturnValue("");
|
||||
mockGetMissionGoal.mockReturnValue("");
|
||||
|
||||
// Default API mocks
|
||||
mockStartPlanningStreaming.mockResolvedValue({ sessionId: "planning-session-1" });
|
||||
mockConnectPlanningStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
|
||||
mockCancelPlanning.mockResolvedValue(undefined);
|
||||
mockCreateTaskFromPlanning.mockResolvedValue({ id: "FN-100" });
|
||||
|
||||
mockStartSubtaskBreakdown.mockResolvedValue({ sessionId: "subtask-session-1" });
|
||||
mockConnectSubtaskStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
|
||||
mockCancelSubtaskBreakdown.mockResolvedValue(undefined);
|
||||
mockCreateTasksFromBreakdown.mockResolvedValue({ tasks: [{ id: "FN-101" }, { id: "FN-102" }] });
|
||||
|
||||
mockStartMissionInterview.mockResolvedValue({ sessionId: "mission-session-1" });
|
||||
mockConnectMissionInterviewStream.mockReturnValue({ close: vi.fn(), isConnected: () => true });
|
||||
mockCancelMissionInterview.mockResolvedValue(undefined);
|
||||
mockCreateMissionFromInterview.mockResolvedValue({
|
||||
mission: { id: "MSN-001" },
|
||||
slices: [],
|
||||
features: [],
|
||||
});
|
||||
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
});
|
||||
|
||||
// ─── PlanningModeModal ───────────────────────────────────────────────
|
||||
|
||||
describe("PlanningModal re-entry", () => {
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
onTaskCreated: vi.fn(),
|
||||
onTasksCreated: vi.fn(),
|
||||
tasks: [],
|
||||
};
|
||||
|
||||
it("reads persisted description from localStorage when no prop provided", async () => {
|
||||
mockGetPlanningDescription.mockReturnValue("Persisted planning description");
|
||||
|
||||
render(<PlanningModeModal {...defaultProps} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockGetPlanningDescription).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// Verify the textarea has the persisted value
|
||||
const textarea = document.getElementById("initial-plan") as HTMLTextAreaElement;
|
||||
expect(textarea).toBeTruthy();
|
||||
expect(textarea.value).toBe("Persisted planning description");
|
||||
});
|
||||
|
||||
it("uses prop value instead of localStorage when initialPlan prop is provided", async () => {
|
||||
mockGetPlanningDescription.mockReturnValue("From localStorage");
|
||||
|
||||
render(<PlanningModeModal {...defaultProps} initialPlan="From prop" />);
|
||||
|
||||
// Wait for auto-start (which reads the prop)
|
||||
await waitFor(() => {
|
||||
expect(mockStartPlanningStreaming).toHaveBeenCalledWith("From prop", undefined);
|
||||
});
|
||||
|
||||
// localStorage should NOT be read since prop was provided
|
||||
expect(mockGetPlanningDescription).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("clears localStorage when planning session produces events", async () => {
|
||||
// Set up stream to trigger onQuestion which calls clearPlanningDescription
|
||||
mockConnectPlanningStream.mockImplementation((_sid, _pid, handlers) => {
|
||||
setTimeout(() => handlers.onQuestion({ id: "q1", type: "text", question: "Test?" }), 0);
|
||||
return { close: vi.fn(), isConnected: () => true };
|
||||
});
|
||||
|
||||
render(<PlanningModeModal {...defaultProps} initialPlan="Build auth" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockClearPlanningDescription).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it("saves description to localStorage on cancel", async () => {
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
|
||||
const { unmount } = render(<PlanningModeModal {...defaultProps} />);
|
||||
|
||||
// Type something in the textarea
|
||||
const textarea = document.getElementById("initial-plan") as HTMLTextAreaElement;
|
||||
await act(async () => {
|
||||
fireEvent.change(textarea, { target: { value: "My planning text" } });
|
||||
});
|
||||
|
||||
// Click the close button
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
await act(async () => {
|
||||
fireEvent.click(closeButton);
|
||||
});
|
||||
|
||||
expect(mockSavePlanningDescription).toHaveBeenCalledWith("My planning text");
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("does not save empty description to localStorage on cancel", async () => {
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
|
||||
const { unmount } = render(<PlanningModeModal {...defaultProps} />);
|
||||
|
||||
// Click the close button without typing anything
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
await act(async () => {
|
||||
fireEvent.click(closeButton);
|
||||
});
|
||||
|
||||
expect(mockSavePlanningDescription).not.toHaveBeenCalled();
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── SubtaskBreakdownModal ───────────────────────────────────────────
|
||||
|
||||
describe("SubtaskBreakdownModal re-entry", () => {
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
initialDescription: "",
|
||||
onTasksCreated: vi.fn(),
|
||||
};
|
||||
|
||||
it("reads persisted description from localStorage when no prop provided", async () => {
|
||||
mockGetSubtaskDescription.mockReturnValue("Persisted subtask description");
|
||||
|
||||
render(<SubtaskBreakdownModal {...defaultProps} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockGetSubtaskDescription).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// Verify the persisted description is shown in the pre element
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Persisted subtask description")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("uses prop value and starts breakdown immediately when initialDescription is provided", async () => {
|
||||
render(
|
||||
<SubtaskBreakdownModal
|
||||
{...defaultProps}
|
||||
initialDescription="Build a complex feature"
|
||||
/>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockStartSubtaskBreakdown).toHaveBeenCalledWith("Build a complex feature", undefined);
|
||||
});
|
||||
});
|
||||
|
||||
it("clears localStorage when subtasks are received", async () => {
|
||||
// Set up the stream to emit subtasks
|
||||
mockConnectSubtaskStream.mockImplementation((_sid, _pid, handlers) => {
|
||||
// Simulate subtasks arriving synchronously
|
||||
handlers.onSubtasks([{ id: "subtask-1", title: "First", description: "", suggestedSize: "M", dependsOn: [] }]);
|
||||
return { close: vi.fn(), isConnected: () => true };
|
||||
});
|
||||
|
||||
render(
|
||||
<SubtaskBreakdownModal
|
||||
{...defaultProps}
|
||||
initialDescription="Break this down"
|
||||
/>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockClearSubtaskDescription).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it("saves description to localStorage on close", async () => {
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
|
||||
// Set up the stream so the modal can start
|
||||
mockConnectSubtaskStream.mockImplementation((_sid, _pid, handlers) => {
|
||||
handlers.onSubtasks([{ id: "subtask-1", title: "First", description: "", suggestedSize: "M", dependsOn: [] }]);
|
||||
return { close: vi.fn(), isConnected: () => true };
|
||||
});
|
||||
|
||||
const { unmount } = render(
|
||||
<SubtaskBreakdownModal
|
||||
{...defaultProps}
|
||||
initialDescription="Some description"
|
||||
/>
|
||||
);
|
||||
|
||||
// Close the modal (resetState is called which saves to localStorage)
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
await act(async () => {
|
||||
fireEvent.click(closeButton);
|
||||
});
|
||||
|
||||
expect(mockSaveSubtaskDescription).toHaveBeenCalledWith("Some description");
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── MissionInterviewModal ───────────────────────────────────────────
|
||||
|
||||
describe("MissionInterviewModal re-entry", () => {
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
onMissionCreated: vi.fn(),
|
||||
};
|
||||
|
||||
it("reads persisted goal from localStorage when no prop provided", async () => {
|
||||
mockGetMissionGoal.mockReturnValue("Persisted mission goal");
|
||||
|
||||
render(<MissionInterviewModal {...defaultProps} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockGetMissionGoal).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// Verify the textarea has the persisted value
|
||||
const textarea = document.getElementById("mission-goal") as HTMLTextAreaElement;
|
||||
expect(textarea).toBeTruthy();
|
||||
expect(textarea.value).toBe("Persisted mission goal");
|
||||
});
|
||||
|
||||
it("uses prop value instead of localStorage when initialGoal prop is provided", async () => {
|
||||
mockGetMissionGoal.mockReturnValue("From localStorage");
|
||||
|
||||
render(<MissionInterviewModal {...defaultProps} initialGoal="From prop" />);
|
||||
|
||||
// Wait for auto-start
|
||||
await waitFor(() => {
|
||||
expect(mockStartMissionInterview).toHaveBeenCalledWith("From prop", undefined);
|
||||
});
|
||||
|
||||
// localStorage should NOT be read since prop was provided
|
||||
expect(mockGetMissionGoal).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("clears localStorage when interview starts successfully", async () => {
|
||||
render(<MissionInterviewModal {...defaultProps} initialGoal="Build a platform" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockStartMissionInterview).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// clearMissionGoal is called immediately after startMissionInterview
|
||||
expect(mockClearMissionGoal).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("saves goal to localStorage on cancel", async () => {
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
|
||||
const { unmount } = render(<MissionInterviewModal {...defaultProps} />);
|
||||
|
||||
// Type something in the textarea
|
||||
const textarea = document.getElementById("mission-goal") as HTMLTextAreaElement;
|
||||
await act(async () => {
|
||||
fireEvent.change(textarea, { target: { value: "My mission goal" } });
|
||||
});
|
||||
|
||||
// Click the close button
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
await act(async () => {
|
||||
fireEvent.click(closeButton);
|
||||
});
|
||||
|
||||
expect(mockSaveMissionGoal).toHaveBeenCalledWith("My mission goal");
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("does not save empty goal to localStorage on cancel", async () => {
|
||||
vi.stubGlobal("confirm", vi.fn(() => true));
|
||||
|
||||
const { unmount } = render(<MissionInterviewModal {...defaultProps} />);
|
||||
|
||||
// Click the close button without typing anything
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
await act(async () => {
|
||||
fireEvent.click(closeButton);
|
||||
});
|
||||
|
||||
expect(mockSaveMissionGoal).not.toHaveBeenCalled();
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Cross-modal storage independence ────────────────────────────────
|
||||
|
||||
describe("Storage independence", () => {
|
||||
it("each modal type uses independent persistence functions", () => {
|
||||
// Verify the mock functions are distinct (unit-level independence)
|
||||
expect(mockSavePlanningDescription).not.toBe(mockSaveSubtaskDescription);
|
||||
expect(mockSavePlanningDescription).not.toBe(mockSaveMissionGoal);
|
||||
expect(mockSaveSubtaskDescription).not.toBe(mockSaveMissionGoal);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user