diff --git a/docs/superpowers/plans/2026-04-23-web-ui-library-views.md b/docs/superpowers/plans/2026-04-23-web-ui-library-views.md index ab1633f2..f66cb633 100644 --- a/docs/superpowers/plans/2026-04-23-web-ui-library-views.md +++ b/docs/superpowers/plans/2026-04-23-web-ui-library-views.md @@ -25,7 +25,7 @@ | `src/lib/media/duration.ts` | `formatDuration(seconds)` returning `mm:ss` or `h:mm:ss` | | `src/lib/media/duration.test.ts` | Unit tests for `formatDuration` | | `src/lib/utils/useDelayed.svelte.ts` | `useDelayed(getValue, delayMs)` rune helper for skeleton suppression | -| `src/lib/utils/useDelayed.test.ts` | Unit tests for `useDelayed` | +| `src/lib/utils/useDelayed.svelte.test.ts` | Unit tests for `useDelayed` | | `src/lib/components/ArtistRow.svelte` | Artists list row — avatar initial, name, album count, chevron, wrapping `` | | `src/lib/components/ArtistRow.test.ts` | Component test | | `src/lib/components/AlbumCard.svelte` | Album grid card — cover, title, year, wrapping `` | @@ -255,11 +255,11 @@ git commit -m "feat(web): add cover URL helper + fallback SVG data URL" **Files:** - Create: `web/src/lib/utils/useDelayed.svelte.ts` -- Create: `web/src/lib/utils/useDelayed.test.ts` +- Create: `web/src/lib/utils/useDelayed.svelte.test.ts` - [ ] **Step 1: Write the failing tests** -Create `web/src/lib/utils/useDelayed.test.ts`: +Create `web/src/lib/utils/useDelayed.svelte.test.ts`: ```ts import { describe, expect, test, vi } from 'vitest'; @@ -325,6 +325,7 @@ describe('useDelayed', () => { const cleanup = $effect.root(() => { delayed = useDelayed(() => source, 100); }); + flushSync(); // run the initial $effect so the setTimeout is scheduled vi.advanceTimersByTime(200); expect(delayed.value).toBe(true); @@ -343,7 +344,7 @@ describe('useDelayed', () => { - [ ] **Step 2: Run tests, confirm they fail** -Run: `cd web && npm test -- src/lib/utils/useDelayed.test.ts` +Run: `cd web && npm test -- src/lib/utils/useDelayed.svelte.test.ts` Expected: FAIL — module not found. - [ ] **Step 3: Implement `web/src/lib/utils/useDelayed.svelte.ts`** @@ -390,13 +391,13 @@ export function useDelayed( - [ ] **Step 4: Run tests, confirm they pass** -Run: `cd web && npm test -- src/lib/utils/useDelayed.test.ts` +Run: `cd web && npm test -- src/lib/utils/useDelayed.svelte.test.ts` Expected: PASS — 3 tests. - [ ] **Step 5: Commit** ```bash -git add web/src/lib/utils/useDelayed.svelte.ts web/src/lib/utils/useDelayed.test.ts +git add web/src/lib/utils/useDelayed.svelte.ts web/src/lib/utils/useDelayed.svelte.test.ts git commit -m "feat(web): add useDelayed rune helper Boolean mirror that flips true only after the source stays true for