@sienklogic/plan-build-run 2.0.2 → 2.1.1

package/dashboard/tests/pages/PlanningPage.test.jsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import { ToastProvider } from '../../src/hooks/useToast.jsx';
+
+// Mock useFetch — return idle state by default
+vi.mock('../../src/hooks/useFetch.js', () => ({
+  default: vi.fn(() => ({
+    data: null,
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+  })),
+}));
+
+// Mock useWebSocket — return idle state
+vi.mock('../../src/hooks/useWebSocket.js', () => ({
+  default: vi.fn(() => ({
+    status: 'disconnected',
+    events: [],
+    clearEvents: vi.fn(),
+  })),
+}));
+
+// Mock sub-tab components to isolate PlanningPage logic
+vi.mock('../../src/pages/planning/MilestonesTab.jsx', () => ({
+  default: () => <div data-testid="milestones-tab">MilestonesTab</div>,
+}));
+vi.mock('../../src/pages/planning/PhasesTab.jsx', () => ({
+  default: () => <div data-testid="phases-tab">PhasesTab</div>,
+}));
+vi.mock('../../src/pages/planning/TodosTab.jsx', () => ({
+  default: () => <div data-testid="todos-tab">TodosTab</div>,
+}));
+vi.mock('../../src/pages/planning/QuickTab.jsx', () => ({
+  default: () => <div data-testid="quick-tab">QuickTab</div>,
+}));
+vi.mock('../../src/pages/planning/NotesTab.jsx', () => ({
+  default: () => <div data-testid="notes-tab">NotesTab</div>,
+}));
+vi.mock('../../src/pages/planning/ResearchTab.jsx', () => ({
+  default: () => <div data-testid="research-tab">ResearchTab</div>,
+}));
+vi.mock('../../src/pages/planning/DecisionsTab.jsx', () => ({
+  default: () => <div data-testid="decisions-tab">DecisionsTab</div>,
+}));
+vi.mock('../../src/pages/planning/FilesTab.jsx', () => ({
+  default: () => <div data-testid="files-tab">FilesTab</div>,
+}));
+
+import PlanningPage from '../../src/pages/PlanningPage.jsx';
+
+function renderPage() {
+  return render(
+    <ThemeProvider>
+      <ToastProvider>
+        <PlanningPage />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('PlanningPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the tab bar with all expected tabs', () => {
+    renderPage();
+    const expectedTabs = ['milestones', 'phases', 'todos', 'notes', 'quick', 'research', 'decisions', 'files'];
+    for (const tab of expectedTabs) {
+      expect(screen.getByText(tab)).toBeInTheDocument();
+    }
+  });
+
+  it('shows the milestones tab by default', () => {
+    renderPage();
+    expect(screen.getByTestId('milestones-tab')).toBeInTheDocument();
+  });
+
+  it('switches to todos tab when clicked', () => {
+    renderPage();
+    fireEvent.click(screen.getByText('todos'));
+    expect(screen.getByTestId('todos-tab')).toBeInTheDocument();
+    expect(screen.queryByTestId('milestones-tab')).not.toBeInTheDocument();
+  });
+
+  it('switches to notes tab when clicked', () => {
+    renderPage();
+    fireEvent.click(screen.getByText('notes'));
+    expect(screen.getByTestId('notes-tab')).toBeInTheDocument();
+  });
+
+  it('switches to files tab when clicked', () => {
+    renderPage();
+    fireEvent.click(screen.getByText('files'));
+    expect(screen.getByTestId('files-tab')).toBeInTheDocument();
+  });
+
+  it('switches to decisions tab when clicked', () => {
+    renderPage();
+    fireEvent.click(screen.getByText('decisions'));
+    expect(screen.getByTestId('decisions-tab')).toBeInTheDocument();
+  });
+
+  it('can switch between multiple tabs', () => {
+    renderPage();
+
+    fireEvent.click(screen.getByText('phases'));
+    expect(screen.getByTestId('phases-tab')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('research'));
+    expect(screen.getByTestId('research-tab')).toBeInTheDocument();
+    expect(screen.queryByTestId('phases-tab')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('quick'));
+    expect(screen.getByTestId('quick-tab')).toBeInTheDocument();
+  });
+});

