feat(admin): add OCR training card to admin/system page
- TrainingHistory.svelte: responsive table with status badges (green/red/animated pulse), keyed iteration, empty-state row - OcrTrainingCard.svelte: shows available blocks/docs, disabled states (< 5 blocks, service down), in-flight "…" state, 5s success message, embeds TrainingHistory - Wired into admin/system/+page.svelte via fetchTrainingInfo() in $effect - Regenerated api.ts with OcrTrainingRun + TrainingInfoResponse types - TRAINING_ALREADY_RUNNING error code in errors.ts + de/en/es translations - 7 OcrTrainingCard Vitest tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
96
frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts
Normal file
96
frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import OcrTrainingCard from './OcrTrainingCard.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
const baseInfo = {
|
||||
availableBlocks: 10,
|
||||
totalOcrBlocks: 20,
|
||||
availableDocuments: 3,
|
||||
ocrServiceAvailable: true,
|
||||
lastRun: null,
|
||||
runs: []
|
||||
};
|
||||
|
||||
describe('OcrTrainingCard — disabled states', () => {
|
||||
it('disables button and shows hint when availableBlocks is 0', async () => {
|
||||
render(OcrTrainingCard, { trainingInfo: { ...baseInfo, availableBlocks: 0 } });
|
||||
|
||||
const btn = page.getByRole('button', { name: /Training starten/i });
|
||||
await expect.element(btn).toBeDisabled();
|
||||
await expect
|
||||
.element(page.getByText(/Mindestens 5 geprüfte Blöcke erforderlich/i))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables button and shows hint when availableBlocks is less than 5', async () => {
|
||||
render(OcrTrainingCard, { trainingInfo: { ...baseInfo, availableBlocks: 3 } });
|
||||
|
||||
const btn = page.getByRole('button', { name: /Training starten/i });
|
||||
await expect.element(btn).toBeDisabled();
|
||||
await expect.element(page.getByText(/Mindestens 5/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables button and shows service-down warning when ocrServiceAvailable is false', async () => {
|
||||
render(OcrTrainingCard, { trainingInfo: { ...baseInfo, ocrServiceAvailable: false } });
|
||||
|
||||
const btn = page.getByRole('button', { name: /Training starten/i });
|
||||
await expect.element(btn).toBeDisabled();
|
||||
await expect.element(page.getByText(/OCR-Dienst ist nicht erreichbar/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show service-down warning when blocks are insufficient', async () => {
|
||||
// tooFewBlocks hint takes priority over serviceDown hint
|
||||
render(OcrTrainingCard, {
|
||||
trainingInfo: { ...baseInfo, availableBlocks: 2, ocrServiceAvailable: false }
|
||||
});
|
||||
|
||||
await expect.element(page.getByText(/Mindestens 5/i)).toBeInTheDocument();
|
||||
// serviceDown text should NOT appear because tooFewBlocks branch hides it
|
||||
const serviceMsg = document.querySelector('.text-orange-600');
|
||||
expect(serviceMsg).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('OcrTrainingCard — enabled state', () => {
|
||||
it('enables button when availableBlocks >= 5 and service is up', async () => {
|
||||
render(OcrTrainingCard, { trainingInfo: baseInfo });
|
||||
|
||||
const btn = page.getByRole('button', { name: /Training starten/i });
|
||||
await expect.element(btn).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('shows block count info text', async () => {
|
||||
render(OcrTrainingCard, {
|
||||
trainingInfo: { ...baseInfo, availableBlocks: 7, totalOcrBlocks: 15 }
|
||||
});
|
||||
|
||||
await expect.element(page.getByText(/7/)).toBeInTheDocument();
|
||||
await expect.element(page.getByText(/von 15 OCR-Blöcken/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('OcrTrainingCard — in-flight state', () => {
|
||||
it('shows "…" while POST is in-flight', async () => {
|
||||
let resolveFetch!: (v: unknown) => void;
|
||||
const pendingFetch = new Promise((resolve) => {
|
||||
resolveFetch = resolve;
|
||||
});
|
||||
|
||||
vi.stubGlobal('fetch', vi.fn().mockReturnValue(pendingFetch));
|
||||
|
||||
render(OcrTrainingCard, { trainingInfo: baseInfo });
|
||||
|
||||
const btn = page.getByRole('button', { name: /Training starten/i });
|
||||
await btn.click();
|
||||
|
||||
// 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 });
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user