import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import Skeleton from './Skeleton.svelte';

afterEach(() => cleanup());

describe('Skeleton primitive', () => {
    it('renders an element carrying the given testid', () => {
        render(Skeleton, { props: { testid: 'sk' } });
        expect(screen.getByTestId('sk')).toBeTruthy();
    });

    it('is decorative (aria-hidden) so screen readers ignore it', () => {
        render(Skeleton, { props: { testid: 'sk' } });
        expect(screen.getByTestId('sk').getAttribute('aria-hidden')).toBe('true');
    });

    it('applies width and height as inline styles', () => {
        render(Skeleton, { props: { testid: 'sk', width: '120px', height: '2rem' } });
        const el = screen.getByTestId('sk') as HTMLElement;
        expect(el.style.width).toBe('120px');
        expect(el.style.height).toBe('2rem');
    });

    it('defaults width to 100% when omitted', () => {
        render(Skeleton, { props: { testid: 'sk' } });
        expect((screen.getByTestId('sk') as HTMLElement).style.width).toBe('100%');
    });

    it('maps the radius prop to a radius class', () => {
        render(Skeleton, { props: { testid: 'sk', radius: 'lg' } });
        expect(screen.getByTestId('sk').classList.contains('radius-lg')).toBe(true);
    });

    it('defaults to the md radius', () => {
        render(Skeleton, { props: { testid: 'sk' } });
        expect(screen.getByTestId('sk').classList.contains('radius-md')).toBe(true);
    });

    it('renders a pill radius for the circle variant', () => {
        render(Skeleton, { props: { testid: 'sk', variant: 'circle' } });
        expect(screen.getByTestId('sk').classList.contains('radius-pill')).toBe(true);
    });

    it('carries the skeleton base class for the shimmer', () => {
        render(Skeleton, { props: { testid: 'sk' } });
        expect(screen.getByTestId('sk').classList.contains('skeleton')).toBe(true);
    });

    it('emits aspect-ratio inline (and no fixed height) so a fluid box keeps its shape', () => {
        render(Skeleton, { props: { testid: 'sk', aspectRatio: '2 / 3' } });
        const el = screen.getByTestId('sk') as HTMLElement;
        expect(el.style.aspectRatio).toBe('2 / 3');
        // A definite height would defeat aspect-ratio and collapse the box.
        expect(el.style.height).toBe('');
    });

    it('gives a text-variant line a default height without a caller-supplied one', () => {
        render(Skeleton, { props: { testid: 'sk', variant: 'text' } });
        expect((screen.getByTestId('sk') as HTMLElement).style.height).toBe('0.9em');
    });

    it('lets an explicit height override the text-variant default', () => {
        render(Skeleton, { props: { testid: 'sk', variant: 'text', height: '1rem' } });
        expect((screen.getByTestId('sk') as HTMLElement).style.height).toBe('1rem');
    });
});