package/dashboard/tests/pages/planning/FilesTab.test.jsx

@@ -0,0 +1,198 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ThemeProvider } from '../../../src/theme/ThemeProvider.jsx';
+import { ToastProvider } from '../../../src/hooks/useToast.jsx';
+import FilesTab from '../../../src/pages/planning/FilesTab.jsx';
+
+// Mock the api module
+vi.mock('../../../src/lib/api.js', () => ({
+  apiFetch: vi.fn(),
+  apiPutWithHeaders: vi.fn(() => Promise.resolve({ conflict: false, mtimeMs: Date.now() })),
+  API_BASE: '',
+  default: vi.fn(),
+}));
+
+import { apiFetch, apiPutWithHeaders } from '../../../src/lib/api.js';
+
+const sampleFiles = [
+  { name: 'STATE.md', size: 1024 },
+  { name: 'ROADMAP.md', size: 2048 },
+  { name: 'config.json', size: 512 },
+];
+
+const sampleFileContent = {
+  name: 'STATE.md',
+  content: '# State\n\nCurrent phase: 05',
+  mtimeMs: 1000,
+};
+
+function renderTab(props = {}) {
+  return render(
+    <ThemeProvider>
+      <ToastProvider>
+        <FilesTab {...props} />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('FilesTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default: return file list on first call, file content on subsequent
+    apiFetch.mockImplementation((url) => {
+      if (url === '/api/planning/files') {
+        return Promise.resolve(sampleFiles);
+      }
+      if (url.startsWith('/api/planning/files/')) {
+        return Promise.resolve({ ...sampleFileContent });
+      }
+      return Promise.resolve([]);
+    });
+  });
+
+  it('renders file list after loading', async () => {
+    renderTab();
+
+    // Initially shows loading
+    expect(screen.getByText('Loading files...')).toBeInTheDocument();
+
+    // After fetch completes, files appear
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+    expect(screen.getByText('ROADMAP.md')).toBeInTheDocument();
+    expect(screen.getByText('config.json')).toBeInTheDocument();
+  });
+
+  it('shows file sizes formatted', async () => {
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('1.0 KB')).toBeInTheDocument();
+    expect(screen.getByText('2.0 KB')).toBeInTheDocument();
+    expect(screen.getByText('512 B')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no file is selected', async () => {
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Select a file to view its contents')).toBeInTheDocument();
+  });
+
+  it('loads and displays file content when a file is clicked', async () => {
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('STATE.md'));
+
+    await waitFor(() => {
+      // The file content is rendered through renderMarkdown
+      expect(screen.getByText('State')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+  });
+
+  it('enters edit mode when Edit button is clicked', async () => {
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('STATE.md'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Edit'));
+
+    // Should show editing UI with Save and Cancel
+    await waitFor(() => {
+      expect(screen.getByText(/Editing:/)).toBeInTheDocument();
+    });
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+  });
+
+  it('exits edit mode when Cancel is clicked', async () => {
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('STATE.md'));
+    await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
+
+    fireEvent.click(screen.getByText('Edit'));
+    await waitFor(() => expect(screen.getByText('Cancel')).toBeInTheDocument());
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/Editing:/)).not.toBeInTheDocument();
+  });
+
+  it('calls apiPutWithHeaders when Save is clicked', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+
+    await waitFor(() => {
+      expect(screen.getByText('STATE.md')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('STATE.md'));
+    await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
+
+    fireEvent.click(screen.getByText('Edit'));
+    await waitFor(() => expect(screen.getByText('Save')).toBeInTheDocument());
+
+    // Modify content in the textarea
+    const textarea = screen.getByRole('textbox');
+    fireEvent.change(textarea, { target: { value: '# Updated State' } });
+
+    fireEvent.click(screen.getByText('Save'));
+
+    await waitFor(() => {
+      expect(apiPutWithHeaders).toHaveBeenCalledWith(
+        '/api/planning/files/STATE.md',
+        { content: '# Updated State' },
+        expect.objectContaining({ 'If-Unmodified-Since': '1000' })
+      );
+    });
+  });
+
+  it('shows error state when file list fetch fails', async () => {
+    apiFetch.mockRejectedValue(new Error('Network error'));
+
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('Network error')).toBeInTheDocument();
+    });
+  });
+
+  it('renders with empty file list', async () => {
+    apiFetch.mockResolvedValue([]);
+
+    renderTab();
+
+    await waitFor(() => {
+      expect(screen.getByText('No .md files found')).toBeInTheDocument();
+    });
+  });
+});

