test(web): add happy-dom UI tests for theme and dashboard context#1
test(web): add happy-dom UI tests for theme and dashboard context#1
Conversation
- Add happy-dom, @testing-library/react, @testing-library/dom - happy-dom-globals: document, localStorage, sessionStorage for Bun - theme-defaults: CP_THEME_DEFAULT and storage key - ui-theme-picker: option order, data-cp-theme + localStorage - ui-dashboard-context: fetch stats + lastLiked highlight timeout - Document tests/web in TEST-SPEC.md Made-with: Cursor
There was a problem hiding this comment.
Pull request overview
Adds a lightweight DOM environment (happy-dom) and React Testing Library coverage for key UI behaviors (theme selection and dashboard stats context) in the Bun test suite, and documents how to run/understand these web tests.
Changes:
- Add happy-dom + React Testing Library devDependencies and lockfile entries.
- Introduce shared
happy-dom-globalssetup plus new UI/component tests forThemePickerandDashboardStatsProvider. - Update
docs/TEST-SPEC.mdto document the newtests/web/*.test.tsxsuite and coverage.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/web/happy-dom-globals.ts | Registers happy-dom window/document/storage globals for RTL tests. |
| tests/web/ui-theme-picker.test.tsx | UI tests for theme picker option order, default selection, and persistence to DOM + localStorage. |
| tests/web/ui-dashboard-context.test.tsx | UI tests for dashboard stats refresh (mocked fetch) and last-liked highlight behavior. |
| tests/web/theme-defaults.test.ts | Non-DOM tests for exported theme defaults/constants stability. |
| package.json | Adds RTL + happy-dom devDependencies. |
| bun.lock | Lockfile updates for new devDependencies. |
| docs/TEST-SPEC.md | Documents how to run and what’s covered by the web UI/component tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| fireEvent.change(sel, { target: { value: 'elegance' } }); | ||
| expect(document.documentElement.getAttribute('data-cp-theme')).toBe('elegance'); | ||
| expect(localStorage.getItem('cp-theme')).toBe('elegance'); | ||
|
|
||
| fireEvent.change(sel, { target: { value: 'harmony' } }); | ||
| expect(document.documentElement.getAttribute('data-cp-theme')).toBe('harmony'); | ||
| expect(localStorage.getItem('cp-theme')).toBe('harmony'); |
There was a problem hiding this comment.
This test hard-codes the storage key string ('cp-theme'). Since the key is already exported as CP_THEME_STORAGE_KEY (and separately tested for stability), consider using the constant here to avoid duplicated literals if it ever changes.
| await waitFor( | ||
| () => { | ||
| expect(view.getByTestId('highlight').textContent).toBe('none'); | ||
| }, | ||
| { timeout: 3000 }, | ||
| ); |
There was a problem hiding this comment.
This assertion waits for the real highlight timeout to elapse (HIGHLIGHT_MS is 1500ms in the provider), so the test will always take ~1.5s+. Consider using fake timers (or otherwise making the timeout controllable in tests) to keep the UI test suite fast and less timing-dependent.
Made-with: Cursor