theirongolddev/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(followup): implement PLAN-FOLLOWUP.md gap fixes

Browse Source 
Complete implementation of 7 slices addressing E2E testing gaps:

Slice 0+1: Wire Actions + ReasonPrompt
- FocusView now uses useActions hook instead of direct act() calls
- Added pendingAction state pattern for skip/defer/complete actions
- ReasonPrompt integration with proper confirm/cancel flow
- Tags support in DecisionEntry interface

Slice 2: Drag Reorder UI
- Installed @dnd-kit (core, sortable, utilities)
- QueueView with DndContext, SortableContext, verticalListSortingStrategy
- SortableQueueItem wrapper component using useSortable hook
- pendingReorder state with ReasonPrompt for reorder reasons
- Cmd+Up/Down keyboard shortcuts for accessibility
- Fixed: Store item ID in PendingReorder to avoid stale queue reference

Slice 3: System Tray Integration
- tray.rs with TrayState, setup_tray, toggle_window_visibility
- Menu with Show/Quit items
- Left-click toggles window visibility
- update_tray_badge command updates tooltip with item count
- Frontend wiring in AppShell

Slice 4: E2E Test Updates
- Fixed test selectors for InboxView, Queue badge
- Exposed inbox store for test seeding

Slice 5: Staleness Visualization
- Already implemented in computeStaleness() with tests

Slice 6: Quick Wiring
- onStartBatch callback wired to QueueView
- SyncStatus rendered in nav area
- SettingsView renders Settings component

Slice 7: State Persistence
- settings-store with hydrate/update methods
- Tauri backend integration via read_settings/write_settings
- AppShell hydrates settings on mount

Bug fixes from code review:
- close_bead now has error isolation (try/catch) so decision logging
  and queue advancement continue even if bead close fails
- PendingReorder stores item ID to avoid stale queue reference

E2E tests for all ACs (tests/e2e/followup-acs.spec.ts):
- AC-F1: Drag reorder (4 tests)
- AC-F2: ReasonPrompt integration (7 tests)
- AC-F5: Staleness visualization (3 tests)
- AC-F6: Batch mode (2 tests)
- AC-F7: SyncStatus (2 tests)
- ReasonPrompt behavior (3 tests)

Tests: 388 frontend + 119 Rust + 32 E2E all passing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
2026-02-26 11:26:42 -05:00
parent 5078cb506a
commit f5ce8a9091
44 changed files with 5268 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
tests/components/FocusView.test.tsx
View File

