From 0f4c844002a45cd2ad8d9d90c09b53258de2eb55 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 14 May 2026 16:27:33 +0200 Subject: [PATCH] fix(admin/system): address second-round review concerns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extract ImportStatus type to types.ts — removes duplication across +page.svelte, ImportStatusCard.svelte, and test file (Felix blocker) - Fix H2 to match CLAUDE.md card pattern: text-xs uppercase tracking-widest text-ink-3 mb-5 (Leonie blocker 1) - Add font-sans to RUNNING and DONE status labels (Leonie blocker 2) - Add data-testid="processed-count" to count elements in both states - Replace document.querySelector with locator API in spinner tests - Tighten getByText('7') to getByTestId('processed-count') (Felix/Sara) Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/routes/admin/system/+page.svelte | 8 +------ .../admin/system/ImportStatusCard.svelte | 22 +++++++++---------- .../system/ImportStatusCard.svelte.test.ts | 20 ++++++----------- frontend/src/routes/admin/system/types.ts | 6 +++++ 4 files changed, 24 insertions(+), 32 deletions(-) create mode 100644 frontend/src/routes/admin/system/types.ts diff --git a/frontend/src/routes/admin/system/+page.svelte b/frontend/src/routes/admin/system/+page.svelte index 81779e64..0f09b24f 100644 --- a/frontend/src/routes/admin/system/+page.svelte +++ b/frontend/src/routes/admin/system/+page.svelte @@ -2,19 +2,13 @@ import { onDestroy } from 'svelte'; import { m } from '$lib/paraglide/messages.js'; import ImportStatusCard from './ImportStatusCard.svelte'; +import type { ImportStatus } from './types.js'; let backfillResult: number | null = $state(null); let backfillLoading = $state(false); let backfillHashesResult: number | null = $state(null); let backfillHashesLoading = $state(false); -type ImportStatus = { - state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED'; - statusCode: string; - processed: number; - startedAt: string | null; -}; - type ThumbnailStatus = { state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED'; message: string; diff --git a/frontend/src/routes/admin/system/ImportStatusCard.svelte b/frontend/src/routes/admin/system/ImportStatusCard.svelte index ac6d23f5..01b565c4 100644 --- a/frontend/src/routes/admin/system/ImportStatusCard.svelte +++ b/frontend/src/routes/admin/system/ImportStatusCard.svelte @@ -1,12 +1,6 @@
-

{m.admin_system_import_heading()}

+

+ {m.admin_system_import_heading()} +

{m.admin_system_import_description()}

{#if importStatus?.state === 'RUNNING'} @@ -36,16 +32,18 @@ const failureMessage = $derived( class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-ink-3 border-t-brand-mint motion-reduce:animate-none" >
-

{importStatus.processed}

-

+

+ {importStatus.processed} +

+

{m.admin_system_import_status_running()}

{:else if importStatus?.state === 'DONE'}
-

{importStatus.processed}

-

+

{importStatus.processed}

+

{m.admin_system_import_status_done_label()}

{m.admin_system_import_status_done()}

diff --git a/frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts b/frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts index b347f5ef..ec37d46c 100644 --- a/frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts +++ b/frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts @@ -2,13 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import { render } from 'vitest-browser-svelte'; import { m } from '$lib/paraglide/messages.js'; import ImportStatusCard from './ImportStatusCard.svelte'; - -type ImportStatus = { - state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED'; - statusCode: string; - processed: number; - startedAt: string | null; -}; +import type { ImportStatus } from './types.js'; const makeStatus = (overrides: Partial = {}): ImportStatus => ({ state: 'IDLE', @@ -20,25 +14,25 @@ const makeStatus = (overrides: Partial = {}): ImportStatus => ({ describe('ImportStatusCard', () => { it('shows spinner while state is RUNNING', async () => { - render(ImportStatusCard, { + const { getByTestId } = render(ImportStatusCard, { props: { importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 3 }), ontrigger: () => {} } }); - expect(document.querySelector('[data-testid="spinner"]')).not.toBeNull(); + await expect.element(getByTestId('spinner')).toBeInTheDocument(); }); it('shows processed count at text-base while RUNNING', async () => { - const { getByText } = render(ImportStatusCard, { + const { getByTestId } = render(ImportStatusCard, { props: { importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 7 }), ontrigger: () => {} } }); - await expect.element(getByText('7')).toBeVisible(); + await expect.element(getByTestId('processed-count')).toHaveTextContent('7'); }); it('shows processed count while DONE', async () => { @@ -89,11 +83,11 @@ describe('ImportStatusCard', () => { }); it('shows no spinner when importStatus is null', async () => { - render(ImportStatusCard, { + const { getByTestId } = render(ImportStatusCard, { props: { importStatus: null, ontrigger: () => {} } }); - expect(document.querySelector('[data-testid="spinner"]')).toBeNull(); + await expect.element(getByTestId('spinner')).not.toBeInTheDocument(); }); it('calls ontrigger when retry button is clicked in DONE state', async () => { diff --git a/frontend/src/routes/admin/system/types.ts b/frontend/src/routes/admin/system/types.ts new file mode 100644 index 00000000..427aade7 --- /dev/null +++ b/frontend/src/routes/admin/system/types.ts @@ -0,0 +1,6 @@ +export type ImportStatus = { + state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED'; + statusCode: string; + processed: number; + startedAt: string | null; +};