familienarchiv/frontend/src/lib/components/AnnotationLayer.svelte.test.ts

import { describe, it, expect } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import AnnotationLayer from './AnnotationLayer.svelte';
import type { Annotation } from '$lib/types';

const annotation: Annotation = {
	id: 'ann-1',
	documentId: 'doc-1',
	pageNumber: 1,
	x: 0.1,
	y: 0.2,
	width: 0.3,
	height: 0.1,
	color: '#00c7b1',
	createdAt: '2026-01-01T00:00:00Z'
};

describe('AnnotationLayer', () => {
	describe('dimmed prop', () => {
		it('should hide block number badges when dimmed is true', async () => {
			render(AnnotationLayer, {
				annotations: [annotation],
				canDraw: false,
				color: '#00c7b1',
				blockNumbers: { 'ann-1': 1 },
				dimmed: true,
				onDraw: () => {}
			});

			const badge = page.getByText('1');
			await expect.element(badge).not.toBeInTheDocument();
		});

		it('should show block number badges when dimmed is false', async () => {
			render(AnnotationLayer, {
				annotations: [annotation],
				canDraw: false,
				color: '#00c7b1',
				blockNumbers: { 'ann-1': 1 },
				dimmed: false,
				onDraw: () => {}
			});

			const badge = page.getByText('1');
			await expect.element(badge).toBeInTheDocument();
		});

		it('should still fire onAnnotationClick when dimmed', async () => {
			let clickedId: string | undefined;
			render(AnnotationLayer, {
				annotations: [annotation],
				canDraw: false,
				color: '#00c7b1',
				dimmed: true,
				onDraw: () => {},
				onAnnotationClick: (id: string) => {
					clickedId = id;
				}
			});

			const el = document.querySelector('[data-testid="annotation-ann-1"]')!;
			el.dispatchEvent(new MouseEvent('click', { bubbles: true }));
			expect(clickedId).toBe('ann-1');
		});
	});

	describe('flashAnnotationId prop', () => {
		it('should apply annotation-flash class when flashAnnotationId matches', async () => {
			render(AnnotationLayer, {
				annotations: [annotation],
				canDraw: false,
				color: '#00c7b1',
				flashAnnotationId: 'ann-1',
				onDraw: () => {}
			});

			const el = document.querySelector('[data-testid="annotation-ann-1"]')!;
			expect(el.classList.contains('annotation-flash')).toBe(true);
		});

		it('should not apply annotation-flash class when flashAnnotationId does not match', async () => {
			render(AnnotationLayer, {
				annotations: [annotation],
				canDraw: false,
				color: '#00c7b1',
				flashAnnotationId: 'other-id',
				onDraw: () => {}
			});

			const el = document.querySelector('[data-testid="annotation-ann-1"]')!;
			expect(el.classList.contains('annotation-flash')).toBe(false);
		});
	});
});