f618364632
Adds stats?: StatsDTO | null prop; renders a quiet footnote showing total document and person counts. Guards on stats?.totalDocuments != null so zero is shown but the footnote is absent when stats fails. Adds min-h-[44px] to doc rows for WCAG 2.5.5 touch target compliance. Adds dashboard_stats_documents/persons i18n keys in de/en/es. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
|
|
import DashboardRecentDocuments from './DashboardRecentDocuments.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
type Document = {
|
|
id: string;
|
|
title: string;
|
|
updatedAt?: string;
|
|
sender?: { id: string; firstName: string; lastName: string };
|
|
};
|
|
|
|
function makeDoc(id: string, title: string, updatedAt?: string): Document {
|
|
return { id, title, updatedAt };
|
|
}
|
|
|
|
describe('DashboardRecentDocuments', () => {
|
|
it('renders nothing when recentDocs is empty', async () => {
|
|
render(DashboardRecentDocuments, { recentDocs: [] });
|
|
const widget = page.getByTestId('dashboard-recent-docs');
|
|
await expect.element(widget).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('shows the widget when recentDocs are present', async () => {
|
|
render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Taufschein')] });
|
|
const widget = page.getByTestId('dashboard-recent-docs');
|
|
await expect.element(widget).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders a link to /documents/{id} for each document', async () => {
|
|
const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')];
|
|
render(DashboardRecentDocuments, { recentDocs: docs });
|
|
const links = page.getByRole('link');
|
|
await expect.element(links.nth(0)).toHaveAttribute('href', '/documents/d1');
|
|
await expect.element(links.nth(1)).toHaveAttribute('href', '/documents/d2');
|
|
});
|
|
|
|
it('shows the document title in each row', async () => {
|
|
render(DashboardRecentDocuments, {
|
|
recentDocs: [makeDoc('d1', 'Sterbeurkunde 1930', '1930-05-12')]
|
|
});
|
|
await expect.element(page.getByText('Sterbeurkunde 1930')).toBeInTheDocument();
|
|
});
|
|
|
|
it('formats and displays the document date when present', async () => {
|
|
render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Dok', '1945-04-20')] });
|
|
// The date should be visible in some formatted form
|
|
const widget = page.getByTestId('dashboard-recent-docs');
|
|
await expect.element(widget).toBeInTheDocument();
|
|
// Just verify the date element exists (not exact format due to locale)
|
|
const dateEl = page.getByTestId('doc-date-d1');
|
|
await expect.element(dateEl).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('DashboardRecentDocuments — stats footnote', () => {
|
|
it('renders stats footnote when stats.totalDocuments is provided', async () => {
|
|
render(DashboardRecentDocuments, {
|
|
recentDocs: [makeDoc('d1', 'Taufschein')],
|
|
stats: { totalDocuments: 248, totalPersons: 34 }
|
|
});
|
|
const footnote = page.getByTestId('dashboard-stats-footnote');
|
|
await expect.element(footnote).toBeInTheDocument();
|
|
});
|
|
|
|
it('omits stats footnote when stats is null', async () => {
|
|
render(DashboardRecentDocuments, {
|
|
recentDocs: [makeDoc('d1', 'Taufschein')],
|
|
stats: null
|
|
});
|
|
const footnote = page.getByTestId('dashboard-stats-footnote');
|
|
await expect.element(footnote).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('shows "0 Documents" when totalDocuments is 0', async () => {
|
|
render(DashboardRecentDocuments, {
|
|
recentDocs: [makeDoc('d1', 'Taufschein')],
|
|
stats: { totalDocuments: 0, totalPersons: 0 }
|
|
});
|
|
const footnote = page.getByTestId('dashboard-stats-footnote');
|
|
await expect.element(footnote).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('DashboardRecentDocuments — touch targets', () => {
|
|
it('each doc row has min-h-[44px] class for WCAG touch target', async () => {
|
|
render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Taufschein')] });
|
|
const row = page.getByTestId('doc-row-d1');
|
|
await expect.element(row).toHaveClass('min-h-[44px]');
|
|
});
|
|
});
|