import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import RadioGroup from './RadioGroup.svelte';
describe('m-radio-group component', () => {
    const baseProps = {
        name: 'test-group',
        options: [
            { id: 'radio-1', label: 'Option 1', value: '1' },
            { id: 'radio-2', label: 'Option 2', value: '2' },
            { id: 'radio-3', label: 'Option 3', value: '3', disabled: true },
        ],
    };
    it('renders all radio options', () => {
        const { container } = render(RadioGroup, { props: baseProps });
        const radios = container.querySelectorAll('input[type="radio"]');
        const labels = container.querySelectorAll('label');
        expect(radios.length).toBe(3);
        expect(labels.length).toBe(3);
        baseProps.options.forEach((option, index) => {
            expect(radios[index].getAttribute('id')).toBe(option.id);
            expect(radios[index].getAttribute('value')).toBe(option.value);
            expect(labels[index].textContent).toBe(option.label);
        });
    });
    it('sets initial value as checked', () => {
        const { container } = render(RadioGroup, {
            props: { ...baseProps, value: '2' },
        });
        const radios = container.querySelectorAll('input[type="radio"]');
        expect(radios[1].checked).toBe(true);
    });
    it('only one radio is checked at a time (bind:group behavior)', async () => {
        const { container } = render(RadioGroup, {
            props: { ...baseProps, value: '1' },
        });
        const radios = container.querySelectorAll('input[type="radio"]');
        expect(radios[0].checked).toBe(true);
        expect(radios[1].checked).toBe(false);
        await fireEvent.click(radios[1]);
        expect(radios[1].checked).toBe(true);
        expect(radios[0].checked).toBe(false);
    });
    it('applies disabled prop to correct radio', () => {
        const { container } = render(RadioGroup, { props: baseProps });
        const radios = container.querySelectorAll('input[type="radio"]');
        expect(radios[2].disabled).toBe(true);
        expect(radios[0].disabled).toBe(false);
    });
    it('adds is-invalid class when isinvalid is true', () => {
        const { container } = render(RadioGroup, {
            props: { ...baseProps, isinvalid: true },
        });
        const radios = container.querySelectorAll('input[type="radio"]');
        radios.forEach((radio) => {
            expect(radio.classList.contains('is-invalid')).toBe(true);
        });
    });
    it('applies inline class to container when inline is true', () => {
        const { container } = render(RadioGroup, {
            props: { ...baseProps, inline: true },
        });
        const wrapper = container.querySelector('.mc-field__content');
        expect(wrapper?.classList.contains('mc-field__content--inline')).toBe(true);
    });
});
