b45ec744b2
Backend: - Add ANNOTATE_ALL permission - Add ANNOTATION_NOT_FOUND and ANNOTATION_OVERLAP error codes - V10 migration: document_annotations table with page/rect/color/owner - DocumentAnnotation entity, AnnotationRepository, CreateAnnotationDTO - AnnotationService: overlap detection (rectangle intersection), ownership enforcement on delete - AnnotationController: GET (authenticated), POST/DELETE (ANNOTATE_ALL) - 15 new tests (AnnotationServiceTest, AnnotationControllerTest) — TDD red/green Frontend: - AnnotationLayer.svelte: pointer-event drawing, colored rect overlays, delete buttons - PdfViewer.svelte: annotate toggle, color picker, loads/saves/deletes annotations via API - Disabled annotate button with tooltip for users without ANNOTATE_ALL - canAnnotate exposed from layout server, passed to PdfViewer - errors.ts + de/en/es translations for new error codes - 3 new unit tests for AnnotationLayer — TDD red/green Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import { afterEach, describe, expect, it } from 'vitest';
|
||
import { cleanup, render } from 'vitest-browser-svelte';
|
||
import { page, userEvent } from 'vitest/browser';
|
||
import { createRawSnippet } from 'svelte';
|
||
|
||
afterEach(cleanup);
|
||
|
||
const emptySnippet = createRawSnippet(() => ({ render: () => '<span></span>' }));
|
||
import Layout from './+layout.svelte';
|
||
|
||
const tick = () => new Promise((r) => setTimeout(r, 0));
|
||
|
||
// Minimal data required by the layout
|
||
const makeData = (overrides = {}) => ({
|
||
user: {
|
||
id: '1',
|
||
username: 'max',
|
||
firstName: 'Max',
|
||
lastName: 'Müller',
|
||
groups: [],
|
||
enabled: true,
|
||
createdAt: ''
|
||
},
|
||
canWrite: true,
|
||
canAnnotate: false,
|
||
...overrides
|
||
});
|
||
|
||
// ─── User avatar ──────────────────────────────────────────────────────────────
|
||
|
||
describe('Layout – user avatar button', () => {
|
||
it('shows user initials when first and last name are set', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await expect.element(page.getByRole('button', { name: /MM/ })).toBeInTheDocument();
|
||
});
|
||
|
||
it('shows fallback icon button when names are not set', async () => {
|
||
render(Layout, {
|
||
data: makeData({
|
||
user: { id: '1', username: 'x', groups: [], enabled: true, createdAt: '' }
|
||
}),
|
||
children: emptySnippet
|
||
});
|
||
// Button should still exist (with aria-label for accessibility)
|
||
await expect.element(page.getByRole('button', { name: /Profil/i })).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
// ─── Dropdown ─────────────────────────────────────────────────────────────────
|
||
|
||
describe('Layout – user dropdown', () => {
|
||
it('dropdown is hidden initially', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await tick();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).not.toBeInTheDocument();
|
||
});
|
||
|
||
it('opens dropdown on button click', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument();
|
||
});
|
||
|
||
it('profile link points to /profile', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect
|
||
.element(page.getByRole('link', { name: /Profil/i }))
|
||
.toHaveAttribute('href', '/profile');
|
||
});
|
||
|
||
it('logout button is in the dropdown', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect.element(page.getByRole('button', { name: /Abmelden/i })).toBeInTheDocument();
|
||
});
|
||
|
||
it('closes dropdown when Escape is pressed', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
const btn = page.getByRole('button', { name: /MM/ });
|
||
await btn.click();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument();
|
||
await userEvent.keyboard('{Escape}');
|
||
await tick();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).not.toBeInTheDocument();
|
||
});
|
||
});
|