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

import ReaderStatsStrip from './ReaderStatsStrip.svelte';

afterEach(() => {
	cleanup();
});

describe('ReaderStatsStrip', () => {
	it('renders a link to /documents', async () => {
		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
		const link = page.getByRole('link', { name: /42/ });
		await expect.element(link).toHaveAttribute('href', '/documents');
	});

	it('renders a link to /persons', async () => {
		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
		const link = page.getByRole('link', { name: /7/ });
		await expect.element(link).toHaveAttribute('href', '/persons');
	});

	it('renders a link to /geschichten', async () => {
		render(ReaderStatsStrip, { documents: 42, persons: 7, stories: 3 });
		const link = page.getByRole('link', { name: /3/ });
		await expect.element(link).toHaveAttribute('href', '/geschichten');
	});

	it('shows "—" when documents count is null', async () => {
		render(ReaderStatsStrip, { documents: null, persons: null, stories: null });
		const links = page.getByRole('link');
		await expect.element(links.first()).toBeInTheDocument();
		const text = ((await links.first().element()) as HTMLElement).textContent;
		expect(text).toContain('—');
	});
});