import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Field from './Field.svelte';
describe('m-field component', () => {
    const baseProps = {
        id: 'email',
        label: 'Email Address',
    };
    it('renders label with for attribute', () => {
        const { getByText } = render(Field, { props: baseProps });
        const label = getByText('Email Address');
        expect(label).toBeInTheDocument();
        expect(label.getAttribute('for')).toBe('email');
    });
    it('renders requirement text when provided', () => {
        const { getByText } = render(Field, {
            props: { ...baseProps, requirementtext: 'required' },
        });
        const req = getByText('(required)');
        expect(req).toBeInTheDocument();
        expect(req.classList.contains('mc-field__requirement')).toBe(true);
    });
    it('renders help text when helpid and helptext are provided', () => {
        const { getByText } = render(Field, {
            props: {
                ...baseProps,
                helpid: 'email-help',
                helptext: 'We will not share your email.',
            },
        });
        const helpText = getByText('We will not share your email.');
        expect(helpText).toBeInTheDocument();
        expect(helpText.id).toBe('email-help');
        expect(helpText.classList.contains('mc-field__help')).toBe(true);
    });
    it('shows validation message with invalid state', () => {
        const { getByText } = render(Field, {
            props: {
                ...baseProps,
                message: 'This field is required',
                messageid: 'validation-msg',
                isinvalid: true,
            },
        });
        const validation = getByText('This field is required');
        expect(validation).toBeInTheDocument();
        expect(validation.id).toBe('validation-msg');
        expect(validation.classList.contains('is-invalid')).toBe(true);
        expect(validation.classList.contains('is-valid')).toBe(false);
    });
    it('shows validation message with valid state', () => {
        const { getByText } = render(Field, {
            props: {
                ...baseProps,
                message: 'Looks good!',
                messageid: 'validation-msg-valid',
                isvalid: true,
            },
        });
        const validation = getByText('Looks good!');
        expect(validation).toBeInTheDocument();
        expect(validation.id).toBe('validation-msg-valid');
        expect(validation.classList.contains('is-valid')).toBe(true);
        expect(validation.classList.contains('is-invalid')).toBe(false);
    });
    it('renders loader when isloading is true', () => {
        const { container, getByText } = render(Field, {
            props: {
                ...baseProps,
                message: 'Loading...',
                messageid: 'loading-msg',
                isloading: true,
            },
        });
        const validation = getByText('Loading...');
        expect(validation).toBeInTheDocument();
        const loader = container.querySelector('m-loader, .mc-loader');
        expect(loader).toBeTruthy();
    });
    it('does not render validation message if not valid, invalid, or loading', () => {
        const { container } = render(Field, {
            props: {
                ...baseProps,
                message: 'Should not appear',
                messageid: 'msg-id',
            },
        });
        const validation = container.querySelector('.mc-field__validation-message');
        expect(validation).toBeNull();
    });
    it('does not render help text when helpid is missing', () => {
        const { container } = render(Field, {
            props: { ...baseProps, helptext: 'Missing ID!' },
        });
        const help = container.querySelector('.mc-field__help');
        expect(help).toBeNull();
    });
});
