import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import StatusMessage from './StatusMessage.svelte';
describe('m-status-message component', () => {
    const baseProps = {
        label: 'Test message',
    };
    it('renders with default status "info" and displays label', () => {
        const { container, getByText } = render(StatusMessage, {
            props: baseProps,
        });
        const wrapper = container.querySelector('.mc-status-message');
        expect(wrapper).toBeTruthy();
        expect(wrapper?.classList.contains('mc-status-message--info')).toBe(true);
        expect(getByText(baseProps.label)).toBeTruthy();
        const icon = container.querySelector('.mc-status-message__icon > svg');
        expect(icon).toBeTruthy();
    });
    it('renders correct icon for each status except "inprogress"', () => {
        const statuses = ['info', 'success', 'warning', 'error', 'neutral'];
        statuses.forEach((status) => {
            const { container } = render(StatusMessage, {
                props: { ...baseProps, status },
            });
            const wrapper = container.querySelector('.mc-status-message');
            expect(wrapper?.classList.contains(`mc-status-message--${status}`)).toBe(true);
            const icon = container.querySelector('.mc-status-message__icon > svg');
            expect(icon).toBeTruthy();
        });
    });
    it('renders Loader instead of icon when status is "inprogress"', () => {
        const { container } = render(StatusMessage, {
            props: { ...baseProps, status: 'inprogress' },
        });
        const wrapper = container.querySelector('.mc-status-message');
        expect(wrapper?.classList.contains('mc-status-message--inprogress')).toBe(true);
        expect(container.querySelector('.mc-status-message__icon')).toBeNull();
        const loader = container.querySelector('m-loader, loader, .mc-loader, [data-testid="loader"]');
        expect(loader).toBeTruthy();
    });
    it('displays the provided label', () => {
        const { getByText } = render(StatusMessage, {
            props: { label: 'Hello world', status: 'success' },
        });
        expect(getByText('Hello world')).toBeTruthy();
    });
    it('applies the correct class for appearance prop', () => {
        const { container: standardContainer } = render(StatusMessage, {
            props: { ...baseProps, appearance: 'standard' },
        });
        const standardWrapper = standardContainer.querySelector('.mc-status-message');
        expect(standardWrapper?.classList.contains('mc-status-message--standard')).toBe(false);
        const { container: accentContainer } = render(StatusMessage, {
            props: { ...baseProps, appearance: 'accent' },
        });
        const accentWrapper = accentContainer.querySelector('.mc-status-message');
        expect(accentWrapper?.classList.contains('mc-status-message--accent')).toBe(true);
    });
});
