38a9719bdb
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>
86 lines
2.9 KiB
TypeScript
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();
|
|
});
|
|
});
|