From 4cd67405c9932c6b2e16122fa6b3d57ba6300e46 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Thu, 23 Apr 2026 18:16:37 -0400 Subject: [PATCH] docs(plan): update useDelayed task to match .svelte.test.ts convention Rune-using test files need the .svelte. infix so vite-plugin-svelte processes them. Also adds the flushSync() after $effect.root in the 'source already true' test so fake-timer advances fire the scheduled timeout. Co-Authored-By: Claude Opus 4.7 --- .../plans/2026-04-23-web-ui-library-views.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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