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

describe('Main component', () => {
    test('it renders the Projects section with the correct heading and content', () => {
        render(Main);

        const projectsHeading = screen.getByText('Projects');
        expect(projectsHeading).toBeInTheDocument();

        const projectText = screen.getByText(/git repository/i);
        expect(projectText).toBeInTheDocument();

        const link = screen.getByRole('link', { name: /git repository/i });
        expect(link).toHaveAttribute('href', 'https://git.philw.dev');
        expect(link).toHaveAttribute('target', '_blank');
    });

    test('it renders the Contact section with the correct heading and content', () => {
        render(Main);

        const contactHeading = screen.getByText('Contact');
        expect(contactHeading).toBeInTheDocument();

        const emailLink = screen.getByRole('link', { name: /email filip wandzio/i });
        expect(emailLink).toHaveAttribute('href', 'mailto:contact@philw.dev');

        const matrixLink = screen.getByRole('link', { name: /filip wandzio matrix account/i });
        expect(matrixLink).toHaveAttribute('href', 'https://matrix.to/#/@philw:matrix.philw.dev');
    });

    test('it has the correct aria-labelledby attributes for accessibility', () => {
        render(Main);

        // Ensure sections are correctly labeled for accessibility
        const aboutSection = screen.getByRole('region', { name: /about/i });
        expect(aboutSection).toHaveAttribute('aria-labelledby', 'about-heading');

        const projectsSection = screen.getByRole('region', { name: /projects/i });
        expect(projectsSection).toHaveAttribute('aria-labelledby', 'projects-heading');

        const contactSection = screen.getByRole('region', { name: /contact/i });
        expect(contactSection).toHaveAttribute('aria-labelledby', 'contact-heading');
    });
});