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

afterEach(() => cleanup());

describe('FieldLabelBadge', () => {
	it('renders the additive variant text', async () => {
		render(FieldLabelBadge, { variant: 'additive' });
		await expect.element(page.getByTestId('field-label-badge-additive')).toBeInTheDocument();
		await expect
			.element(page.getByTestId('field-label-badge-additive'))
			.toHaveTextContent('+ wird hinzugefügt');
	});

	it('renders the replace variant text', async () => {
		render(FieldLabelBadge, { variant: 'replace' });
		await expect
			.element(page.getByTestId('field-label-badge-replace'))
			.toHaveTextContent('wird ersetzt');
	});

	it('uses the design-system text-ink-2 token (not raw Tailwind palette)', async () => {
		render(FieldLabelBadge, { variant: 'replace' });
		await expect.element(page.getByTestId('field-label-badge-replace')).toHaveClass(/text-ink-2/);
	});
});