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 <noreply@anthropic.com>
This commit is contained in:
@@ -25,7 +25,7 @@
|
|||||||
| `src/lib/media/duration.ts` | `formatDuration(seconds)` returning `mm:ss` or `h:mm:ss` |
|
| `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/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.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 `<a>` |
|
| `src/lib/components/ArtistRow.svelte` | Artists list row — avatar initial, name, album count, chevron, wrapping `<a>` |
|
||||||
| `src/lib/components/ArtistRow.test.ts` | Component test |
|
| `src/lib/components/ArtistRow.test.ts` | Component test |
|
||||||
| `src/lib/components/AlbumCard.svelte` | Album grid card — cover, title, year, wrapping `<a>` |
|
| `src/lib/components/AlbumCard.svelte` | Album grid card — cover, title, year, wrapping `<a>` |
|
||||||
@@ -255,11 +255,11 @@ git commit -m "feat(web): add cover URL helper + fallback SVG data URL"
|
|||||||
|
|
||||||
**Files:**
|
**Files:**
|
||||||
- Create: `web/src/lib/utils/useDelayed.svelte.ts`
|
- 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**
|
- [ ] **Step 1: Write the failing tests**
|
||||||
|
|
||||||
Create `web/src/lib/utils/useDelayed.test.ts`:
|
Create `web/src/lib/utils/useDelayed.svelte.test.ts`:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { describe, expect, test, vi } from 'vitest';
|
import { describe, expect, test, vi } from 'vitest';
|
||||||
@@ -325,6 +325,7 @@ describe('useDelayed', () => {
|
|||||||
const cleanup = $effect.root(() => {
|
const cleanup = $effect.root(() => {
|
||||||
delayed = useDelayed(() => source, 100);
|
delayed = useDelayed(() => source, 100);
|
||||||
});
|
});
|
||||||
|
flushSync(); // run the initial $effect so the setTimeout is scheduled
|
||||||
|
|
||||||
vi.advanceTimersByTime(200);
|
vi.advanceTimersByTime(200);
|
||||||
expect(delayed.value).toBe(true);
|
expect(delayed.value).toBe(true);
|
||||||
@@ -343,7 +344,7 @@ describe('useDelayed', () => {
|
|||||||
|
|
||||||
- [ ] **Step 2: Run tests, confirm they fail**
|
- [ ] **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.
|
Expected: FAIL — module not found.
|
||||||
|
|
||||||
- [ ] **Step 3: Implement `web/src/lib/utils/useDelayed.svelte.ts`**
|
- [ ] **Step 3: Implement `web/src/lib/utils/useDelayed.svelte.ts`**
|
||||||
@@ -390,13 +391,13 @@ export function useDelayed(
|
|||||||
|
|
||||||
- [ ] **Step 4: Run tests, confirm they pass**
|
- [ ] **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.
|
Expected: PASS — 3 tests.
|
||||||
|
|
||||||
- [ ] **Step 5: Commit**
|
- [ ] **Step 5: Commit**
|
||||||
|
|
||||||
```bash
|
```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
|
git commit -m "feat(web): add useDelayed rune helper
|
||||||
|
|
||||||
Boolean mirror that flips true only after the source stays true for
|
Boolean mirror that flips true only after the source stays true for
|
||||||
|
|||||||
Reference in New Issue
Block a user