Files
familienarchiv/frontend/src/lib/components/DashboardResumeStrip.svelte.spec.ts
Marcel be7c368008 feat(dashboard): render real document thumbnail in resume strip
Replaces the generic parchment SVG placeholder with an <img> pointing at
the backend's thumbnail endpoint when the document has one. The 180×252
container matches DocumentThumbnail's 5:7 A4 convention so the
dashboard tile sits visually next to the list/person-sublist tiles
instead of looking squatter than they do. dark:mix-blend-multiply keeps
paper scans from glaring on a dark page background (#309).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-23 22:22:19 +02:00

73 lines
2.6 KiB
TypeScript

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import DashboardResumeStrip from './DashboardResumeStrip.svelte';
import type { components } from '$lib/generated/api';
type DashboardResumeDTO = components['schemas']['DashboardResumeDTO'];
afterEach(() => {
cleanup();
});
const mockResume: DashboardResumeDTO = {
documentId: 'doc-123',
title: 'Geburtsurkunde 1920',
caption: 'Max Mustermann · 1920-01-01',
excerpt: 'Hiermit wird beurkundet…',
totalBlocks: 4,
pct: 75,
collaborators: []
};
const mockResumeWithThumbnail: DashboardResumeDTO = {
...mockResume,
thumbnailUrl: '/api/documents/doc-123/thumbnail?v=2026-04-23T09%3A00'
};
describe('DashboardResumeStrip', () => {
it('renders empty state heading when resumeDoc is null', async () => {
render(DashboardResumeStrip, { resumeDoc: null });
const heading = page.getByRole('heading', { name: /Noch kein Dokument begonnen/i });
await expect.element(heading).toBeInTheDocument();
});
it('renders progressbar with correct aria-valuenow when resumeDoc is provided', async () => {
render(DashboardResumeStrip, { resumeDoc: mockResume });
const bar = page.getByRole('progressbar');
await expect.element(bar).toBeInTheDocument();
await expect.element(bar).toHaveAttribute('aria-valuenow', '75');
});
it('shows document title when resumeDoc is provided', async () => {
render(DashboardResumeStrip, { resumeDoc: mockResume });
const title = page.getByRole('heading', { name: /Geburtsurkunde 1920/i });
await expect.element(title).toBeInTheDocument();
});
it('links to the document for the CTA', async () => {
render(DashboardResumeStrip, { resumeDoc: mockResume });
const link = page.getByRole('link', { name: /Weitertranskribieren/i });
await expect.element(link).toHaveAttribute('href', '/documents/doc-123');
});
it('shows block count label', async () => {
render(DashboardResumeStrip, { resumeDoc: mockResume });
const label = page.getByText(/4 Abschnitte/i);
await expect.element(label).toBeInTheDocument();
});
it('renders thumbnail img with expected attrs when thumbnailUrl is set', async () => {
render(DashboardResumeStrip, { resumeDoc: mockResumeWithThumbnail });
const img = page.getByTestId('resume-thumbnail-img');
await expect.element(img).toBeInTheDocument();
await expect
.element(img)
.toHaveAttribute('src', '/api/documents/doc-123/thumbnail?v=2026-04-23T09%3A00');
await expect.element(img).toHaveAttribute('alt', '');
await expect.element(img).toHaveAttribute('loading', 'lazy');
await expect.element(img).toHaveAttribute('decoding', 'async');
});
});