From 7036f18b25caf282db41ef94892a2fd6e7b3e5ac Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 5 Apr 2026 20:47:21 +0200
Subject: [PATCH] test(annotations): add tests for dimColor and crosshair
 cursor

- dims annotations matching dimColor (opacity 0.3, pointer-events none)
- does not dim annotations that don't match dimColor
- has crosshair cursor when canAnnotate is true

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/AnnotationLayer.svelte.spec.ts | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/src/lib/components/AnnotationLayer.svelte.spec.ts b/frontend/src/lib/components/AnnotationLayer.svelte.spec.ts
index e25f95c4..cc82e084 100644
--- a/frontend/src/lib/components/AnnotationLayer.svelte.spec.ts
+++ b/frontend/src/lib/components/AnnotationLayer.svelte.spec.ts
@@ -71,4 +71,52 @@ describe('AnnotationLayer', () => {
 
 		expect(page.getByRole('button', { name: /annotation löschen/i }).query()).toBeNull();
 	});
+
+	it('dims annotations matching dimColor', async () => {
+		render(AnnotationLayer, {
+			annotations: [makeAnnotation('ann-1')],
+			canAnnotate: false,
+			color: '#00C7B1',
+			dimColor: '#ff0000',
+			onDraw: () => {},
+			onDelete: () => {}
+		});
+
+		const el = page.getByTestId('annotation-ann-1');
+		await expect.element(el).toBeInTheDocument();
+		const style = el.element().style;
+		expect(style.opacity).toBe('0.3');
+		expect(style.pointerEvents).toBe('none');
+	});
+
+	it('does not dim annotations that do not match dimColor', async () => {
+		const ann = makeAnnotation('ann-1');
+		ann.color = '#00C7B1';
+		render(AnnotationLayer, {
+			annotations: [ann],
+			canAnnotate: false,
+			color: '#00C7B1',
+			dimColor: '#ff0000',
+			onDraw: () => {},
+			onDelete: () => {}
+		});
+
+		const el = page.getByTestId('annotation-ann-1');
+		await expect.element(el).toBeInTheDocument();
+		const style = el.element().style;
+		expect(style.opacity).toBe('1');
+	});
+
+	it('has crosshair cursor when canAnnotate is true', async () => {
+		render(AnnotationLayer, {
+			annotations: [],
+			canAnnotate: true,
+			color: '#00C7B1',
+			onDraw: () => {},
+			onDelete: () => {}
+		});
+
+		const container = document.querySelector('[role="presentation"]')!;
+		expect(container.getAttribute('style')).toContain('cursor: crosshair');
+	});
 });