familienarchiv/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';

const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte');

afterEach(cleanup);

const baseRow = (overrides = {}) => ({
	id: 'g1',
	title: 'Die Reise nach Berlin',
	body: '<p>Im Jahr 1923...</p>',
	type: 'STORY' as 'STORY' | 'JOURNEY',
	status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT',
	author: { firstName: 'Anna', lastName: 'Schmidt' },
	publishedAt: '2026-04-15T10:00:00Z',
	...overrides
});

describe('GeschichteListRow', () => {
	it('renders the title', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });
		await expect
			.element(page.getByRole('heading', { level: 2 }))
			.toHaveTextContent('Die Reise nach Berlin');
	});

	it('row text sizes suit the full-width list: title text-lg, excerpt/meta text-sm (#802)', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });

		const title = document.querySelector('h2');
		expect(title!.className).toContain('text-lg');
		expect(title!.className).not.toContain('text-[15px]');

		const excerpt = document.querySelector('p');
		expect(excerpt!.className).toContain('text-sm');
		expect(excerpt!.className).not.toContain('text-xs');

		const meta = Array.from(document.querySelectorAll('span')).filter((s) =>
			s.textContent?.includes('Anna Schmidt')
		);
		expect(meta.length).toBeGreaterThan(0);
		for (const span of meta) {
			expect(span.className).toContain('text-sm');
		}
	});

	it('desktop meta column is wide enough for text-sm names (w-40, #802)', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });

		const metaColumn = document.querySelector('[class*="border-r"]');
		expect(metaColumn).not.toBeNull();
		expect(metaColumn!.className).toContain('w-40');
		expect(metaColumn!.className).not.toContain('w-28');
	});

	it('shows no badge for STORY type', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
	});

	it('shows no badge when type is undefined', async () => {
		render(GeschichteListRow, {
			props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) }
		});
		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
	});

	it('shows REISE badge for JOURNEY type', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge).not.toBeNull();
		expect(badge?.textContent?.trim()).toBe('REISE');
	});

	it('badge is a plain <span>, not a nested interactive element', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge?.tagName.toLowerCase()).toBe('span');
	});

	it('badge uses the 12px label size — text-xs is the visible-text floor', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
		const badge = document.querySelector('[data-testid="journey-badge"]');
		expect(badge!.className).toContain('text-xs');
		// 10px was below the house floor for the 60+ audience (round-3 review)
		expect(badge!.className).not.toContain('text-[10px]');
	});

	it('renders author name in meta line', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow() } });
		expect(document.body.textContent).toContain('Anna Schmidt');
	});

	it('shows no draft badge for PUBLISHED stories', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ status: 'PUBLISHED' }) } });
		expect(document.querySelector('[data-testid="draft-badge"]')).toBeNull();
		expect(document.querySelector('[data-testid="draft-badge-mobile"]')).toBeNull();
	});

	it('shows desktop draft badge for DRAFT stories', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ status: 'DRAFT' }) } });
		const badge = document.querySelector('[data-testid="draft-badge"]');
		expect(badge).not.toBeNull();
	});

	it('shows mobile draft badge for DRAFT stories', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ status: 'DRAFT' }) } });
		const badge = document.querySelector('[data-testid="draft-badge-mobile"]');
		expect(badge).not.toBeNull();
	});

	it('draft badge is a plain <span>', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ status: 'DRAFT' }) } });
		const badge = document.querySelector('[data-testid="draft-badge"]');
		expect(badge?.tagName.toLowerCase()).toBe('span');
	});

	it('draft badge uses text-xs label size', async () => {
		render(GeschichteListRow, { props: { geschichte: baseRow({ status: 'DRAFT' }) } });
		const badge = document.querySelector('[data-testid="draft-badge"]');
		expect(badge!.className).toContain('text-xs');
	});
});