@sienklogic/plan-build-run 2.0.2 → 2.1.1

package/dashboard/tests/components/ToastContainer.test.jsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import ToastContainer from '../../src/components/ui/Toast.jsx';
+
+function renderWithTheme(ui) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('ToastContainer', () => {
+  it('renders nothing when toasts array is empty', () => {
+    const { container } = renderWithTheme(
+      <ToastContainer toasts={[]} removeToast={() => {}} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders toast messages with correct content', () => {
+    const toasts = [
+      { id: 1, type: 'success', message: 'Saved successfully' },
+      { id: 2, type: 'error', message: 'Something failed' },
+    ];
+    renderWithTheme(
+      <ToastContainer toasts={toasts} removeToast={() => {}} />
+    );
+    expect(screen.getByText('Saved successfully')).toBeInTheDocument();
+    expect(screen.getByText('Something failed')).toBeInTheDocument();
+  });
+
+  it('calls removeToast with correct id when dismiss is clicked', () => {
+    const removeToast = vi.fn();
+    const toasts = [{ id: 42, type: 'info', message: 'Test toast' }];
+    renderWithTheme(
+      <ToastContainer toasts={toasts} removeToast={removeToast} />
+    );
+    const dismissBtn = screen.getByLabelText('Dismiss');
+    fireEvent.click(dismissBtn);
+    expect(removeToast).toHaveBeenCalledWith(42);
+  });
+
+  it('renders nothing when toasts is null', () => {
+    const { container } = renderWithTheme(
+      <ToastContainer toasts={null} removeToast={() => {}} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+});

package/dashboard/tests/components/Toggle.test.jsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+import Toggle from '../../src/components/ui/Toggle.jsx';
+
+function renderWithTheme(ui) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Toggle', () => {
+  it('renders with label text', () => {
+    renderWithTheme(
+      <Toggle checked={false} onChange={vi.fn()} label="Enable feature" />
+    );
+    expect(screen.getByText('Enable feature')).toBeInTheDocument();
+  });
+
+  it('renders unchecked state', () => {
+    renderWithTheme(
+      <Toggle checked={false} onChange={vi.fn()} label="Off" />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it('renders checked state', () => {
+    renderWithTheme(
+      <Toggle checked={true} onChange={vi.fn()} label="On" />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox.checked).toBe(true);
+  });
+
+  it('calls onChange with toggled value when clicked', () => {
+    const onChange = vi.fn();
+    renderWithTheme(
+      <Toggle checked={false} onChange={onChange} label="Toggle me" />
+    );
+    // Click the label (which wraps the checkbox)
+    fireEvent.click(screen.getByText('Toggle me'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with false when checked toggle is clicked', () => {
+    const onChange = vi.fn();
+    renderWithTheme(
+      <Toggle checked={true} onChange={onChange} label="Toggle off" />
+    );
+    fireEvent.click(screen.getByText('Toggle off'));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it('has an accessible checkbox input', () => {
+    renderWithTheme(
+      <Toggle checked={false} onChange={vi.fn()} label="Accessible" />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox.type).toBe('checkbox');
+  });
+});

package/dashboard/tests/hooks/useFetch.test.jsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import useFetch from '../../src/hooks/useFetch.js';
+
+describe('useFetch', () => {
+  const originalFetch = globalThis.fetch;
+
+  beforeEach(() => {
+    globalThis.fetch = vi.fn();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it('returns loading=true initially', () => {
+    globalThis.fetch.mockReturnValue(new Promise(() => {})); // never resolves
+    const { result } = renderHook(() => useFetch('/api/test'));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toBe(null);
+    expect(result.current.error).toBe(null);
+  });
+
+  it('sets data on successful fetch', async () => {
+    const mockData = { items: [1, 2, 3] };
+    globalThis.fetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockData),
+    });
+
+    const { result } = renderHook(() => useFetch('/api/test'));
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.data).toEqual(mockData);
+    expect(result.current.error).toBe(null);
+  });
+
+  it('sets error on failed fetch', async () => {
+    globalThis.fetch.mockResolvedValue({
+      ok: false,
+      status: 500,
+      statusText: 'Internal Server Error',
+    });
+
+    const { result } = renderHook(() => useFetch('/api/test'));
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.data).toBe(null);
+  });
+
+  it('refetch() triggers a new request', async () => {
+    let callCount = 0;
+    globalThis.fetch.mockImplementation(() => {
+      callCount++;
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ count: callCount }),
+      });
+    });
+
+    const { result } = renderHook(() => useFetch('/api/test'));
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.data).toEqual({ count: 1 });
+
+    await act(async () => {
+      result.current.refetch();
+    });
+    await waitFor(() => expect(result.current.data).toEqual({ count: 2 }));
+  });
+
+  it('skips fetch when endpoint is null', () => {
+    const { result } = renderHook(() => useFetch(null));
+    expect(result.current.loading).toBe(false);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+  });
+});

package/dashboard/tests/hooks/useToast.test.jsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { ToastProvider } from '../../src/hooks/useToast.jsx';
+import useToast from '../../src/hooks/useToast.jsx';
+import { ThemeProvider } from '../../src/theme/ThemeProvider.jsx';
+
+function wrapper({ children }) {
+  return (
+    <ThemeProvider>
+      <ToastProvider>{children}</ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('useToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('addToast adds a toast to the list', () => {
+    const { result } = renderHook(() => useToast(), { wrapper });
+
+    act(() => {
+      result.current.addToast('success', 'Item saved');
+    });
+
+    expect(result.current.toasts).toHaveLength(1);
+    expect(result.current.toasts[0].type).toBe('success');
+    expect(result.current.toasts[0].message).toBe('Item saved');
+  });
+
+  it('removeToast removes a toast by id', () => {
+    const { result } = renderHook(() => useToast(), { wrapper });
+
+    act(() => {
+      result.current.addToast('info', 'Hello');
+    });
+
+    const toastId = result.current.toasts[0].id;
+
+    act(() => {
+      result.current.removeToast(toastId);
+    });
+
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it('toast auto-removes after specified duration', () => {
+    const { result } = renderHook(() => useToast(), { wrapper });
+
+    act(() => {
+      result.current.addToast('warning', 'Temporary', 2000);
+    });
+
+    expect(result.current.toasts).toHaveLength(1);
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it('multiple toasts accumulate', () => {
+    const { result } = renderHook(() => useToast(), { wrapper });
+
+    act(() => {
+      result.current.addToast('success', 'First');
+      result.current.addToast('error', 'Second');
+    });
+
+    expect(result.current.toasts).toHaveLength(2);
+  });
+});

package/dashboard/tests/hooks/useWebSocket.test.jsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import useWebSocket from '../../src/hooks/useWebSocket.js';
+
+// Mock WebSocket
+class MockWebSocket {
+  constructor(url) {
+    this.url = url;
+    this.readyState = 0; // CONNECTING
+    MockWebSocket.instances.push(this);
+    // Auto-trigger callbacks after microtask
+    setTimeout(() => {
+      if (this.onopen) this.onopen();
+    }, 0);
+  }
+  close() {
+    this.readyState = 3; // CLOSED
+  }
+}
+MockWebSocket.instances = [];
+MockWebSocket.CONNECTING = 0;
+MockWebSocket.OPEN = 1;
+MockWebSocket.CLOSING = 2;
+MockWebSocket.CLOSED = 3;
+
+describe('useWebSocket', () => {
+  const originalWebSocket = globalThis.WebSocket;
+
+  beforeEach(() => {
+    MockWebSocket.instances = [];
+    globalThis.WebSocket = MockWebSocket;
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    globalThis.WebSocket = originalWebSocket;
+    vi.useRealTimers();
+  });
+
+  it('starts with connecting status', () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+    expect(result.current.status).toBe('connecting');
+  });
+
+  it('changes to connected on WebSocket open', async () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+
+    expect(result.current.status).toBe('connected');
+  });
+
+  it('parses incoming messages and adds to events', async () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+
+    const ws = MockWebSocket.instances[0];
+    act(() => {
+      ws.onmessage({ data: JSON.stringify({ type: 'test', msg: 'hello' }) });
+    });
+
+    expect(result.current.events).toHaveLength(1);
+    expect(result.current.events[0]).toEqual({ type: 'test', msg: 'hello' });
+  });
+
+  it('sets reconnecting status on close after connection', async () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+    expect(result.current.status).toBe('connected');
+
+    act(() => {
+      const ws = MockWebSocket.instances[0];
+      ws.onclose();
+    });
+
+    expect(result.current.status).toBe('reconnecting');
+  });
+
+  it('receives file-change messages from file-watcher', async () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+
+    const ws = MockWebSocket.instances[0];
+    const fileChangeEvent = {
+      type: 'phase',
+      source: 'file-watcher',
+      msg: 'change: STATE.md',
+    };
+
+    act(() => {
+      ws.onmessage({ data: JSON.stringify(fileChangeEvent) });
+    });
+
+    expect(result.current.events).toHaveLength(1);
+    expect(result.current.events[0]).toEqual(fileChangeEvent);
+    expect(result.current.events[0].source).toBe('file-watcher');
+  });
+
+  it('clearEvents empties the events array', async () => {
+    const { result } = renderHook(() => useWebSocket('ws://localhost:3141/ws'));
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+
+    const ws = MockWebSocket.instances[0];
+    act(() => {
+      ws.onmessage({ data: JSON.stringify({ type: 'test' }) });
+    });
+    expect(result.current.events).toHaveLength(1);
+
+    act(() => {
+      result.current.clearEvents();
+    });
+    expect(result.current.events).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,199 @@
+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';
+
+// Mock useFetch
+const mockRefetch = vi.fn();
+vi.mock('../../src/hooks/useFetch.js', () => ({
+  default: vi.fn(() => ({
+    data: null,
+    loading: true,
+    error: null,
+    refetch: mockRefetch,
+  })),
+}));
+
+// Mock useWebSocket
+vi.mock('../../src/hooks/useWebSocket.js', () => ({
+  default: vi.fn(() => ({
+    status: 'connected',
+    events: [],
+    clearEvents: vi.fn(),
+  })),
+}));
+
+// Mock apiPut
+vi.mock('../../src/lib/api.js', () => ({
+  apiPut: vi.fn(() => Promise.resolve({})),
+}));
+
+import useFetch from '../../src/hooks/useFetch.js';
+import ConfigPage from '../../src/pages/ConfigPage.jsx';
+
+function renderPage() {
+  return render(
+    <ThemeProvider>
+      <ToastProvider>
+        <ConfigPage />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+const mockConfig = {
+  version: 2,
+  context_strategy: 'aggressive',
+  mode: 'autonomous',
+  depth: 'standard',
+  features: {
+    structured_planning: true,
+    goal_verification: true,
+    integration_verification: true,
+    context_isolation: true,
+    atomic_commits: true,
+    session_persistence: true,
+    research_phase: true,
+    plan_checking: true,
+    tdd_mode: true,
+    status_line: true,
+    auto_continue: true,
+    auto_advance: false,
+    team_discussions: false,
+    inline_verify: false,
+  },
+  models: {
+    researcher: 'sonnet',
+    planner: 'opus',
+    executor: 'opus',
+    verifier: 'sonnet',
+    integration_checker: 'sonnet',
+    debugger: 'inherit',
+    mapper: 'sonnet',
+    synthesizer: 'sonnet',
+  },
+  parallelization: {
+    enabled: true,
+    plan_level: true,
+    task_level: false,
+    max_concurrent_agents: 3,
+    min_plans_for_parallel: 2,
+    use_teams: false,
+  },
+  planning: {
+    commit_docs: false,
+    max_tasks_per_plan: 3,
+    search_gitignored: false,
+  },
+  git: {
+    branching: 'phase',
+    commit_format: '{type}({phase}-{plan}): {description}',
+    phase_branch_template: 'plan-build-run/phase-{phase}-{slug}',
+    milestone_branch_template: 'plan-build-run/{milestone}-{slug}',
+    mode: 'enabled',
+  },
+  gates: {
+    confirm_project: true,
+    confirm_roadmap: true,
+    confirm_plan: true,
+    confirm_execute: false,
+    confirm_transition: true,
+    issues_review: true,
+    verification: true,
+    review: true,
+    plan_approval: true,
+  },
+  safety: {
+    always_confirm_destructive: true,
+    always_confirm_external_services: true,
+  },
+};
+
+describe('ConfigPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows loading skeletons while fetching config', () => {
+    useFetch.mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+      refetch: mockRefetch,
+    });
+
+    const { container } = renderPage();
+    // LoadingSkeleton renders Card elements during loading
+    expect(container.querySelectorAll('div').length).toBeGreaterThan(0);
+  });
+
+  it('shows error message when fetch fails', () => {
+    useFetch.mockReturnValue({
+      data: null,
+      loading: false,
+      error: new Error('Network error'),
+      refetch: mockRefetch,
+    });
+
+    renderPage();
+    expect(screen.getByText(/Failed to load configuration/)).toBeInTheDocument();
+    expect(screen.getByText(/Network error/)).toBeInTheDocument();
+  });
+
+  it('shows retry button on error', () => {
+    useFetch.mockReturnValue({
+      data: null,
+      loading: false,
+      error: new Error('Network error'),
+      refetch: mockRefetch,
+    });
+
+    renderPage();
+    const retryBtn = screen.getByText('Retry');
+    fireEvent.click(retryBtn);
+    expect(mockRefetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders config sections when data loads', () => {
+    useFetch.mockReturnValue({
+      data: mockConfig,
+      loading: false,
+      error: null,
+      refetch: mockRefetch,
+    });
+
+    renderPage();
+    // Should show config info and tab bar
+    expect(screen.getByText(/Configuration applies to/)).toBeInTheDocument();
+    // Tab bar should show Quick Start and Advanced
+    expect(screen.getByText('Quick Start')).toBeInTheDocument();
+    expect(screen.getByText('Advanced')).toBeInTheDocument();
+  });
+
+  it('switches between Quick Start and Advanced tabs', () => {
+    useFetch.mockReturnValue({
+      data: mockConfig,
+      loading: false,
+      error: null,
+      refetch: mockRefetch,
+    });
+
+    renderPage();
+    // Click Advanced tab
+    fireEvent.click(screen.getByText('Advanced'));
+    // Should show the Preview section with JSON
+    expect(screen.getByText('Preview')).toBeInTheDocument();
+  });
+
+  it('shows Preview card with JSON config', () => {
+    useFetch.mockReturnValue({
+      data: mockConfig,
+      loading: false,
+      error: null,
+      refetch: mockRefetch,
+    });
+
+    renderPage();
+    expect(screen.getByText('Preview')).toBeInTheDocument();
+  });
+});