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');
+	});
 });