import { render, fireEvent } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import TileSelectable from './TileSelectable.svelte';
describe('m-tile-selectable', () => {
    it('applies the default classes', () => {
        const { container } = render(TileSelectable);
        const tile = container.querySelector('.mc-tile');
        expect(tile).toBeTruthy();
        expect(tile?.classList.contains('mc-tile--selectable')).toBe(true);
        expect(tile?.classList.contains('mc-tile--selected')).toBe(false);
    });
    it('applies the "mc-tile--selected" class when checked is true', () => {
        const { container } = render(TileSelectable, { checked: true });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--selected')).toBe(true);
    });
    it('applies the "mc-tile--bordered" class when bordered is true', () => {
        const { container } = render(TileSelectable, { bordered: true });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--bordered')).toBe(true);
    });
    it('applies input position classes', () => {
        const { container } = render(TileSelectable, {
            inputposition: 'left',
            centered: true,
        });
        const tile = container.querySelector('.mc-tile');
        expect(tile?.classList.contains('mc-tile--input-left')).toBe(true);
        expect(tile?.classList.contains('mc-tile--input-center')).toBe(true);
    });
    it('renders a checkbox by default', () => {
        const { container } = render(TileSelectable);
        const input = container.querySelector('input[type="checkbox"]');
        expect(input).toBeTruthy();
    });
    it('renders a radio input when inputtype is "radio"', () => {
        const { container } = render(TileSelectable, { inputtype: 'radio' });
        const input = container.querySelector('input[type="radio"]');
        expect(input).toBeTruthy();
    });
    it('toggles checked state for checkbox', async () => {
        const { container } = render(TileSelectable, { checked: false });
        const input = container.querySelector('input[type="checkbox"]');
        expect(input.checked).toBe(false);
        await fireEvent.click(input);
        expect(input.checked).toBe(true);
        await fireEvent.click(input);
        expect(input.checked).toBe(false);
    });
    it('toggles checked state for radio', async () => {
        const { container } = render(TileSelectable, { inputtype: 'radio', checked: false });
        const input = container.querySelector('input[type="radio"]');
        expect(input.checked).toBe(false);
        await fireEvent.click(input);
        expect(input.checked).toBe(true);
    });
});