package/dashboard/tests/pages/planning/NotesTab.test.jsx

@@ -0,0 +1,178 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { ThemeProvider } from '../../../src/theme/ThemeProvider.jsx';
+import { ToastProvider } from '../../../src/hooks/useToast.jsx';
+import NotesTab from '../../../src/pages/planning/NotesTab.jsx';
+
+vi.mock('../../../src/lib/api.js', () => ({
+  apiPost: vi.fn(() => Promise.resolve({})),
+  apiPut: vi.fn(() => Promise.resolve({})),
+  apiDelete: vi.fn(() => Promise.resolve({})),
+}));
+
+import { apiPost, apiDelete } from '../../../src/lib/api.js';
+
+const sampleNotes = [
+  {
+    id: 'note-1',
+    title: 'Architecture decisions',
+    content: 'We chose React for the dashboard.',
+    created: '2026-03-01',
+    tags: ['architecture', 'frontend'],
+  },
+  {
+    id: 'note-2',
+    title: 'API conventions',
+    content: 'All endpoints return JSON.',
+    created: '2026-03-02',
+    tags: ['api'],
+  },
+];
+
+function renderTab(props = {}) {
+  const defaultProps = { notes: sampleNotes, onRefresh: vi.fn() };
+  return render(
+    <ThemeProvider>
+      <ToastProvider>
+        <NotesTab {...defaultProps} {...props} />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('NotesTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the notes list with titles', () => {
+    renderTab();
+    expect(screen.getByText('Architecture decisions')).toBeInTheDocument();
+    expect(screen.getByText('API conventions')).toBeInTheDocument();
+  });
+
+  it('renders note tags as badges', () => {
+    renderTab();
+    expect(screen.getByText('architecture')).toBeInTheDocument();
+    expect(screen.getByText('frontend')).toBeInTheDocument();
+    expect(screen.getByText('api')).toBeInTheDocument();
+  });
+
+  it('renders note creation dates', () => {
+    renderTab();
+    expect(screen.getByText('2026-03-01')).toBeInTheDocument();
+    expect(screen.getByText('2026-03-02')).toBeInTheDocument();
+  });
+
+  it('shows the New Note button', () => {
+    renderTab();
+    expect(screen.getByText('New Note')).toBeInTheDocument();
+  });
+
+  it('opens create form when New Note is clicked', () => {
+    renderTab();
+    fireEvent.click(screen.getByText('New Note'));
+    expect(screen.getByText('Create Note')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Title')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Content')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Tags (comma-separated)')).toBeInTheDocument();
+  });
+
+  it('calls apiPost when saving a new note', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+    fireEvent.click(screen.getByText('New Note'));
+
+    fireEvent.change(screen.getByPlaceholderText('Title'), {
+      target: { value: 'New note title' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('Content'), {
+      target: { value: 'Note body text' },
+    });
+
+    // Click Save (inside create form)
+    const saveButtons = screen.getAllByText('Save');
+    fireEvent.click(saveButtons[0]);
+
+    await waitFor(() => {
+      expect(apiPost).toHaveBeenCalledWith('/api/planning/notes', expect.objectContaining({
+        title: 'New note title',
+        content: 'Note body text',
+      }));
+    });
+    await waitFor(() => {
+      expect(onRefresh).toHaveBeenCalled();
+    });
+  });
+
+  it('cancels the create form', () => {
+    renderTab();
+    fireEvent.click(screen.getByText('New Note'));
+    expect(screen.getByText('Create Note')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(screen.queryByText('Create Note')).not.toBeInTheDocument();
+  });
+
+  it('expands a note on click to show content and actions', () => {
+    renderTab();
+    fireEvent.click(screen.getByText('Architecture decisions'));
+
+    expect(screen.getByText('We chose React for the dashboard.')).toBeInTheDocument();
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('triggers confirm modal on delete (not window.confirm)', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+
+    renderTab();
+
+    // Expand note first to reveal Delete button
+    fireEvent.click(screen.getByText('Architecture decisions'));
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Delete'));
+    });
+
+    // window.confirm should NOT be used
+    expect(confirmSpy).not.toHaveBeenCalled();
+
+    // The confirm modal should appear
+    await waitFor(() => {
+      expect(screen.getByText('Delete Note')).toBeInTheDocument();
+      expect(screen.getByText('Are you sure you want to delete this note?')).toBeInTheDocument();
+    });
+
+    confirmSpy.mockRestore();
+  });
+
+  it('calls apiDelete when confirm modal is accepted', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+
+    // Expand note to reveal Delete
+    fireEvent.click(screen.getByText('Architecture decisions'));
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Delete'));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Delete Note')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Confirm'));
+    });
+
+    await waitFor(() => {
+      expect(apiDelete).toHaveBeenCalledWith('/api/planning/notes/note-1');
+    });
+  });
+
+  it('renders with empty notes array', () => {
+    renderTab({ notes: [] });
+    expect(screen.getByText('New Note')).toBeInTheDocument();
+  });
+});

