import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Loader from './Loader.svelte';
describe('m-loader component', () => {
    it('renders with default props', () => {
        const { container } = render(Loader);
        const loader = container.querySelector('.mc-loader');
        expect(loader).toBeTruthy();
        expect(loader?.classList).toContain('mc-loader--m');
        expect(loader?.classList).toContain('mc-loader--standard');
        expect(loader?.classList).not.toContain('mc-loader--text-visible');
        const svg = container.querySelector('svg.mc-loader__icon');
        expect(svg).toBeTruthy();
        expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
        const circle = container.querySelector('circle.mc-loader__path');
        expect(circle?.getAttribute('r')).toBe('9');
        const textSpan = container.querySelector('.mc-loader__text');
        expect(textSpan).toBeNull();
    });
    it('renders with size "s" and appearance "accent"', () => {
        const { container } = render(Loader, {
            props: { size: 's', appearance: 'accent' },
        });
        const loader = container.querySelector('.mc-loader');
        expect(loader?.classList).toContain('mc-loader--s');
        expect(loader?.classList).toContain('mc-loader--accent');
        const svg = container.querySelector('svg.mc-loader__icon');
        expect(svg?.getAttribute('viewBox')).toBe('0 0 24 24');
        const circle = container.querySelector('circle.mc-loader__path');
        expect(circle?.getAttribute('r')).toBe('6');
    });
    it('renders with size "l" and appearance "inverse"', () => {
        const { container } = render(Loader, {
            props: { size: 'l', appearance: 'inverse' },
        });
        const loader = container.querySelector('.mc-loader');
        expect(loader?.classList).toContain('mc-loader--l');
        expect(loader?.classList).toContain('mc-loader--inverse');
        const svg = container.querySelector('svg.mc-loader__icon');
        expect(svg?.getAttribute('viewBox')).toBe('0 0 64 64');
        const circle = container.querySelector('circle.mc-loader__path');
        expect(circle?.getAttribute('r')).toBe('19');
    });
    it('renders with text and applies text-visible class', () => {
        const text = 'Loading...';
        const { container, getByText } = render(Loader, { props: { text } });
        const loader = container.querySelector('.mc-loader');
        expect(loader?.classList).toContain('mc-loader--text-visible');
        const textSpan = getByText(text);
        expect(textSpan).toBeTruthy();
        expect(textSpan.classList.contains('mc-loader__text')).toBe(true);
    });
    it('renders correctly for size "xs" (falls through to "s" logic)', () => {
        const { container } = render(Loader, { props: { size: 'xs' } });
        const svg = container.querySelector('svg.mc-loader__icon');
        expect(svg?.getAttribute('viewBox')).toBe('0 0 20 20');
        const circle = container.querySelector('circle.mc-loader__path');
        expect(circle?.getAttribute('r')).toBe('6');
    });
    it('handles unsupported size by falling back to defaults', () => {
        const { container } = render(Loader, { props: { size: 'unknown' } });
        const svg = container.querySelector('svg.mc-loader__icon');
        expect(svg?.getAttribute('viewBox')).toBe('0 0 32 32');
        const circle = container.querySelector('circle.mc-loader__path');
        expect(circle?.getAttribute('r')).toBe('9');
    });
    it('handles unsupported appearance by still rendering standard loader', () => {
        const { container } = render(Loader, { props: { appearance: 'weird' } });
        const loader = container.querySelector('.mc-loader');
        expect(loader?.classList).toContain('mc-loader--weird');
        expect(container.querySelector('svg.mc-loader__icon')).toBeTruthy();
    });
});
