frontend-svelte/src/shared/ui/Link/Link.svelte.test.ts

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

/**
 * Helper to create a plain text snippet
 */
function textSnippet(text: string) {
    return createRawSnippet(() => ({
        render: () => `<span>${text}</span>`,
    }));
}

/**
 * Helper to create an icon snippet
 */
function iconSnippet() {
    return createRawSnippet(() => ({
        render: () => `<svg class="lucide-arrow-up-right"></svg>`,
    }));
}

describe('Link', () => {
    const defaultProps = {
        href: 'https://fonts.google.com',
    };

    describe('Rendering', () => {
        it('renders text content via children snippet', () => {
            render(Link, {
                props: {
                    ...defaultProps,
                    children: textSnippet('Google Fonts'),
                },
            });
            expect(screen.getByText('Google Fonts')).toBeInTheDocument();
        });

        it('renders as an anchor element with correct href', () => {
            render(Link, { props: defaultProps });
            const link = screen.getByRole('link');
            expect(link).toBeInTheDocument();
            expect(link).toHaveAttribute('href', 'https://fonts.google.com');
        });

        it('renders the icon when provided via snippet', () => {
            const { container } = render(Link, {
                props: {
                    ...defaultProps,
                    children: textSnippet('Google Fonts'),
                    icon: iconSnippet(),
                },
            });
            const icon = container.querySelector('svg');
            expect(icon).toBeInTheDocument();
            expect(icon).toHaveClass('lucide-arrow-up-right');
        });
    });

    describe('Attributes', () => {
        it('applies custom CSS classes', () => {
            render(Link, {
                props: {
                    ...defaultProps,
                    class: 'custom-class',
                },
            });
            expect(screen.getByRole('link')).toHaveClass('custom-class');
        });

        it('spreads additional anchor attributes', () => {
            render(Link, {
                props: {
                    ...defaultProps,
                    target: '_blank',
                    rel: 'noopener',
                },
            });
            const link = screen.getByRole('link');
            expect(link).toHaveAttribute('target', '_blank');
            expect(link).toHaveAttribute('rel', 'noopener');
        });
    });
});