package/dashboard/tests/pages/planning/TodosTab.test.jsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { ThemeProvider } from '../../../src/theme/ThemeProvider.jsx';
+import { ToastProvider } from '../../../src/hooks/useToast.jsx';
+import TodosTab from '../../../src/pages/planning/TodosTab.jsx';
+
+// Mock the api module to intercept API calls
+vi.mock('../../../src/lib/api.js', () => ({
+  apiPost: vi.fn(() => Promise.resolve({})),
+  apiPut: vi.fn(() => Promise.resolve({})),
+  apiDelete: vi.fn(() => Promise.resolve({})),
+}));
+
+import { apiPost, apiPut, apiDelete } from '../../../src/lib/api.js';
+
+const sampleTodos = [
+  {
+    id: 'todo-1',
+    title: 'Write tests',
+    status: 'pending',
+    priority: 'high',
+    phase: '05',
+    notes: 'Cover all components',
+    assignee: 'dev',
+    relatedAgents: ['executor'],
+  },
+  {
+    id: 'todo-2',
+    title: 'Review PR',
+    status: 'done',
+    priority: 'medium',
+    phase: '06',
+    notes: '',
+    assignee: null,
+    relatedAgents: [],
+  },
+];
+
+function renderTab(props = {}) {
+  const defaultProps = { todos: sampleTodos, onRefresh: vi.fn() };
+  return render(
+    <ThemeProvider>
+      <ToastProvider>
+        <TodosTab {...defaultProps} {...props} />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('TodosTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the todo list with titles', () => {
+    renderTab();
+    expect(screen.getByText('Write tests')).toBeInTheDocument();
+    expect(screen.getByText('Review PR')).toBeInTheDocument();
+  });
+
+  it('renders priority badges', () => {
+    renderTab();
+    expect(screen.getByText('high')).toBeInTheDocument();
+    expect(screen.getByText('medium')).toBeInTheDocument();
+  });
+
+  it('shows the Add Todo button', () => {
+    renderTab();
+    expect(screen.getByText('Add Todo')).toBeInTheDocument();
+  });
+
+  it('opens the create form when Add Todo is clicked', () => {
+    renderTab();
+    fireEvent.click(screen.getByText('Add Todo'));
+    expect(screen.getByText('New Todo')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Title')).toBeInTheDocument();
+  });
+
+  it('calls apiPost when saving a new todo', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+    fireEvent.click(screen.getByText('Add Todo'));
+
+    fireEvent.change(screen.getByPlaceholderText('Title'), {
+      target: { value: 'New task' },
+    });
+    fireEvent.click(screen.getByText('Save'));
+
+    await waitFor(() => {
+      expect(apiPost).toHaveBeenCalledWith('/api/planning/todos', expect.objectContaining({
+        title: 'New task',
+      }));
+    });
+    await waitFor(() => {
+      expect(onRefresh).toHaveBeenCalled();
+    });
+  });
+
+  it('cancels the create form', () => {
+    renderTab();
+    fireEvent.click(screen.getByText('Add Todo'));
+    expect(screen.getByText('New Todo')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(screen.queryByText('New Todo')).not.toBeInTheDocument();
+  });
+
+  it('calls apiPut on toggle click', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+
+    // Click the toggle icon (status circle) for the first todo
+    const toggleButtons = screen.getAllByTitle('Toggle status');
+    fireEvent.click(toggleButtons[0]);
+
+    await waitFor(() => {
+      expect(apiPut).toHaveBeenCalledWith(
+        '/api/planning/todos/todo-1/toggle',
+        { currentStatus: 'pending' }
+      );
+    });
+  });
+
+  it('triggers confirm modal on delete (not window.confirm)', async () => {
+    // Spy on window.confirm to verify it is NOT called
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+
+    renderTab();
+
+    const deleteButtons = screen.getAllByTitle('Delete todo');
+    await act(async () => {
+      fireEvent.click(deleteButtons[0]);
+    });
+
+    // window.confirm should NOT be used — the component uses useConfirm modal
+    expect(confirmSpy).not.toHaveBeenCalled();
+
+    // The confirm modal should appear with the expected message
+    await waitFor(() => {
+      expect(screen.getByText('Delete Todo')).toBeInTheDocument();
+      expect(screen.getByText('Are you sure you want to delete this todo?')).toBeInTheDocument();
+    });
+
+    confirmSpy.mockRestore();
+  });
+
+  it('calls apiDelete when confirm modal is accepted', async () => {
+    const onRefresh = vi.fn();
+    renderTab({ onRefresh });
+
+    const deleteButtons = screen.getAllByTitle('Delete todo');
+    await act(async () => {
+      fireEvent.click(deleteButtons[0]);
+    });
+
+    // Wait for the confirm modal to appear, then click Confirm
+    await waitFor(() => {
+      expect(screen.getByText('Delete Todo')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Confirm'));
+    });
+
+    await waitFor(() => {
+      expect(apiDelete).toHaveBeenCalledWith(
+        '/api/planning/todos/todo-1',
+        { status: 'pending' }
+      );
+    });
+  });
+
+  it('renders with empty todos array', () => {
+    renderTab({ todos: [] });
+    expect(screen.getByText('Add Todo')).toBeInTheDocument();
+  });
+
+  it('expands a todo on click to show details', () => {
+    renderTab();
+
+    // Click on the todo card to expand it
+    fireEvent.click(screen.getByText('Write tests'));
+
+    // Should show expanded details
+    expect(screen.getByText('dev')).toBeInTheDocument(); // assignee
+    expect(screen.getByText('Cover all components')).toBeInTheDocument(); // notes
+  });
+});