import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import StatusNotification from './StatusNotification.svelte';
describe('m-status-notification component', () => {
    const baseProps = {
        title: 'Test Title',
        description: 'Test description',
    };
    it('renders with default status "info" and displays title and description', () => {
        const { container, getByText } = render(StatusNotification, {
            props: baseProps,
        });
        const section = container.querySelector('section.mc-status-notification');
        expect(section).toBeTruthy();
        expect(section?.classList.contains('mc-status-notification--info')).toBe(true);
        expect(getByText(baseProps.title)).toBeTruthy();
        expect(getByText(baseProps.description)).toBeTruthy();
        const icon = container.querySelector('.mc-status-notification__icon > svg');
        expect(icon).toBeTruthy();
    });
    it('renders correct icon based on status prop', () => {
        const statuses = ['info', 'success', 'warning', 'error'];
        statuses.forEach((status) => {
            const { container } = render(StatusNotification, {
                props: { ...baseProps, status },
            });
            const section = container.querySelector('section.mc-status-notification');
            expect(section?.classList.contains(`mc-status-notification--${status}`)).toBe(true);
            const icon = container.querySelector('.mc-status-notification__icon > svg');
            expect(icon).toBeTruthy();
        });
    });
    it('renders close button when closable is true and emits close event on click', async () => {
        const { container } = render(StatusNotification, {
            props: { ...baseProps, closable: true },
        });
        const section = container.querySelector('section.mc-status-notification');
        const closeBtn = container.querySelector('button.mc-status-notification-closable__close');
        expect(closeBtn).toBeTruthy();
        const closeHandler = vi.fn();
        section.addEventListener('close', closeHandler);
        await fireEvent.click(closeBtn);
        expect(closeHandler).toHaveBeenCalledTimes(1);
        section.removeEventListener('close', closeHandler);
    });
    it('does not render close button when closable is false or undefined', () => {
        const { container: c1 } = render(StatusNotification, {
            props: { ...baseProps, closable: false },
        });
        expect(c1.querySelector('button.mc-status-notification-closable__close')).toBeNull();
        const { container: c2 } = render(StatusNotification, { props: baseProps });
        expect(c2.querySelector('button.mc-status-notification-closable__close')).toBeNull();
    });
});
