Vitest Workflow Testing

Relevant source files

The following files were used as context for generating this wiki page:

• workflows/windowManager.test.ts
• workflows/contactForm.test.ts
• vitest.config.ts
• package.json
• context/WindowManagerContext.tsx
• features/contact/hooks/useContactForm.ts

Vitest workflow testing in this project focuses on verifying the core logic of state reducers that drive the interactive "OS-style" portfolio experience. The testing suite ensures that complex state transitions—such as window management and form submission lifecycles—behave predictably by isolating the pure logic (reducers) from the React rendering layer.

This approach allows for rigorous validation of state changes, including z-index management for window focusing, geometry updates for resizing, and status transitions for asynchronous form operations. The tests are executed using the Vitest runner in a Node.js environment.
Sources: vitest.config.ts:4-7, package.json:9-10, workflows/windowManager.test.ts:13-17

Testing Infrastructure and Configuration

The testing environment is configured to prioritize speed and accuracy for TypeScript-based logic. The project uses vitest as the primary test runner, with configuration defined to target specific file patterns and execution environments.

Test Runner Configuration

The configuration specifies a node environment, which is suitable for testing pure functions and reducers without the overhead of a full browser DOM, although React components in the project utilize these tested workflows via hooks.
Sources: vitest.config.ts:1-7, package.json:28

Property	Value	Description
environment	node	Execution environment for tests
include	["**/*.test.ts"]	Pattern for identifying test files
scripts.test	vitest run	Command for CI/single-run execution
scripts.test:watch	vitest	Command for development watch mode
Sources: vitest.config.ts:5-6, package.json:9-10

Window Manager Logic Testing

The windowReducer is the core engine for the portfolio's multi-window interface. Tests in workflows/windowManager.test.ts validate that the state transition logic correctly handles opening, focusing, minimizing, and closing windows.

Window State Transitions

The following diagram illustrates the state flow managed by the windowReducer as verified by the test suite:

The state management logic ensures that re-opening a window restores it rather than creating a duplicate, maintaining a "single-instance" application model.
Sources: workflows/windowManager.test.ts:22-30, context/WindowManagerContext.tsx:32-44

Key Test Scenarios

• Z-Index Management: Tests verify that focusing a window increases its zIndex above all other active windows.
• Geometry Persistence: The move and resize actions must correctly update the x, y, width, and height properties in the state.
• Focus Preservation: Closing or minimizing a non-focused window must not interrupt the focusedId of the currently active window.
  Sources: workflows/windowManager.test.ts:32-39, workflows/windowManager.test.ts:50-60, workflows/windowManager.test.ts:62-68

Contact Form Workflow Testing

The contact form uses a dedicated reducer to manage the asynchronous submission lifecycle. The tests in workflows/contactForm.test.ts validate the linear and error-handling paths of the submission process.

Submission Lifecycle

The contact form logic follows a state machine pattern where the status transitions between idle, submitting, success, and error.

The integration of this workflow is seen in the useContactForm hook, which dispatches these actions during the simulated form submission.
Sources: workflows/contactForm.test.ts:9-25, features/contact/hooks/useContactForm.ts:9-18

Reducer State Structure

Tests verify the following status field transitions within the contact state:

Action Type	Previous Status	Resulting Status	Notes
submit	idle	submitting	Triggers UI loading state
resolve	submitting	success	Shows success message
reject	submitting	error	Shows error message
reset	(Any)	idle	Clears form status
Sources: workflows/contactForm.test.ts:5-26

Conclusion

Vitest Workflow Testing provides a robust foundation for the portfolio project by ensuring the underlying state machines for windowing and form interactions are flawless. By focusing on reducer logic, the project maintains a clear separation between business logic and UI presentation, facilitating easier debugging and future feature expansion.
Sources: workflows/windowManager.test.ts:13-17, workflows/contactForm.test.ts:5-8