import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Checkbox from './Checkbox.svelte';
describe('m-checkbox component', () => {
    const id = 'test-checkbox';
    const label = 'Accept Terms';
    it('renders with label and unchecked by default', () => {
        const { container, getByLabelText } = render(Checkbox, {
            props: { id, label },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox).toBeTruthy();
        expect(checkbox.type).toBe('checkbox');
        expect(checkbox.checked).toBe(false);
        const labelEl = container.querySelector('label.mc-checkbox__label');
        expect(labelEl).toBeTruthy();
        expect(labelEl?.getAttribute('for')).toBe(id);
        expect(labelEl?.textContent).toBe(label);
    });
    it('renders checked when prop is true', () => {
        const { getByLabelText } = render(Checkbox, {
            props: { id, label, checked: true },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox.checked).toBe(true);
    });
    it('binds checked state and updates on user click', async () => {
        const { getByLabelText } = render(Checkbox, {
            props: { id, label, checked: false },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox.checked).toBe(false);
        await fireEvent.click(checkbox);
        expect(checkbox.checked).toBe(true);
    });
    it('applies "is-invalid" class and aria-invalid when isinvalid=true', () => {
        const { getByLabelText } = render(Checkbox, {
            props: { id, label, isinvalid: true },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox).toHaveClass('is-invalid');
        expect(checkbox).toHaveAttribute('aria-invalid', 'true');
    });
    it('renders disabled checkbox when disabled=true', () => {
        const { getByLabelText } = render(Checkbox, {
            props: { id, label, disabled: true },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox.disabled).toBe(true);
    });
    it('renders indeterminate state when indeterminate=true', () => {
        const { getByLabelText } = render(Checkbox, {
            props: { id, label, indeterminate: true },
        });
        const checkbox = getByLabelText(label);
        expect(checkbox.indeterminate).toBe(true);
    });
    it('applies indented class when indented=true', () => {
        const { container } = render(Checkbox, {
            props: { id, indented: true },
        });
        const wrapper = container.querySelector('div.mc-checkbox');
        expect(wrapper).toHaveClass('mc-checkbox--indented');
    });
    it('does not render label element if label prop is missing', () => {
        const { container } = render(Checkbox, { props: { id } });
        const labelEl = container.querySelector('label.mc-checkbox__label');
        expect(labelEl).toBeNull();
    });
});
