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

afterEach(cleanup);

describe('PersonTypeBadge', () => {
	it('renders the institution label and badge-institution class for personType="INSTITUTION"', async () => {
		render(PersonTypeBadge, { props: { personType: 'INSTITUTION' } });

		await expect.element(page.getByText('Institution')).toBeVisible();
		const badge = await page.getByText('Institution').element();
		expect(badge.classList.contains('badge-institution')).toBe(true);
	});

	it('renders the group label and badge-group class for personType="GROUP"', async () => {
		render(PersonTypeBadge, { props: { personType: 'GROUP' } });

		const badge = await page.getByText('Gruppe').element();
		expect(badge.classList.contains('badge-group')).toBe(true);
	});

	it('renders the unknown label and badge-unknown class for personType="UNKNOWN"', async () => {
		render(PersonTypeBadge, { props: { personType: 'UNKNOWN' } });

		const badge = await page.getByText('Unbekannt').element();
		expect(badge.classList.contains('badge-unknown')).toBe(true);
	});

	it('renders nothing when personType does not match a known kind', async () => {
		render(PersonTypeBadge, { props: { personType: 'INDIVIDUAL' } });

		expect(document.querySelector('.badge')).toBeNull();
	});

	it('renders nothing for empty personType', async () => {
		render(PersonTypeBadge, { props: { personType: '' } });

		expect(document.querySelector('.badge')).toBeNull();
	});
});
