frontend/src/lib/activity/ChronikEmptyState.svelte.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ChronikEmptyState from './ChronikEmptyState.svelte';
+
+afterEach(cleanup);
+
+describe('ChronikEmptyState', () => {
+	it('renders the first-run title and body and the clock icon', async () => {
+		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
+
+		await expect.element(page.getByText('Noch nichts geschehen')).toBeVisible();
+		await expect.element(page.getByText(/sobald jemand aus der familie/i)).toBeVisible();
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
+	});
+
+	it('renders the filter-empty title and body', async () => {
+		render(ChronikEmptyState, { props: { variant: 'filter-empty' as const } });
+
+		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeVisible();
+		await expect.element(page.getByText('In diesem Filter gibt es keine Einträge.')).toBeVisible();
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		expect(wrapper?.getAttribute('data-variant')).toBe('filter-empty');
+	});
+
+	it('renders the inbox-zero title and no body paragraph', async () => {
+		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
+
+		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeVisible();
+
+		// Only one <p> (the title) since body is empty
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const paragraphs = wrapper?.querySelectorAll('p');
+		expect(paragraphs?.length).toBe(1);
+		expect(wrapper?.getAttribute('data-variant')).toBe('inbox-zero');
+	});
+
+	it('uses the accent color icon for inbox-zero (vs ink-3 for others)', async () => {
+		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const svg = wrapper?.querySelector('svg');
+		expect(svg?.getAttribute('class')).toContain('text-accent');
+	});
+
+	it('uses the ink-3 color icon for first-run', async () => {
+		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const svg = wrapper?.querySelector('svg');
+		expect(svg?.getAttribute('class')).toContain('text-ink-3');
+	});
+});