import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import ToggleGroup from './ToggleGroup.svelte';
const options = [
    { id: 'opt-1', label: 'Option 1', value: 'opt1' },
    { id: 'opt-2', label: 'Option 2', value: 'opt2', disabled: true },
    { id: 'opt-3', label: 'Option 3', value: 'opt3', size: 'm' },
];
describe('m-toggle-group component', () => {
    it('renders toggles with labels and correct classes', () => {
        const { container, getByLabelText } = render(ToggleGroup, {
            props: {
                name: 'my-toggle-group',
                options,
            },
        });
        const toggles = container.querySelectorAll('.mc-toggle');
        expect(toggles.length).toBe(options.length);
        options.forEach((option) => {
            const input = getByLabelText(option.label);
            expect(input).toBeTruthy();
            expect(input.type).toBe('checkbox');
            expect(input.value).toBe(option.value);
            if (option.disabled)
                expect(input.disabled).toBe(true);
        });
    });
    it('applies inline class when inline prop is true', () => {
        const { container } = render(ToggleGroup, {
            props: {
                name: 'my-toggle-group',
                options,
                inline: true,
            },
        });
        const contentDiv = container.querySelector('.mc-field__content');
        expect(contentDiv?.classList.contains('mc-field__content--inline')).toBe(true);
    });
    it('hides label class applied when label is missing', () => {
        const optsWithNoLabel = [{ id: 'no-label', label: '', value: 'none' }];
        const { container } = render(ToggleGroup, {
            props: {
                name: 'my-toggle-group',
                options: optsWithNoLabel,
            },
        });
        const toggleDiv = container.querySelector('.mc-toggle');
        expect(toggleDiv?.classList.contains('mc-toggle--hide-label')).toBe(true);
    });
});
