// #region SelectTest [C:2] [TYPE Module] [SEMANTICS test, ui, select, dropdown, component, atom]
// @BRIEF Unit tests for Select UI component — label, options, disabled, id generation.
// @LAYER Tests
// @RELATION BINDS_TO -> [Select]
// @UX_STATE Idle -> Renders select dropdown with options

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Select from '../Select.svelte';

describe('Select', () => {
	it('renders a select element', () => {
		const { container } = render(Select);
		const select = container.querySelector('select');
		expect(select).not.toBeNull();
	});

	it('renders label when provided', () => {
		const { container } = render(Select, { props: { label: 'Choose option' } });
		const label = container.querySelector('label');
		expect(label).not.toBeNull();
		expect(label!.textContent).toBe('Choose option');
	});

	it('does not render label when not provided', () => {
		const { container } = render(Select);
		const label = container.querySelector('label');
		expect(label).toBeNull();
	});

	it('renders options from array', () => {
		const options = [
			{ value: 'opt1', label: 'Option 1' },
			{ value: 'opt2', label: 'Option 2' },
			{ value: 'opt3', label: 'Option 3' },
		];
		const { container } = render(Select, { props: { options } });
		const renderedOptions = container.querySelectorAll('option');
		expect(renderedOptions).toHaveLength(3);
		expect(renderedOptions[0].textContent).toBe('Option 1');
		expect(renderedOptions[0].getAttribute('value')).toBe('opt1');
		expect(renderedOptions[1].textContent).toBe('Option 2');
		expect(renderedOptions[2].textContent).toBe('Option 3');
	});

	it('renders empty options array gracefully', () => {
		const { container } = render(Select, { props: { options: [] } });
		const options = container.querySelectorAll('option');
		expect(options).toHaveLength(0);
	});

	it('sets disabled attribute on select', () => {
		const { container } = render(Select, { props: { disabled: true } });
		const select = container.querySelector('select') as HTMLSelectElement;
		expect(select.disabled).toBe(true);
	});

	it('generates an id starting with select- when not provided', () => {
		const { container } = render(Select);
		const select = container.querySelector('select') as HTMLSelectElement;
		expect(select.id).toMatch(/^select-/);
	});

	it('uses external id when provided', () => {
		const { container } = render(Select, { props: { id: 'my-select' } });
		const select = container.querySelector('select') as HTMLSelectElement;
		expect(select.id).toBe('my-select');
	});

	it('applies custom class name', () => {
		const { container } = render(Select, { props: { class: 'custom-class' } });
		const select = container.querySelector('select') as HTMLSelectElement;
		expect(select.className).toContain('custom-class');
	});

	it('links label to select via for/id attribute', () => {
		const { container } = render(Select, { props: { label: 'Type', id: 'type-select' } });
		const label = container.querySelector('label') as HTMLLabelElement;
		const select = container.querySelector('select') as HTMLSelectElement;
		expect(label.htmlFor).toBe('type-select');
		expect(select.id).toBe('type-select');
	});
});
// #endregion SelectTest
