experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

docs(components): add Testing section to README

+69
+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 + ```