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

afterEach(cleanup);

describe('ChronikErrorCard', () => {
	it('renders the default error message when no message is supplied', async () => {
		render(ChronikErrorCard, { props: { onRetry: () => {} } });

		await expect.element(page.getByText(/Aktivitäten konnten nicht/i)).toBeVisible();
	});

	it('renders the supplied message when provided', async () => {
		render(ChronikErrorCard, {
			props: { onRetry: () => {}, message: 'Custom error message' }
		});

		await expect.element(page.getByText('Custom error message')).toBeVisible();
	});

	it('calls onRetry when the retry button is clicked', async () => {
		const onRetry = vi.fn();
		render(ChronikErrorCard, { props: { onRetry } });

		await page.getByRole('button', { name: /erneut versuchen/i }).click();

		expect(onRetry).toHaveBeenCalledOnce();
	});

	it('marks the card as role="alert" for assistive tech', async () => {
		render(ChronikErrorCard, { props: { onRetry: () => {} } });

		await expect.element(page.getByRole('alert')).toBeVisible();
	});
});