# 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