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

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

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

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

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

        it('renders the arrow icon', () => {
            const { container } = render(FooterLink, { props: defaultProps });
            const icon = container.querySelector('svg');
            expect(icon).toBeInTheDocument();
            expect(icon).toHaveClass('lucide-arrow-up-right');
        });
    });

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

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