import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import PasswordInput from './PasswordInput.svelte';
import { tick } from 'svelte';
describe('m-password-input component', () => {
    const baseProps = {
        id: 'password-input',
        value: '',
    };
    it('renders input with type password initially', () => {
        render(PasswordInput, { props: baseProps });
        const input = document.querySelector('input');
        expect(input).toBeTruthy();
        expect(input.type).toBe('password');
    });
    it('toggles password visibility on button click', async () => {
        const { getByRole, getByText } = render(PasswordInput, {
            props: baseProps,
        });
        const toggleBtn = getByRole('switch');
        const input = document.querySelector('input');
        expect(input.type).toBe('password');
        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
        expect(getByText('Show')).toBeTruthy();
        await fireEvent.click(toggleBtn);
        await tick();
        expect(input.type).toBe('text');
        expect(toggleBtn.getAttribute('aria-checked')).toBe('true');
        expect(getByText('Hide')).toBeTruthy();
        await fireEvent.click(toggleBtn);
        await tick();
        expect(input.type).toBe('password');
        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
    });
    it('shows clear button when isclearable is true and value is not empty', async () => {
        const { container } = render(PasswordInput, {
            props: { ...baseProps, isclearable: true, value: 'secret' },
        });
        const clearBtn = container.querySelector('.mc-controls-options__button');
        expect(clearBtn).toBeTruthy();
        await fireEvent.click(clearBtn);
        await tick();
        const input = container.querySelector('input');
        expect(input.value).toBe('');
    });
    it('does not show clear button when value is empty even if isclearable is true', () => {
        const { container } = render(PasswordInput, {
            props: { ...baseProps, isclearable: true, value: '' },
        });
        const clearBtn = container.querySelector('.mc-controls-options__button');
        expect(clearBtn).toBeNull();
    });
    it('respects disabled and readonly props', () => {
        const { container } = render(PasswordInput, {
            props: { ...baseProps, disabled: true, readonly: true },
        });
        const input = container.querySelector('input');
        expect(input.disabled).toBe(true);
        expect(input.readOnly).toBe(true);
        const toggleBtn = container.querySelector('button[role="switch"]');
        expect(toggleBtn.disabled).toBe(true);
    });
    it('adds is-invalid class when isinvalid is true', () => {
        const { container } = render(PasswordInput, {
            props: { ...baseProps, isinvalid: true },
        });
        expect(container.firstChild).toHaveClass('is-invalid');
    });
    it('uses custom clearlabel and buttonlabel props', () => {
        const clearlabel = 'Clear password';
        const buttonlabel = { show: 'Reveal', hide: 'Conceal' };
        const { getByText } = render(PasswordInput, {
            props: {
                ...baseProps,
                isclearable: true,
                value: 'x',
                clearlabel,
                buttonlabel,
            },
        });
        expect(getByText(clearlabel)).toBeTruthy();
        expect(getByText(buttonlabel.show)).toBeTruthy();
    });
});
