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

afterEach(cleanup);

describe('ScriptTypeSelect', () => {
	it('renders the label and select', async () => {
		render(ScriptTypeSelect, { props: { value: '' } });

		await expect.element(page.getByLabelText(/schrifttyp/i)).toBeVisible();
	});

	it('renders all four option values', async () => {
		render(ScriptTypeSelect, { props: { value: '' } });

		const options = document.querySelectorAll('option');
		const values = Array.from(options).map((o) => (o as HTMLOptionElement).value);
		expect(values).toEqual(['', 'TYPEWRITER', 'HANDWRITING_LATIN', 'HANDWRITING_KURRENT']);
	});

	it('marks the placeholder option as disabled', async () => {
		render(ScriptTypeSelect, { props: { value: '' } });

		const placeholder = document.querySelector('option[value=""]') as HTMLOptionElement;
		expect(placeholder.disabled).toBe(true);
	});

	it('initialises the select with the supplied value', async () => {
		render(ScriptTypeSelect, { props: { value: 'TYPEWRITER' } });

		const select = (await page.getByRole('combobox').element()) as HTMLSelectElement;
		expect(select.value).toBe('TYPEWRITER');
	});

	it('disables the select when the disabled prop is true', async () => {
		render(ScriptTypeSelect, { props: { value: '', disabled: true } });

		const select = (await page.getByRole('combobox').element()) as HTMLSelectElement;
		expect(select.disabled).toBe(true);
	});
});
