import {
    render,
    screen,
} from '@testing-library/svelte';
import { createRawSnippet } from 'svelte';
import Footnote from './Footnote.svelte';

function textSnippet(text: string) {
    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
}

describe('Footnote', () => {
    it('renders children content in a span', () => {
        render(Footnote, { children: textSnippet('* measured at 20°C') });
        expect(screen.getByText('* measured at 20°C')).toBeInTheDocument();
    });

    it('renders nothing when no children or render', () => {
        const { container } = render(Footnote);
        expect(container.firstElementChild).toBeNull();
    });

    it('passes class to the render snippet', () => {
        const renderSnippet = createRawSnippet<[{ class: string }]>(getParams => ({
            render: () => {
                const cls = getParams().class;
                return `<span class="${cls}">note</span>`;
            },
        }));
        const { container } = render(Footnote, { render: renderSnippet });
        expect(container.querySelector('span')?.className).toContain('font-mono');
    });
});