import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Radio from './Radio.svelte';
describe('m-radio component', () => {
    const baseProps = {
        id: 'test-radio',
        name: 'group1',
        label: 'Option 1',
    };
    it('renders radio input and label correctly', () => {
        const { container } = render(Radio, { props: baseProps });
        const input = container.querySelector('input[type="radio"]');
        const label = container.querySelector('label');
        expect(input).toBeTruthy();
        expect(label).toBeTruthy();
        expect(label?.textContent).toBe('Option 1');
        expect(label?.getAttribute('for')).toBe('test-radio');
    });
    it('sets the checked prop when true', () => {
        const { container } = render(Radio, {
            props: { ...baseProps, checked: true },
        });
        const input = container.querySelector('input');
        expect(input.checked).toBe(true);
    });
    it('responds to click and toggles checked state', async () => {
        const { container } = render(Radio, {
            props: { ...baseProps, checked: false },
        });
        const input = container.querySelector('input');
        expect(input.checked).toBe(false);
        await fireEvent.click(input);
    });
    it('applies disabled prop', () => {
        const { container } = render(Radio, {
            props: { ...baseProps, disabled: true },
        });
        const input = container.querySelector('input');
        expect(input.disabled).toBe(true);
    });
    it('applies invalid class when isinvalid is true', () => {
        const { container } = render(Radio, {
            props: { ...baseProps, isinvalid: true },
        });
        const input = container.querySelector('input');
        expect(input.classList.contains('is-invalid')).toBe(true);
    });
    it('sets name attribute correctly', () => {
        const { container } = render(Radio, { props: baseProps });
        const input = container.querySelector('input');
        expect(input.getAttribute('name')).toBe('group1');
    });
    it('reflects checked as an attribute on the custom element', () => {
        const { container } = render(Radio, {
            props: { ...baseProps, checked: true },
        });
        const input = container.querySelector('input');
        expect(input.checked).toBe(true);
    });
});
