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

afterEach(cleanup);

describe('UnsavedWarningBanner', () => {
	it('renders the warning text', async () => {
		render(UnsavedWarningBanner, { props: { onDiscard: () => {} } });

		await expect.element(page.getByText(/ungespeicherte änderungen/i)).toBeVisible();
	});

	it('renders the discard action button', async () => {
		render(UnsavedWarningBanner, { props: { onDiscard: () => {} } });

		await expect.element(page.getByRole('button', { name: /verwerfen/i })).toBeVisible();
	});

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

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

		expect(onDiscard).toHaveBeenCalledOnce();
	});
});
