- Add vitest/globals to tsconfig.json types array to provide type
definitions for global test functions (describe, it, expect, vi)
- Fix vi.fn type parameter in useDirectorySettings.test.tsx from
<[], Promise<string>> to <() => Promise<string>>
- Remove unused setMcpConfig import from MSW handlers
- Add type assertions for mock.calls access in McpFormModal tests
to resolve union type inference issues
This ensures pnpm typecheck passes without errors while maintaining
test functionality with vitest globals: true configuration.
## McpFormModal Component Tests (+5 tests)
### Infrastructure Improvements
- Enhance McpWizardModal mock from null to functional mock with testable onApply callback
- Refactor renderForm helper to support custom onSave/onClose mock injection
- Add McpServer type import for type-safe test data
### New Test Cases
1. **Wizard Integration**: Verify wizard generates config and auto-fills ID + JSON fields
- Click "Use Wizard" → Apply → Form fields populated with wizard-id and config
- Uses act() wrapper for React 18 async state updates
2. **TOML Auto-extraction (Codex)**: Test TOML → JSON conversion with ID extraction
- Parse `[mcp.servers.demo]` → auto-fill ID as "demo"
- Verify server object correctly parsed from TOML format
- Codex-specific feature for config.toml compatibility
3. **TOML Validation Error**: Test missing required field handling
- TOML with type="stdio" but no command → block submit
- Display localized error toast: mcp.error.idRequired (3s duration)
4. **Edit Mode Immutability**: Verify ID field disabled during edit
- ID input has disabled attribute and keeps original value
- Config updates applied while enabled state preserved
- syncOtherSide defaults to false in edit mode
5. **Error Recovery**: Test save failure button state restoration
- Inject failing onSave mock → trigger error
- Verify toast error displays translated message
- Submit button disabled state resets to false for retry
## useMcpActions Hook Tests (+2 tests)
### New API Mocks
- Add syncEnabledToClaude and syncEnabledToCodex mock functions
### New Test Cases
1. **Backend Error Message Mapping**: Map Chinese error to i18n key
- Backend: "stdio 类型的 MCP 服务器必须包含 command 字段"
- Frontend: mcp.error.commandRequired (6s toast duration)
2. **Cross-app Sync Logic**: Verify conditional sync behavior
- claude → claude: setEnabled called, syncEnabledToClaude NOT called
- Validates sync only occurs when crossing app types
## Minor Changes
- McpPanel.test.tsx: Add trailing newline (formatter compliance)
## Test Coverage
- Test files: 17 (unchanged)
- Total tests: 112 → 119 (+7, +6.3%)
- Execution time: 3.20s
- All 119 tests passing ✅
## MSW Infrastructure Enhancement
- Add 5 MCP API handlers to tests/msw/handlers.ts:
- get_mcp_config: Fetch MCP configuration for app type
- import_mcp_from_claude/codex: Mock import operations (returns count: 1)
- set_mcp_enabled: Toggle MCP server enabled state
- upsert_mcp_server_in_config: Create/update MCP server
- delete_mcp_server_in_config: Remove MCP server
- Add MCP state management to tests/msw/state.ts:
- McpConfigState type with per-app server storage
- Default test data (stdio server for Claude, http server for Codex)
- CRUD functions: getMcpConfig, setMcpServerEnabled, upsertMcpServer, deleteMcpServer
- Immutable state operations with deep cloning
## McpFormModal Component Tests (4 tests)
- Test preset application: Verify ID and config JSON auto-fill from preset selection
- Test conflict detection: Async validation shows warning when syncing to conflicting ID
- Test field sanitization: Verify trim whitespace, split tags, clean URLs before save
- Test validation errors: Block submit and show toast error for invalid stdio config (missing command)
## McpPanel Integration Tests (3 tests)
- Test toggle enabled state: Click toggle button triggers useMcpActions.toggleEnabled with correct params
- Test create server flow: Open form → submit → saveServer called with syncOtherSide option
- Test delete server flow: Click delete → confirm dialog → deleteServer called with ID
## Test Utilities
- Add createTestQueryClient helper with retry: false for faster test execution
## Test Coverage
- Test files: 15 → 17 (+2)
- Total tests: 105 → 112 (+6.7%)
- All 112 tests passing
- Execution time: 3.15s
Milestone Achievement: 100% Hooks Coverage 🎉
- Hooks coverage: 87.5% (7/8) → 100% (8/8)
- Total tests: 81 → 105 (+29.6%)
- MCP functionality: 0 → 24 tests
useMcpActions Tests (8 tests):
- Test server reload with loading state management
- Use deferred promise pattern to verify loading state transitions
- Verify intermediate loading=true state during async operation
- Verify error toast (duration: 6s) on reload failure
- Ensure loading returns to false after error
- Test optimistic toggle with rollback on failure
- Immediately update enabled flag before API confirmation
- Verify success toast messages for enable/disable
- Roll back state to original value on API failure
- Show error toast (duration: 6s) when toggle fails
- Test server save with list refresh
- Verify ID rewrite logic: saveServer(newId, {...input, id: oldId}) → {id: newId}
- Verify syncOtherSide option correctly propagated to API
- Refresh server list after successful save
- Propagate errors to caller while showing error toast
- Do not refresh list when save fails
- Test server delete with state management
- Verify deleteServerInConfig called with correct parameters
- Verify list refresh removes deleted server
- Show success toast (duration: 1.5s) on delete
- Keep state unchanged on delete failure
- Propagate error to caller with error toast
useMcpValidation Tests (16 tests):
- Test JSON validation (4 tests)
- Return empty string for blank/whitespace text
- Return "mcp.error.jsonInvalid" for parsing failures
- Reject non-object types (string, array)
- Accept valid object payloads
- Test TOML error formatting (2 tests)
- Map mustBeObject/parseError to "mcp.error.tomlInvalid"
- Append error details for unknown errors
- Test TOML config validation (5 tests)
- Propagate errors from validateToml utility
- Return "mcp.error.commandRequired" for stdio without command
- Return "mcp.wizard.urlRequired" for http without url
- Catch and format tomlToMcpServer exceptions
- Return empty string when validation passes
- Test JSON config validation (5 tests)
- Reject invalid JSON syntax
- Reject mcpServers array format (single object required)
- Require command field for stdio type servers
- Require url field for http type servers
- Accept valid server configurations
Technical Highlights:
- Deferred Promise Pattern: Precise async timing control
- Optimistic Updates: Test immediate feedback + rollback
- Error Propagation: Distinguish caller errors vs toast notifications
- i18n Validation: All validators return translation keys
- Factory Functions: Reusable test data builders
All tests passing: 105/105
Mock Refactoring:
- Extract saveFileDialogMock and exportConfigMock as variables
- Previously used inline vi.fn() which prevented call verification
- Now supports expect().toHaveBeenCalledWith() assertions
- Enables parameter and return value validation
- Add mock reset in beforeEach for test isolation
- Reset saveFileDialogMock state
- Reset exportConfigMock state
- Ensures clean state for each test
New Test: Import Failure Callback Verification
- Add test "does not call onImportSuccess when import fails"
- User selects file successfully
- Import operation fails (success: false)
- Verify onImportSuccess callback NOT called
- Verify status becomes "error"
- Prevents triggering success logic on failure
New Test: Export Success Message Verification
- Add test "propagates export success message to toast with saved path"
- User selects save location: /exports/config.json
- Backend saves to: /final/config.json (may differ)
- Verify exportConfigMock called with user-selected path
- Verify toast success message contains actual saved path
- Ensures user sees correct save location
Coverage Improvements:
- Import failure callback: 50% → 100%
- Export success message: 50% → 100%
- Mock verification capability: 0% → 100%
All tests passing: 81/81 (2 new tests)
useSettings Tests:
- Add test for null settings state protection
- Returns null immediately without calling APIs
- Prevents null pointer errors in save flow
- Add test for save mutation failure
- Verifies error propagates to caller
- Ensures restart flag remains untouched on failure
- Validates no side effects when save fails
useProviderActions Tests:
- Add error propagation tests for CRUD operations
- updateProvider: propagates errors to caller
- addProvider: propagates errors to caller
- deleteProvider: propagates errors to caller
- Add switch mutation error handling tests
- Claude switch: handles errors silently (no throw)
- Codex switch: skips plugin sync when mutation fails
- Verifies plugin sync APIs not called on failure
- Add loading state verification
- Test all mutations pending scenario (existing)
- Test all mutations idle scenario (new)
- Ensures isLoading flag accuracy
useImportExport Edge Case Tests (new file):
- Add test for user cancelling file dialog
- File dialog returns null (user cancelled)
- State remains unchanged (selectedFile: "", status: "idle")
- No error toast shown
- Add test for resetStatus behavior
- Clears error message and status
- Preserves selected file path for retry
- Resets backupId to null
All tests passing: 79/79 (10 new tests)
useDirectorySettings Tests:
- Test directory initialization with overrides and remote defaults
- Verify app config override with space trimming
- Load Claude/Codex directories from remote API
- Calculate resolvedDirs correctly
- Test directory browsing functionality
- Browse Claude/Codex config directories
- Browse app config directory with proper default paths
- Update settings callback when selection succeeds
- Test error handling scenarios
- User cancels directory selection (returns null)
- Directory picker throws error (shows toast)
- Verify settings not updated on failure
- Test directory reset operations
- Reset individual directories to computed defaults
- Reset app config directory
- Batch reset with provided server values
- Use vi.hoisted() for proper mock initialization
- Factory function for settings creation (reusability)
useSettingsMetadata Tests:
- Test portable mode flag loading
- Verify initial loading state
- Load portable flag from API
- Handle async state transitions
- Test error tolerance when API fails
- Silent failure on network errors
- Default to non-portable mode
- Continue without blocking UI
- Test restart flag management
- Set restart required flag
- Acknowledge restart to clear flag
- State updates wrapped in act()
All tests passing: 10/10 (7 useDirectorySettings + 3 useSettingsMetadata)
SettingsDialog Integration Tests:
- Add test for directory browsing and reset functionality
- Verify app config directory browse/reset flow
- Verify Claude config directory manual change, browse, and reset
- Test multiple directory inputs with getAllByTitle pattern
- Add test for export failure error handling
- User cancels file selection (save_file_dialog returns null)
- Export operation fails (disk full scenario)
- Use server.use() to dynamically override MSW handlers
- Verify toast error messages match i18n keys
MSW Handler Extension:
- Add pick_directory handler to support directory selection API
- Consistent with select_config_directory mock strategy
useSettings Hook Unit Tests:
- Add comprehensive tests for settings save logic
- Test restart flag when app config directory changes
- Test no restart when directory unchanged
- Verify space trimming and empty string to undefined conversion
- Test Claude plugin sync failure tolerance
- Add test for settings reset functionality
- Verify form/language/directories reset with server data
- Use factory functions for mock creation (reusability)
- Complete dependency isolation with mock hooks
All tests passing: 9/9 (5 integration + 4 unit tests)
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)
