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 first-run variant title', async () => {
		render(ChronikEmptyState, { variant: 'first-run' });
		await expect.element(page.getByText('Noch nichts geschehen')).toBeInTheDocument();
	});

	it('renders filter-empty variant title', async () => {
		render(ChronikEmptyState, { variant: 'filter-empty' });
		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeInTheDocument();
	});

	it('renders inbox-zero variant title', async () => {
		render(ChronikEmptyState, { variant: 'inbox-zero' });
		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
	});

	it('applies the expected data-variant attribute', async () => {
		render(ChronikEmptyState, { variant: 'first-run' });
		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
	});
});