Playwright Interaction Testing
Relevant source files
The following files were used as context for generating this wiki page:
Playwright interaction testing in this project focuses on validating the macOS-style desktop environment's behavioral logic, specifically regarding window management and form interactions. While the project primarily utilizes Vitest for unit and logic testing, the architecture is designed to support high-level interaction flows such as opening, moving, resizing, and closing applications within the simulated OS.
The testing strategy ensures that state transitions—managed by a central windowReducer—correctly reflect user intent across the UI. This includes managing z-index priorities for focused windows and ensuring single-instance application behavior.
Core Interaction Logic
The project's interaction model is built around a centralized state machine that handles all desktop activities. Interaction testing validates that when a user interacts with elements like the MenuBar or Window controls, the underlying state updates predictably.
Window State Transitions
The windowReducer handles complex logic for windowing, which is a primary target for interaction testing. Key interactions include:
- Opening/Focusing: Validating that opening an app sets the
focusedIdand increases itszIndex. - Single-Instance Logic: Ensuring that re-opening an already open (but minimized) window restores and focuses it rather than creating a duplicate.
- Geometry Updates: Testing the
moveandresizeactions to ensure coordinate systems update correctly.
Component Interaction Roles
Components use specific ARIA roles and data attributes to facilitate interaction testing and accessibility.
| Component | Role / Attribute | Interaction Focus |
|---|---|---|
Window | role="dialog" | Dragging (title bar), Resizing (bottom-corner), Control buttons |
Textarea | data-slot="textarea" | Input validation, focus states |
MenuBar | header | Language switching, active window title display |
MobileHome | button | Application launching |
Sources: features/desktop/components/Window.tsx:55, components/ui/textarea.tsx:8, features/desktop/components/MenuBar.tsx:40
Testing Infrastructure
The project uses vitest for executing interaction logic tests. While the package.json defines standard test scripts, the interaction tests are located within workflows/ to separate business logic from UI rendering.
Test Execution Scripts
"scripts": {
"test": "vitest run",
"test:watch": "vitest"
}
Sources: package.json:11-12
Interaction Flow Example: Contact Form
Interaction testing for the contact form validates the state progression from idle to submitting, and finally to success or error states. This ensures that the UI correctly disables buttons during asynchronous operations.
Window Management Interactions
The WindowManagerProvider exposes several functions that serve as the primary API for interaction testing:
open(appId, geometry): Initializes a window at specific coordinates.focus(id): Brings a window to the front by updating z-index.move(id, x, y): Updates the window's top/left position.resize(id, width, height): Updates dimensions, constrained byMIN_W(320) andMIN_H(240).
Geometry Constraints
When testing interactions, the system enforces boundaries. For example, the Window component limits movement so that the title bar remains accessible within the viewport.
const maxX = window.innerWidth - 80;
const maxY = window.innerHeight - 40;
const x = Math.min(Math.max(startPos.x + dx, -win.width + 120), maxX);
const y = Math.min(Math.max(startPos.y + dy, 28), maxY);
move(win.id, x, y);
Sources: features/desktop/components/Window.tsx:10, features/desktop/components/Window.tsx:32-37
Conclusion
Interaction testing within this portfolio project ensures that the simulated desktop environment maintains state integrity. By verifying the windowReducer and contactReducer through Vitest, the application guarantees that complex UI behaviors like window layering and form submission flows operate correctly before they are rendered in the browser.