Major testing infrastructure upgrade from manual mocks to Mock Service Worker (MSW):
New MSW infrastructure (tests/msw/):
- Add state.ts: In-memory state manager with full CRUD operations
- Manage providers and current selections per app type (Claude/Codex)
- Auto-switch current provider when deleted
- Deep clone to prevent reference pollution
- Add handlers.ts: HTTP request handlers for 10 Tauri API endpoints
- Mock get_providers, switch_provider, add/update/delete_provider
- Mock update_sort_order, update_tray_menu, import_default_config
- Support error scenarios (404 for non-existent providers)
- Add tauriMocks.ts: Tauri API mock layer
- Transparently convert invoke() calls to HTTP requests
- Mock event listener system with emitTauriEvent helper
- Use cross-fetch for Node.js environment
- Add server.ts: MSW server setup for Node.js test environment
Refactor App.test.tsx (-170 lines, -43%):
- Remove 23 manual mocks (useProvidersQuery, useProviderActions, etc.)
- Run real hooks with MSW-backed API calls instead of mock implementations
- Test real state changes instead of mock call counts
- Add comprehensive flow: duplicate → create → edit → delete → event listening
- Verify actual provider list changes and current selection updates
Setup integration:
- Add MSW server lifecycle to tests/setupTests.ts
- Start server before all tests
- Reset handlers and state after each test
- Close server after all tests complete
- Clear all mocks in afterEach for test isolation
Dependencies:
- Add msw@^2.11.6 for API mocking
- Add cross-fetch@^4.1.0 for fetch polyfill in Node.js
Type fixes:
- Add missing imports (AppType, Provider) in handlers.ts
- Fix HttpResponse.json generic constraint with as any (MSW best practice)
- Change invalid category "default" to "official" in state.ts
Test results: All 50 tests passing across 8 files, 0 TypeScript errors
Enhanced SettingsDialog component test coverage:
- Add test for import/export status reset on dialog open
- Add test for onImportSuccess callback propagation to hook
- Add test for postponing restart flow (restart later button)
- Add test for directory management callbacks (browse/reset/change)
- Expand existing test to cover export, import, and clear actions
- Fix type safety issues (avoid 'as any', use type guards)
New App.test.tsx integration test:
- Add comprehensive end-to-end test for main App component
- Test settings dialog with import success callback and tray menu update
- Test app switcher between Claude and Codex
- Test provider CRUD operations (add, edit, delete, duplicate)
- Test usage script modal workflow
- Test external website link opening
- Use vi.hoisted() pattern for centralized mock management
Technical improvements:
- Remove two environment-dependent tests (DEV flag) that required 'as any'
- Use proper type guards for optional callback invocation
- Clean up unused mock variables (switchProviderMock, onImportSuccessMock, refetchPromise)
- Simplify useProviderActions mock to avoid spread argument type error
Test results: 50 tests passing across 8 test files
Add component tests for ImportExportSection and SettingsDialog with full coverage of UI interactions, state management, and async workflows.
ImportExportSection.test.tsx (5 tests):
- Verify button states based on file selection
- Test import/export/clear interactions
- Validate loading, success, and error UI states
SettingsDialog.test.tsx (5 tests):
- Test loading state rendering
- Verify tab navigation and child component callbacks
- Validate save/cancel workflows with cleanup
- Test restart prompt and immediate restart flow
- Use Context Provider pattern to mock Tabs component
- Mock 7 child components for isolation
Test patterns demonstrated:
- Complex component isolation with deep mocking
- Context Provider mocking for UI library components
- Async workflow validation with waitFor
- Multi-hook mocking (useSettings + useImportExport)
All 45 tests passing (7 files, 1.13s execution time)
Add extensive unit and component tests covering import/export, settings,
and provider list functionality, advancing to Sprint 2 of test development.
Hook Tests:
- useImportExport (11 tests):
* File selection success/failure flows
* Import process with success/failure/exception paths
* Export functionality with error handling
* User cancellation scenarios
* State management (clear selection, reset status)
* Fake timers for async callback testing
- useSettingsForm (5 tests):
* Settings normalization on initialization
* Language persistence from localStorage
* Field updates with language sync
* Reset functionality with initial language restoration
* Optimization to avoid redundant language changes
Component Tests:
- ProviderList (3 tests):
* Loading state with skeleton placeholders
* Empty state with create callback
* Render order from useDragSort with action callbacks
* Props pass-through (isCurrent, isEditMode, dragHandleProps)
* Mock ProviderCard to isolate component under test
Technical Highlights:
- Fake timers (vi.useFakeTimers) for async control
- i18n mock with changeLanguage spy
- Partial mock of @dnd-kit/sortable using vi.importActual
- ProviderCard render spy for props verification
- Comprehensive error handling coverage
Test Coverage:
✓ 19 new test cases (11 + 5 + 3)
✓ Total: 35 tests passing
✓ Execution time: 865ms
✓ TypeScript: 0 errors
Related: Import/export, settings management, provider list rendering
Sprint Progress: Sprint 1 complete, Sprint 2 in progress (component tests)
Jason ·