import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Select from './Select.svelte';
describe('m-select component', () => {
    const baseProps = {
        id: 'test-select',
        name: 'test-name',
        options: [
            { text: 'Option 1', value: '1' },
            { text: 'Option 2', value: '2', disabled: true },
            { text: 'Option 3', value: '3' },
        ],
        value: '1',
    };
    it('renders a select element with correct options', () => {
        const { container } = render(Select, { props: baseProps });
        const select = container.querySelector('select');
        const options = container.querySelectorAll('option');
        expect(select).toBeTruthy();
        expect(options.length).toBe(3);
        expect(options[0].textContent).toBe('Option 1');
        expect(options[0].value).toBe('1');
        expect(options[1].disabled).toBe(true);
        expect(options[2].value).toBe('3');
    });
    it('sets the correct initial value', () => {
        const { container } = render(Select, { props: baseProps });
        const select = container.querySelector('select');
        expect(select.value).toBe('1');
    });
    it('updates value on change (with bind:value)', async () => {
        const { container } = render(Select, {
            props: { ...baseProps, value: '1' },
        });
        const select = container.querySelector('select');
        await fireEvent.change(select, { target: { value: '3' } });
        expect(select.value).toBe('3');
    });
    it('displays placeholder if provided', () => {
        const { container } = render(Select, {
            props: { ...baseProps, placeholder: 'Please select', value: '' },
        });
        const placeholderOption = container.querySelector('option');
        expect(placeholderOption?.textContent).toContain('Please select');
        expect(placeholderOption?.disabled).toBe(true);
        expect(placeholderOption?.selected).toBe(true);
    });
    it('applies the disabled prop', () => {
        const { container } = render(Select, {
            props: { ...baseProps, disabled: true },
        });
        const select = container.querySelector('select');
        expect(select.disabled).toBe(true);
    });
    it('applies the readonly class when readonly is true', () => {
        const { container } = render(Select, {
            props: { ...baseProps, readonly: true },
        });
        const select = container.querySelector('select');
        expect(select.classList.contains('mc-select__control--readonly')).toBe(true);
    });
    it('applies the is-invalid class when isinvalid is true', () => {
        const { container } = render(Select, {
            props: { ...baseProps, isinvalid: true },
        });
        const select = container.querySelector('select');
        expect(select.classList.contains('is-invalid')).toBe(true);
    });
    it('applies the correct size class', () => {
        const { container } = render(Select, {
            props: { ...baseProps, size: 's' },
        });
        const select = container.querySelector('.mc-select');
        expect(select.classList.contains('mc-select--s')).toBe(true);
    });
});
