5fb6a1eec0
- Install pdfjs-dist v5 and add optimizeDeps pre-bundle config - New PdfViewer.svelte component: renders each page on a <canvas> with correct device-pixel-ratio scaling, overlays a text layer (enables text selection; foundation for annotations in #40), prev/next navigation, zoom controls, and lazy page rendering (only current ±1 pre-fetched — avoids freezing on multi-page documents) - Replace the <iframe> in documents/[id]/+page.svelte with PdfViewer; image attachments continue to use <img>; detection now uses doc.contentType instead of filename extension - Unit tests for navigation controls and page counter (pdfjs mocked) - E2E tests: PDF renders as canvas (not iframe), nav controls visible, image fallback stays as <img>; minimal.pdf fixture for upload tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { vi, describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
|
|
// pdfjs-dist is a rendering dependency — we mock it so unit tests don't need
|
|
// a real browser PDF engine. The interesting behaviour under test here is the
|
|
// component's own UI logic (controls, page counter), not pdfjs internals.
|
|
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: '' }));
|
|
|
|
import PdfViewer from './PdfViewer.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe('PdfViewer', () => {
|
|
it('shows previous and next page navigation buttons', async () => {
|
|
render(PdfViewer, { url: '/api/documents/test-id/file' });
|
|
await expect.element(page.getByRole('button', { name: /zurück/i })).toBeInTheDocument();
|
|
await expect.element(page.getByRole('button', { name: /weiter/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows zoom controls', async () => {
|
|
render(PdfViewer, { url: '/api/documents/test-id/file' });
|
|
await expect.element(page.getByRole('button', { name: /vergrößern/i })).toBeInTheDocument();
|
|
await expect.element(page.getByRole('button', { name: /verkleinern/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('displays the page counter once the PDF has loaded', async () => {
|
|
render(PdfViewer, { url: '/api/documents/test-id/file' });
|
|
// Mock resolves synchronously, so "1 / 2" should appear quickly
|
|
await expect.element(page.getByText(/1\s*\/\s*2/)).toBeInTheDocument();
|
|
});
|
|
});
|