working companion prototype

resources/mock-fixtures/README.md

@@ -0,0 +1,113 @@
+# Mock HTML Fixtures
+
+Simplified HTML fixtures for E2E testing of the iRacing hosted session automation workflow.
+
+## Purpose
+
+These fixtures replace full-page iRacing dumps with lightweight, testable HTML pages that simulate the iRacing hosted session wizard. They are designed for use with the `FixtureServer` to test browser automation adapters in isolation.
+
+## Files
+
+| File | Step | Description |
+|------|------|-------------|
+| `step-02-hosted-racing.html` | 2 | Landing page with "Create a Race" button |
+| `step-03-create-race.html` | 3 | Race Information - session name, password, description |
+| `step-04-race-information.html` | 4 | Server Details - region, start time |
+| `step-05-server-details.html` | 5 | Set Admins - admin list management |
+| `step-06-set-admins.html` | 7 | Time Limits - practice, qualify, race durations |
+| `step-07-add-admin.html` | 6 | Add Admin Modal - search and select admin |
+| `step-08-time-limits.html` | 8 | Set Cars - car list management |
+| `step-09-set-cars.html` | 10 | Set Car Classes - multi-class configuration |
+| `step-10-add-car.html` | 9 | Add Car Modal - search and select cars |
+| `step-11-set-car-classes.html` | 11 | Set Track - track selection |
+| `step-12-set-track.html` | 13 | Track Options - configuration, dynamic track |
+| `step-13-add-track.html` | 12 | Add Track Modal - search and select track |
+| `step-14-track-options.html` | 14 | Time of Day - time slider, date, simulated time |
+| `step-15-time-of-day.html` | 15 | Weather - type, temperature, humidity |
+| `step-16-weather.html` | 16 | Race Options - max drivers, start type, cautions |
+| `step-17-race-options.html` | 17 | Team Driving - enable teams, min/max drivers |
+| `step-18-track-conditions.html` | 18 | Track Conditions - track state, marbles, rubber |
+| `common.css` | - | Shared styles for all fixtures |
+
+## Data Attributes
+
+All fixtures use consistent `data-*` attributes for reliable automation:
+
+### Navigation
+- `data-action="create"` - Create a Race button (step 2)
+- `data-action="next"` - Next step button
+- `data-action="back"` - Previous step button
+- `data-action="confirm"` - Confirm modal action
+- `data-action="cancel"` - Cancel modal action
+- `data-action="select"` - Select item from list
+
+### Step Identification
+- `data-step="N"` - Step number on body element
+- `data-indicator="name"` - Step indicator element
+
+### Form Fields
+- `data-field="name"` - Text/number inputs and textareas
+- `data-dropdown="name"` - Select dropdowns
+- `data-toggle="name"` - Checkbox toggles
+- `data-slider="name"` - Range slider inputs
+
+### Modals
+- `data-modal="true"` - Modal container (on body)
+- `data-modal-trigger="type"` - Button that opens a modal
+
+### Lists
+- `data-list="name"` - List container
+- `data-item="id"` - Selectable list item
+
+## Usage with FixtureServer
+
+```typescript
+import { FixtureServer } from '@infrastructure/adapters/automation/FixtureServer';
+
+const server = new FixtureServer({ fixturesPath: 'resources/mock-fixtures' });
+await server.start();
+
+// Navigate to step 2
+await page.goto(`${server.baseUrl}/step-02-hosted-racing.html`);
+
+// Use data attributes for automation
+await page.click('[data-action="create"]');
+await page.fill('[data-field="sessionName"]', 'My Race');
+await page.click('[data-action="next"]');
+```
+
+## Selector Strategy
+
+Use attribute selectors for reliable automation:
+
+```typescript
+const SELECTORS = {
+  stepContainer: (step: number) => `[data-step="${step}"]`,
+  nextButton: '[data-action="next"]',
+  backButton: '[data-action="back"]',
+  field: (name: string) => `[data-field="${name}"]`,
+  dropdown: (name: string) => `[data-dropdown="${name}"]`,
+  toggle: (name: string) => `[data-toggle="${name}"]`,
+  slider: (name: string) => `[data-slider="${name}"]`,
+  modal: '[data-modal="true"]',
+  modalTrigger: (type: string) => `[data-modal-trigger="${type}"]`,
+};
+```
+
+## Design Principles
+
+1. **Explicit Test Attributes**: Every interactive element has stable `data-*` attributes
+2. **Minimal HTML**: Only essential structure, no framework artifacts
+3. **Self-Contained**: Each fixture includes shared CSS via `common.css`
+4. **Navigation-Aware**: Buttons link to appropriate next/previous fixtures
+5. **Form Fields Match Domain**: Field names align with `HostedSessionConfig` entity
+
+## Testing Verification
+
+For each fixture, verify:
+- [ ] `data-step` attribute present on body
+- [ ] `data-indicator` present for step identification
+- [ ] All navigation buttons have `data-action`
+- [ ] All form fields have appropriate `data-*` attributes
+- [ ] Modal fixtures have `data-modal="true"`
+- [ ] Navigation links point to correct fixtures