Files
familienarchiv/frontend/src/lib/components/TrainingHistory.svelte.spec.ts
Marcel b396fccd52
Some checks failed
CI / Unit & Component Tests (push) Failing after 2m37s
CI / OCR Service Tests (push) Successful in 40s
CI / Backend Unit Tests (push) Failing after 2m50s
CI / Unit & Component Tests (pull_request) Failing after 2m31s
CI / OCR Service Tests (pull_request) Successful in 25s
CI / Backend Unit Tests (pull_request) Failing after 2m38s
fix(frontend): QUEUED badge test, touch target on dismiss button, focus ring on expand toggle
Add missing test coverage for the amber QUEUED status badge in TrainingHistory.
Fix WCAG 2.2 minimum touch target (24 × 24 px) on the success-message dismiss
button in OcrTrainingCard. Add focus-visible ring to the expand/collapse toggle
in TrainingHistory so keyboard users get a visible focus indicator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-17 21:36:26 +02:00

86 lines
2.9 KiB
TypeScript

import { afterEach, describe, expect, it } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import TrainingHistory from './TrainingHistory.svelte';
afterEach(cleanup);
function makeRun(i: number) {
return {
id: `run-${i}`,
status: 'DONE' as const,
blockCount: 10,
documentCount: 2,
modelName: 'german_kurrent',
createdAt: `2026-01-0${i + 1}T12:00:00Z`,
completedAt: `2026-01-0${i + 1}T12:05:00Z`
};
}
const fiveRuns = Array.from({ length: 5 }, (_, i) => makeRun(i));
const twoRuns = Array.from({ length: 2 }, (_, i) => makeRun(i));
describe('TrainingHistory — expand/collapse', () => {
it('shows only 3 runs initially when more than 3 exist', async () => {
render(TrainingHistory, { runs: fiveRuns });
const rows = page.getByRole('row');
// 1 header row + 3 data rows = 4 total
await expect.element(rows.nth(3)).toBeInTheDocument();
await expect.element(rows.nth(4)).not.toBeInTheDocument();
await expect.element(page.getByRole('button', { name: /Mehr anzeigen/i })).toBeInTheDocument();
});
it('shows all runs after clicking the expand button', async () => {
render(TrainingHistory, { runs: fiveRuns });
await page.getByRole('button', { name: /Mehr anzeigen/i }).click();
const rows = page.getByRole('row');
// 1 header row + 5 data rows = 6 total
await expect.element(rows.nth(5)).toBeInTheDocument();
});
it('hides the toggle button when 3 or fewer runs exist', async () => {
render(TrainingHistory, { runs: twoRuns });
await expect
.element(page.getByRole('button', { name: /Mehr anzeigen/i }))
.not.toBeInTheDocument();
});
});
describe('TrainingHistory — status badges', () => {
it('shows amber QUEUED badge for queued runs', async () => {
const run = { ...makeRun(0), status: 'QUEUED' as const };
render(TrainingHistory, { runs: [run] });
await expect.element(page.getByText(/Warteschlange/i)).toBeInTheDocument();
});
});
describe('TrainingHistory — type and person columns', () => {
it('shows "Basis" for runs without personId', async () => {
render(TrainingHistory, { runs: [makeRun(0)] });
await expect.element(page.getByText(/Basis/i)).toBeInTheDocument();
});
it('shows "Personalisiert" for runs with personId', async () => {
const run = { ...makeRun(0), personId: 'person-1' };
render(TrainingHistory, { runs: [run], personNames: { 'person-1': 'Karl Müller' } });
await expect.element(page.getByText(/Personalisiert/i)).toBeInTheDocument();
});
it('shows person name from personNames for sender runs', async () => {
const run = { ...makeRun(0), personId: 'person-1' };
render(TrainingHistory, { runs: [run], personNames: { 'person-1': 'Karl Müller' } });
await expect.element(page.getByText(/Personalisiert/i)).toBeInTheDocument();
// Name appears in both the mobile inline span and the desktop table cell
await expect.element(page.getByText('Karl Müller').first()).toBeInTheDocument();
});
});