From 7ee038faaf9c2602ace0ea540c5c74abe8a52d24 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 12 May 2026 10:22:03 +0200 Subject: [PATCH] test(ocr): fix track_reactivity_loss in OcrTrainingCard spec Two root causes: 1. In-flight test: resolveFetch() was the last line, leaving the async finally-block writing `training = false` after cleanup destroyed the component. Awaiting the button becoming re-enabled ensures the finally block settles before cleanup runs. 2. Success-dismiss test: startTraining() schedules setTimeout(5000) which fired after cleanup destroyed the component. vi.useFakeTimers() + vi.runAllTimers() scoped to the describe block drains the timer while the component is still alive. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/ocr/OcrTrainingCard.svelte.spec.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/ocr/OcrTrainingCard.svelte.spec.ts b/frontend/src/lib/ocr/OcrTrainingCard.svelte.spec.ts index d1aec9b8..c72e877a 100644 --- a/frontend/src/lib/ocr/OcrTrainingCard.svelte.spec.ts +++ b/frontend/src/lib/ocr/OcrTrainingCard.svelte.spec.ts @@ -1,4 +1,4 @@ -import { afterEach, describe, expect, it, vi } from 'vitest'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import { cleanup, render } from 'vitest-browser-svelte'; import { page } from 'vitest/browser'; import OcrTrainingCard from './OcrTrainingCard.svelte'; @@ -74,6 +74,12 @@ describe('OcrTrainingCard — enabled state', () => { }); describe('OcrTrainingCard — success dismiss button', () => { + beforeEach(() => vi.useFakeTimers()); + afterEach(() => { + vi.runAllTimers(); + vi.useRealTimers(); + }); + it('dismiss button has 44×44px touch target (h-11 w-11)', async () => { vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true })); @@ -108,7 +114,9 @@ describe('OcrTrainingCard — in-flight state', () => { // While fetch is still pending the button label becomes "…" await expect.element(page.getByRole('button', { name: '…' })).toBeInTheDocument(); - // Cleanup: resolve the pending promise resolveFetch({ ok: false }); + await expect + .element(page.getByRole('button', { name: /Training starten/i })) + .not.toBeDisabled(); }); });