import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Textinput from './Textinput.svelte';
describe('m-textinput component', () => {
    const baseProps = {
        id: 'textinput-id',
        name: 'username',
        value: 'JohnDoe',
    };
    it('renders input with correct attributes and value', () => {
        const { container } = render(Textinput, { props: baseProps });
        const input = container.querySelector('input');
        expect(input).toBeTruthy();
        expect(input.id).toBe('textinput-id');
        expect(input.name).toBe('username');
        expect(input.value).toBe('JohnDoe');
        expect(input.type).toBe('text');
    });
    it('updates value on user input', async () => {
        const { container } = render(Textinput, { props: baseProps });
        const input = container.querySelector('input');
        await fireEvent.input(input, { target: { value: 'JaneDoe' } });
        expect(input.value).toBe('JaneDoe');
    });
    it('renders placeholder if provided', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, placeholder: 'Enter your name' },
        });
        const input = container.querySelector('input');
        expect(input.placeholder).toBe('Enter your name');
    });
    it('applies disabled and readonly props', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, disabled: true, readonly: true },
        });
        const input = container.querySelector('input');
        expect(input.disabled).toBe(true);
        expect(input.readOnly).toBe(true);
    });
    it('applies is-invalid class when isinvalid is true', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, isinvalid: true },
        });
        const wrapper = container.querySelector('.mc-text-input');
        const input = container.querySelector('input');
        expect(wrapper.classList.contains('is-invalid')).toBe(true);
        expect(input.getAttribute('aria-invalid')).toBe('true');
    });
    it('applies correct input type and size class', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, inputtype: 'email', size: 's' },
        });
        const input = container.querySelector('input');
        const wrapper = container.querySelector('.mc-text-input');
        expect(input.type).toBe('email');
        expect(wrapper.classList.contains('mc-text-input--s')).toBe(true);
    });
    it('shows and works clear button when isclearable is true and value exists', async () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, isclearable: true, clearlabel: 'Clear input' },
        });
        const button = container.querySelector('button');
        const input = container.querySelector('input');
        expect(button).toBeTruthy();
        expect(button.textContent).toContain('Clear input');
        await fireEvent.click(button);
        expect(input.value).toBe('');
    });
    it('does not show clear button when isclearable is false', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, isclearable: false },
        });
        const button = container.querySelector('button');
        expect(button).toBeFalsy();
    });
    it('does not show clear button when value is empty', () => {
        const { container } = render(Textinput, {
            props: { ...baseProps, isclearable: true, value: '' },
        });
        const button = container.querySelector('button');
        expect(button).toBeFalsy();
    });
    it('hides icon slot container if slot is empty', () => {
        const { container } = render(Textinput, { props: baseProps });
        const iconContainer = container.querySelector('.mc-text-input__icon');
        expect(iconContainer.innerHTML.trim()).toBe('<!---->');
        expect(getComputedStyle(iconContainer).display).toBe('none');
    });
});
