4045cec457
Replaces 6 setTimeout sleeps with vi.waitFor and expect.element auto-wait, and converts 9 .not.toThrow smoke tests into assertions on the rendered PDF nav controls (Zurück/Weiter/Vergrößern/Verkleinern) and the conditional outdated-annotation notice / annotation visibility toggle. transcribeMode test now mocks the annotations fetch so the toggle button is actually rendered (annotationCount > 0 guard). Runtime: 33s → 4.5s. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
281 lines
8.2 KiB
TypeScript
281 lines
8.2 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
|
|
vi.mock('pdfjs-dist', () => {
|
|
function TextLayerMock() {}
|
|
TextLayerMock.prototype.render = () => Promise.resolve();
|
|
TextLayerMock.prototype.cancel = () => {};
|
|
|
|
return {
|
|
GlobalWorkerOptions: { workerSrc: '' },
|
|
getDocument: vi.fn().mockReturnValue({
|
|
promise: Promise.resolve({
|
|
numPages: 2,
|
|
getPage: vi.fn().mockResolvedValue({
|
|
getViewport: vi.fn().mockReturnValue({ width: 595, height: 842 }),
|
|
render: vi.fn().mockReturnValue({ promise: Promise.resolve() }),
|
|
streamTextContent: vi.fn().mockReturnValue(new ReadableStream())
|
|
})
|
|
})
|
|
}),
|
|
TextLayer: TextLayerMock
|
|
};
|
|
});
|
|
|
|
vi.mock('pdfjs-dist/build/pdf.worker.min.mjs?url', () => ({ default: '' }));
|
|
|
|
const { default: PdfViewer } = await import('./PdfViewer.svelte');
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe('PdfViewer — empty / error states', () => {
|
|
it('renders the no-file placeholder when url is empty', async () => {
|
|
render(PdfViewer, { url: '' });
|
|
|
|
await expect.element(page.getByText('Keine Datei vorhanden')).toBeVisible();
|
|
});
|
|
|
|
it('does not render the controls when url is empty', async () => {
|
|
render(PdfViewer, { url: '' });
|
|
|
|
const buttons = document.querySelectorAll('button');
|
|
expect(buttons.length).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe('PdfViewer — loaded state', () => {
|
|
it('renders the PDF navigation controls (Zurück/Weiter/Vergrößern/Verkleinern) when a url is provided', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
annotationReloadKey: 0
|
|
});
|
|
|
|
// PdfControls renders its nav + zoom buttons once the document.promise resolves.
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
await expect.element(page.getByRole('button', { name: 'Weiter' })).toBeVisible();
|
|
await expect.element(page.getByRole('button', { name: 'Vergrößern' })).toBeVisible();
|
|
await expect.element(page.getByRole('button', { name: 'Verkleinern' })).toBeVisible();
|
|
});
|
|
|
|
it('renders the canvas background container when annotationsDimmed=true', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
annotationsDimmed: true
|
|
});
|
|
|
|
await vi.waitFor(() => {
|
|
expect(document.querySelector('.bg-pdf-bg')).not.toBeNull();
|
|
});
|
|
});
|
|
|
|
it('forces the annotation toggle into "hide" mode when transcribeMode is true and annotations exist', async () => {
|
|
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
|
|
new Response(
|
|
JSON.stringify([
|
|
{
|
|
id: 'a1',
|
|
documentId: 'test',
|
|
pageNumber: 1,
|
|
x: 0.1,
|
|
y: 0.1,
|
|
width: 0.1,
|
|
height: 0.1,
|
|
color: '#000',
|
|
createdAt: '2026-01-01T00:00:00Z',
|
|
fileHash: 'match'
|
|
}
|
|
]),
|
|
{ status: 200, headers: { 'Content-Type': 'application/json' } }
|
|
)
|
|
);
|
|
try {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
transcribeMode: true,
|
|
documentFileHash: 'match'
|
|
});
|
|
|
|
// transcribeMode forces showAnnotations=true; toggle button surfaces with "hide" label
|
|
// (only when annotationCount > 0).
|
|
await expect
|
|
.element(page.getByRole('button', { name: /annotierungen verbergen/i }))
|
|
.toBeVisible();
|
|
} finally {
|
|
fetchSpy.mockRestore();
|
|
}
|
|
});
|
|
|
|
it('renders the canvas region when documentFileHash is provided', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
documentFileHash: 'abc123'
|
|
});
|
|
|
|
await vi.waitFor(() => {
|
|
expect(document.querySelector('.bg-pdf-bg')).not.toBeNull();
|
|
});
|
|
});
|
|
|
|
it('renders the PDF controls when flashAnnotationId is set', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
flashAnnotationId: 'ann-flashing'
|
|
});
|
|
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
});
|
|
|
|
it('renders the PDF controls when blockNumbers map is provided', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
blockNumbers: { 'ann-1': 1, 'ann-2': 2 }
|
|
});
|
|
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
});
|
|
|
|
it('renders the PDF controls when activeAnnotationId is set', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
activeAnnotationId: 'ann-1'
|
|
});
|
|
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
});
|
|
|
|
it('renders the PDF nav controls in transcribeMode + activeAnnotationId combo', async () => {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
transcribeMode: true,
|
|
activeAnnotationId: 'ann-1'
|
|
});
|
|
|
|
// Without an annotations fetch, the visibility toggle is hidden — just assert the always-on nav.
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
await expect.element(page.getByRole('button', { name: 'Weiter' })).toBeVisible();
|
|
});
|
|
|
|
it('renders the PDF controls when an onAnnotationClick callback is wired up', async () => {
|
|
const onAnnotationClick = vi.fn();
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
onAnnotationClick
|
|
});
|
|
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
});
|
|
|
|
it('shows the outdated-annotation notice when annotations have non-matching fileHash', async () => {
|
|
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
|
|
new Response(
|
|
JSON.stringify([
|
|
{
|
|
id: 'a1',
|
|
documentId: 'test',
|
|
pageNumber: 1,
|
|
x: 0.1,
|
|
y: 0.1,
|
|
width: 0.1,
|
|
height: 0.1,
|
|
color: '#000',
|
|
createdAt: '2026-01-01T00:00:00Z',
|
|
fileHash: 'old-hash'
|
|
}
|
|
]),
|
|
{ status: 200, headers: { 'Content-Type': 'application/json' } }
|
|
)
|
|
);
|
|
try {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
documentFileHash: 'new-hash'
|
|
});
|
|
|
|
await vi.waitFor(() => {
|
|
expect(document.querySelector('[data-testid="annotation-outdated-notice"]')).not.toBeNull();
|
|
});
|
|
} finally {
|
|
fetchSpy.mockRestore();
|
|
}
|
|
});
|
|
|
|
it('does not show outdated-annotation notice when all annotations match', async () => {
|
|
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
|
|
new Response(
|
|
JSON.stringify([
|
|
{
|
|
id: 'a1',
|
|
documentId: 'test',
|
|
pageNumber: 1,
|
|
x: 0.1,
|
|
y: 0.1,
|
|
width: 0.1,
|
|
height: 0.1,
|
|
color: '#000',
|
|
createdAt: '2026-01-01T00:00:00Z',
|
|
fileHash: 'matching-hash'
|
|
}
|
|
]),
|
|
{ status: 200, headers: { 'Content-Type': 'application/json' } }
|
|
)
|
|
);
|
|
try {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test',
|
|
documentFileHash: 'matching-hash'
|
|
});
|
|
|
|
// Controls finish mounting, and the outdated notice stays absent.
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
expect(document.querySelector('[data-testid="annotation-outdated-notice"]')).toBeNull();
|
|
} finally {
|
|
fetchSpy.mockRestore();
|
|
}
|
|
});
|
|
|
|
it('still renders the controls when the annotations fetch rejects', async () => {
|
|
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('network'));
|
|
try {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test'
|
|
});
|
|
|
|
// PDF rendering does not depend on the annotations fetch — controls still appear.
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
expect(document.querySelector('[data-testid="annotation-outdated-notice"]')).toBeNull();
|
|
} finally {
|
|
fetchSpy.mockRestore();
|
|
}
|
|
});
|
|
|
|
it('still renders the controls when the annotations fetch returns a non-OK status', async () => {
|
|
const fetchSpy = vi
|
|
.spyOn(globalThis, 'fetch')
|
|
.mockResolvedValue(new Response('error', { status: 500 }));
|
|
try {
|
|
render(PdfViewer, {
|
|
url: '/api/documents/test/file',
|
|
documentId: 'test'
|
|
});
|
|
|
|
await expect.element(page.getByRole('button', { name: 'Zurück' })).toBeVisible();
|
|
expect(document.querySelector('[data-testid="annotation-outdated-notice"]')).toBeNull();
|
|
} finally {
|
|
fetchSpy.mockRestore();
|
|
}
|
|
});
|
|
});
|