import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Toggle from './Toggle.svelte';
describe('m-toggle component', () => {
    it('renders with label and proper classes', () => {
        const { container, getByLabelText } = render(Toggle, {
            props: {
                id: 'toggle-id',
                label: 'Enable feature',
                size: 'm',
            },
        });
        const toggleContainer = container.querySelector('.mc-toggle');
        expect(toggleContainer).toBeTruthy();
        expect(toggleContainer.classList.contains('mc-toggle--m')).toBe(true);
        const input = getByLabelText('Enable feature');
        expect(input.type).toBe('checkbox');
        expect(input.checked).toBe(false);
    });
    it('sets initial checked state correctly', () => {
        const { getByLabelText } = render(Toggle, {
            props: {
                id: 'toggle-id',
                label: 'Enable setting',
                checked: true,
            },
        });
        const input = getByLabelText('Enable setting');
        expect(input.checked).toBe(true);
    });
    it('toggles checked state when clicked', async () => {
        const { getByLabelText } = render(Toggle, {
            props: {
                id: 'toggle-id',
                label: 'Toggle me',
                checked: false,
            },
        });
        const input = getByLabelText('Toggle me');
        expect(input.checked).toBe(false);
        await fireEvent.click(input);
        expect(input.checked).toBe(true);
    });
    it('emits DOM "change" event when toggled', async () => {
        const { getByLabelText } = render(Toggle, {
            props: {
                id: 'toggle-id',
                label: 'Notify me',
                checked: false,
            },
        });
        const input = getByLabelText('Notify me');
        const changeHandler = vi.fn();
        input.addEventListener('change', changeHandler);
        await fireEvent.click(input);
        expect(changeHandler).toHaveBeenCalledTimes(1);
    });
    it('is disabled when disabled prop is true', () => {
        const { getByLabelText } = render(Toggle, {
            props: {
                id: 'toggle-id',
                label: 'Disabled toggle',
                disabled: true,
            },
        });
        const input = getByLabelText('Disabled toggle');
        expect(input.disabled).toBe(true);
    });
});
