experiments in a post-browser web
docs(components): add Testing section to README
+69
+69
app/components/README.md
+69
app/components/README.md
···
2113
2113
__PEEK_DEV__.theme.current();
2114
2114
__PEEK_DEV__.registry.names();
2115
2115
```
2116
+
2117
+
---
2118
+
2119
+
## Testing
2120
+
2121
+
Component tests use Playwright with an embedded HTTP server for ESM module loading.
2122
+
2123
+
### Running Tests
2124
+
2125
+
```bash
2126
+
npx playwright test tests/components/ --project=components
2127
+
```
2128
+
2129
+
### Test Coverage
2130
+
2131
+
56 tests covering all 16 components:
2132
+
2133
+
| Component | Tests | Coverage |
2134
+
|-----------|-------|----------|
2135
+
| `peek-button` | 6 | variants, sizes, disabled, loading, events |
2136
+
| `peek-card` | 3 | slots, interactive, selected |
2137
+
| `peek-list` | 2 | items, disabled |
2138
+
| `peek-input` | 2 | value, disabled |
2139
+
| `peek-select` | 2 | native mode, custom mode |
2140
+
| `peek-switch` | 3 | default, checked, toggle |
2141
+
| `peek-dialog` | 2 | open, close |
2142
+
| `peek-tabs` | 3 | selection, panel visibility |
2143
+
| `peek-details` | 2 | closed, open |
2144
+
| `peek-dropdown` | 1 | closed default |
2145
+
| `peek-button-group` | 1 | initial selection |
2146
+
| `peek-carousel` | 6 | slides, controls, indicators, navigation |
2147
+
| `peek-grid` | 4 | container, auto-fit, fixed columns, gap |
2148
+
| `peek-popover` | 3 | state, trigger slot, popover element |
2149
+
| `peek-drawer` | 4 | state, dialog, open/close |
2150
+
| `peek-tooltip` | 4 | content, mode, role, position |
2151
+
2152
+
Plus 4 component combo tests and 4 accessibility tests.
2153
+
2154
+
### Test Infrastructure
2155
+
2156
+
- `tests/components/test-page.html` - Test fixtures with all components
2157
+
- `tests/components/components.spec.ts` - Playwright test suite
2158
+
- Embedded HTTP server serves ESM modules with proper MIME types
2159
+
- Import maps resolve `lit` and dependencies from `node_modules`
2160
+
2161
+
### Writing Tests
2162
+
2163
+
Tests use `waitForFunction` for deterministic state checks:
2164
+
2165
+
```typescript
2166
+
// Wait for dialog to open (deterministic)
2167
+
await page.waitForFunction(() => {
2168
+
const el = document.querySelector('#my-dialog') as any;
2169
+
return el?.open === true;
2170
+
});
2171
+
2172
+
// Avoid arbitrary timeouts (flaky)
2173
+
// await page.waitForTimeout(100); // Don't do this
2174
+
```
2175
+
2176
+
Access shadow DOM via `page.evaluate`:
2177
+
2178
+
```typescript
2179
+
const hasSpinner = await page.evaluate(() => {
2180
+
const el = document.querySelector('#btn-loading');
2181
+
const spinner = el?.shadowRoot?.querySelector('.spinner');
2182
+
return !!spinner;
2183
+
});
2184
+
```