|
| 1 | +# E2E Test Patterns |
| 2 | + |
| 3 | +## TestScenario Builder API |
| 4 | + |
| 5 | +Location: `client/tests/lib/` |
| 6 | + |
| 7 | +### Basic Usage |
| 8 | + |
| 9 | +```typescript |
| 10 | +import { test, expect } from '@playwright/test'; |
| 11 | +import { TestScenario } from './lib'; |
| 12 | + |
| 13 | +test('facilitator can create a rubric', async ({ page }) => { |
| 14 | + const scenario = await TestScenario.create(page) |
| 15 | + .withWorkshop({ name: 'My Workshop' }) |
| 16 | + .withFacilitator() |
| 17 | + .withParticipants(2) |
| 18 | + .withTraces(5) |
| 19 | + .inPhase('rubric') |
| 20 | + .build(); |
| 21 | + |
| 22 | + await scenario.loginAs(scenario.facilitator); |
| 23 | + await expect(page.getByRole('heading', { name: 'My Workshop' })).toBeVisible(); |
| 24 | + await scenario.cleanup(); |
| 25 | +}); |
| 26 | +``` |
| 27 | + |
| 28 | +### Workshop Configuration |
| 29 | + |
| 30 | +```typescript |
| 31 | +.withWorkshop() // Default workshop |
| 32 | +.withWorkshop({ name: 'Custom Name' }) // Named workshop |
| 33 | +.withWorkshop({ name: 'W', description: 'D' }) // With description |
| 34 | +``` |
| 35 | + |
| 36 | +### User Configuration |
| 37 | + |
| 38 | +```typescript |
| 39 | +.withFacilitator() // Default facilitator |
| 40 | +.withFacilitator({ email: 'a@b.com' }) // Custom email |
| 41 | +.withParticipants(3) // 3 participants |
| 42 | +.withSMEs(2) // 2 SME users |
| 43 | +.withUser('participant', { name: 'Alice' }) // Named user |
| 44 | +``` |
| 45 | + |
| 46 | +### Data Configuration |
| 47 | + |
| 48 | +```typescript |
| 49 | +.withTraces(5) // 5 mock traces |
| 50 | +.withRubric({ question: 'How helpful?' }) // Add rubric |
| 51 | +.withDiscoveryFinding({ insight: '...' }) // Add finding |
| 52 | +.withDiscoveryComplete() // Mark discovery done |
| 53 | +.withAnnotation({ rating: 4, comment: '...' }) // Add annotation |
| 54 | +``` |
| 55 | + |
| 56 | +### Phase Configuration |
| 57 | + |
| 58 | +```typescript |
| 59 | +.inPhase('intake') // Initial phase |
| 60 | +.inPhase('discovery') // Discovery phase |
| 61 | +.inPhase('rubric') // Rubric creation |
| 62 | +.inPhase('annotation') // Annotation phase |
| 63 | +.inPhase('results') // Results phase |
| 64 | +``` |
| 65 | + |
| 66 | +### Mock vs Real API |
| 67 | + |
| 68 | +```typescript |
| 69 | +// Default: everything mocked |
| 70 | +.build() |
| 71 | + |
| 72 | +// Selective real endpoints |
| 73 | +.withReal('/users/auth/login') |
| 74 | +.withReal('WorkshopsService') |
| 75 | + |
| 76 | +// No mocking (full integration) |
| 77 | +.withRealApi() |
| 78 | +``` |
| 79 | + |
| 80 | +## Accessing Scenario Data |
| 81 | + |
| 82 | +```typescript |
| 83 | +scenario.workshop // Workshop object |
| 84 | +scenario.facilitator // First facilitator |
| 85 | +scenario.users.participant // Array of participants |
| 86 | +scenario.users.sme // Array of SMEs |
| 87 | +scenario.traces // Array of traces |
| 88 | +scenario.rubric // Rubric (if created) |
| 89 | +scenario.findings // Discovery findings |
| 90 | +scenario.annotations // Annotations |
| 91 | +``` |
| 92 | + |
| 93 | +## Actions |
| 94 | + |
| 95 | +```typescript |
| 96 | +// Authentication |
| 97 | +await scenario.loginAs(scenario.facilitator); |
| 98 | +await scenario.logout(); |
| 99 | + |
| 100 | +// Navigation |
| 101 | +await scenario.goToPhase('discovery'); |
| 102 | +await scenario.goToTab('Rubric Questions'); |
| 103 | + |
| 104 | +// API-level phase advancement |
| 105 | +await scenario.advanceToPhase('rubric'); |
| 106 | + |
| 107 | +// Data creation |
| 108 | +await scenario.createRubricQuestion({ question: '...' }); |
| 109 | +await scenario.submitFinding({ trace: scenario.traces[0], insight: '...' }); |
| 110 | +await scenario.submitAnnotation({ rating: 4 }); |
| 111 | +await scenario.completeDiscovery(); |
| 112 | +``` |
| 113 | + |
| 114 | +## Multi-Browser Tests |
| 115 | + |
| 116 | +```typescript |
| 117 | +test('multi-user workflow', async ({ browser }) => { |
| 118 | + const scenario = await TestScenario.create(browser) |
| 119 | + .withWorkshop() |
| 120 | + .withFacilitator() |
| 121 | + .withParticipants(2) |
| 122 | + .build(); |
| 123 | + |
| 124 | + const facilitatorPage = await scenario.newPageAs(scenario.facilitator); |
| 125 | + const alicePage = await scenario.newPageAs(scenario.users.participant[0]); |
| 126 | + |
| 127 | + // Actions scoped to a page |
| 128 | + await scenario.using(alicePage).submitFinding({ ... }); |
| 129 | +}); |
| 130 | +``` |
| 131 | + |
| 132 | +## API Access for Assertions |
| 133 | + |
| 134 | +```typescript |
| 135 | +const workshop = await scenario.api.getWorkshop(); |
| 136 | +const rubric = await scenario.api.getRubric(); |
| 137 | +const traces = await scenario.api.getTraces(); |
| 138 | +const findings = await scenario.api.getFindings(userId); |
| 139 | +const annotations = await scenario.api.getAnnotations(); |
| 140 | +const status = await scenario.api.getDiscoveryCompletionStatus(); |
| 141 | +``` |
| 142 | + |
| 143 | +## Running E2E Tests |
| 144 | + |
| 145 | +```bash |
| 146 | +just e2e # Headless |
| 147 | +just e2e headed # Visible browser |
| 148 | +just e2e ui # Playwright UI mode |
| 149 | +``` |
0 commit comments