@@ -5,22 +5,43 @@
* 1. Shows FocusCard when focus is set
* 2. Shows empty state when no focus and no items
* 3. Shows suggestion when no focus but items exist
* 4. Auto-advances to next item after complete
* 4. Auto-advances to next item after start
* 5. Shows celebration on last item complete
* 6. Skip/Defer/Complete trigger ReasonPrompt before action
* 7. ReasonPrompt can be cancelled with Escape
* 8. Confirm with reason logs decision via useActions
*/
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { FocusView } from "@/components/FocusView";
import { useFocusStore } from "@/stores/focus-store";
import { makeFocusItem } from "../helpers/fixtures";
// Mock the shell plugin for URL opening - must return Promise
// Mock the shell plugin for URL opening
vi.mock("@tauri-apps/plugin-shell", () => ({
open: vi.fn(() => Promise.resolve()),
}));
// Mock Tauri invoke -- useActions calls invoke for log_decision, update_item, close_bead
const mockInvoke = vi.fn(() => Promise.resolve());
vi.mock("@tauri-apps/api/core", () => ({
invoke: (...args: unknown[]) => mockInvoke(...args),
}));
function renderWithProviders(ui: React.ReactElement) {
const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: false },
},
});
return render(
<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
);
}
describe("FocusView", () => {
beforeEach(() => {
localStorage.clear();
@@ -30,6 +51,7 @@ describe("FocusView", () => {
isLoading: false,
error: null,
});
mockInvoke.mockResolvedValue(undefined);
});
afterEach(() => {
@@ -41,7 +63,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Test Item" });
useFocusStore.setState({ current: item, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText("Test Item")).toBeInTheDocument();
expect(screen.getByRole("button", { name: /start/i })).toBeInTheDocument();
@@ -52,7 +74,7 @@ describe("FocusView", () => {
const queued = makeFocusItem({ id: "2", title: "Queued", type: "issue" });
useFocusStore.setState({ current, queue: [queued] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/Queue:/)).toBeInTheDocument();
expect(screen.getByText(/1 issue/)).toBeInTheDocument();
@@ -63,7 +85,7 @@ describe("FocusView", () => {
it("shows empty state when no focus and no items", () => {
useFocusStore.setState({ current: null, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/all clear/i)).toBeInTheDocument();
expect(screen.getByText(/nothing needs your attention/i)).toBeInTheDocument();
@@ -72,7 +94,7 @@ describe("FocusView", () => {
it("shows celebration message in empty state", () => {
useFocusStore.setState({ current: null, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/nice work/i)).toBeInTheDocument();
});
@@ -83,7 +105,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Suggested Item" });
useFocusStore.setState({ current: null, queue: [item] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Should show the item as a suggestion
expect(screen.getByText("Suggested Item")).toBeInTheDocument();
@@ -98,7 +120,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Suggested Item" });
useFocusStore.setState({ current: null, queue: [item] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Click the set as focus button
await user.click(screen.getByRole("button", { name: /set as focus|start/i }));
@@ -109,36 +131,48 @@ describe("FocusView", () => {
});
describe("auto-advance behavior", () => {
it("auto-advances to next item after complete", async () => {
it("auto-advances to next item after start", async () => {
const user = userEvent.setup();
const item1 = makeFocusItem({ id: "1", title: "First Item" });
const item2 = makeFocusItem({ id: "2", title: "Second Item" });
useFocusStore.setState({ current: item1, queue: [item2] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Complete current focus by clicking start (which advances)
// Start does not trigger ReasonPrompt -- it goes straight through
await user.click(screen.getByRole("button", { name: /start/i }));
// Should show next item
// Should log decision via invoke
await waitFor(() => {
expect(screen.getByText("Second Item")).toBeInTheDocument();
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "start",
bead_id: "1",
}),
})
);
});
});
it("shows empty state after last item complete", async () => {
it("shows empty state after last item start", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Only Item" });
useFocusStore.setState({ current: item, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Complete the only item
// Start the only item (no ReasonPrompt for start)
await user.click(screen.getByRole("button", { name: /start/i }));
// Should show empty/celebration state
// log_decision is called asynchronously; start doesn't advance the queue
// (start opens URL + logs, but doesn't call act to advance)
await waitFor(() => {
expect(screen.getByText(/all clear/i)).toBeInTheDocument();
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.anything()
);
});
});
});
@@ -164,7 +198,7 @@ describe("FocusView", () => {
it("shows loading state", () => {
useFocusStore.setState({ isLoading: true });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/loading/i)).toBeInTheDocument();
});
@@ -172,52 +206,171 @@ describe("FocusView", () => {
it("shows error state", () => {
useFocusStore.setState({ error: "Something went wrong" });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
});
});
describe("action handlers", () => {
it("calls act with start action when Start is clicked", async () => {
describe("ReasonPrompt wiring", () => {
it("AC-F2.1: Skip action triggers ReasonPrompt with 'Skipping: [title]'", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
// Create a mock act function to track calls
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
// Button accessible name includes shortcut text: "SkipCmd+S"
await user.click(screen.getByRole("button", { name: /^Skip/i }));
render(<FocusView />);
await user.click(screen.getByRole("button", { name: /start/i }));
// act is called with "start" action
expect(mockAct).toHaveBeenCalledWith("start");
// ReasonPrompt should appear with the action and title
expect(screen.getByRole("dialog")).toBeInTheDocument();
expect(screen.getByText(/skipping/i)).toBeInTheDocument();
// Title appears in both FocusCard and ReasonPrompt -- check within dialog
const dialog = screen.getByRole("dialog");
expect(dialog).toHaveTextContent("Fix auth bug");
});
it("calls act with defer_1h action when 1 hour is clicked", async () => {
it("AC-F2.5: 'Skip reason' proceeds with reason=null", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
render(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
// Click "Skip reason" button in the prompt
await user.click(screen.getByRole("button", { name: /skip reason/i }));
// Should have called update_item and log_decision via useActions
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "skip",
bead_id: "1",
reason: null,
}),
})
);
});
// ReasonPrompt should be gone
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});
it("AC-F2.7: Escape cancels prompt", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
expect(screen.getByRole("dialog")).toBeInTheDocument();
// Press Escape
await user.keyboard("{Escape}");
// ReasonPrompt should be dismissed
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
// No backend calls should have been made
expect(mockInvoke).not.toHaveBeenCalled();
});
it("AC-F2.8: Confirm logs decision with reason and tags", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
// Type a reason
const textarea = screen.getByRole("textbox");
await user.type(textarea, "Need more context from Sarah");
// Select a tag
await user.click(screen.getByRole("button", { name: /blocking/i }));
// Click Confirm
await user.click(screen.getByRole("button", { name: /confirm/i }));
// Should have logged with reason and tags
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "skip",
bead_id: "1",
reason: "Need more context from Sarah",
tags: ["blocking"],
}),
})
);
});
});
it("Defer 1h triggers ReasonPrompt then calls defer action", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Review MR" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger defer 1h
await user.click(screen.getByRole("button", { name: /1 hour/i }));
expect(mockAct).toHaveBeenCalledWith("defer_1h");
// ReasonPrompt should appear with defer action
expect(screen.getByRole("dialog")).toBeInTheDocument();
expect(screen.getByText(/deferring/i)).toBeInTheDocument();
// Skip reason to confirm quickly
await user.click(screen.getByRole("button", { name: /skip reason/i }));
// Should have called update_item with snooze time
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"update_item",
expect.objectContaining({
id: "1",
updates: expect.objectContaining({
snoozed_until: expect.any(String),
}),
})
);
});
});
it("calls act with skip action when Skip is clicked", async () => {
it("Start does NOT trigger ReasonPrompt", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
useFocusStore.setState({ current: item, queue: [] });
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
await user.click(screen.getByRole("button", { name: /start/i }));
render(<FocusView />);
await user.click(screen.getByRole("button", { name: /skip/i }));
// No dialog should appear
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
expect(mockAct).toHaveBeenCalledWith("skip");
// But log_decision should be called directly
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "start",
}),
})
);
});
});
});
});