import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Callout from './Callout.svelte';
describe('m-callout component', () => {
    const defaultProps = {
        title: 'Helpful Tip',
        description: 'This is a description for the callout.',
    };
    it('renders with default appearance "standard"', () => {
        const { container, getByText } = render(Callout, { props: defaultProps });
        const section = container.querySelector('section.mc-callout');
        expect(section).toBeTruthy();
        expect(section?.classList.contains('mc-callout--standard')).toBe(true);
        expect(section).toHaveAttribute('role', 'status');
        expect(getByText(defaultProps.title)).toBeTruthy();
        expect(getByText(defaultProps.description)).toBeTruthy();
        const footer = container.querySelector('.mc-callout__footer');
        expect(footer).toBeTruthy();
        expect(footer).toBeEmptyDOMElement();
        expect(getComputedStyle(footer).display).toBe('none');
    });
    it('applies correct appearance class', () => {
        const appearances = ['standard', 'accent', 'tips', 'inverse'];
        appearances.forEach((appearance) => {
            const { container, unmount } = render(Callout, {
                props: { ...defaultProps, appearance },
            });
            const section = container.querySelector('section.mc-callout');
            expect(section?.classList.contains(`mc-callout--${appearance}`)).toBe(true);
            unmount();
        });
    });
});
