import { render, screen } from '@testing-library/svelte';
import { describe, test, expect } from 'vitest';

import { ROUTE_NAMES } from '../../src/routes';

import Footer from '$lib/components/Footer.svelte';

describe('Footer component', () => {
	test('Enthält Behörden-Name und entsprechenden Link', () => {
		render(Footer);
		const linkElement = screen.getByText('Innovation Hub', { exact: false });
		expect(linkElement).toBeInTheDocument();
		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.LIST);
	});
	test('Enthält Zurück-Button und entsprechenden Link', () => {
		render(Footer);
		const linkElement = screen.getByText('back');
		expect(linkElement).toBeInTheDocument();
		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);
	});
	test('Enthält Profil-Icon und entsprechenden Link: angemeldet', () => {
		const mockData = {
			user: {
				id: 'admin'
			}
		};
		render(Footer, { props: { data: mockData } });
		const linkElement = screen.getByText('admin', { exact: false });
		expect(linkElement).toBeInTheDocument();
		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);

		// Check for presence of `Profile` component
		const svg = screen.getByTestId('profile-component');
		expect(svg).toBeTruthy();
	});
	test('Enthält Profil-Icon und entsprechenden Link: nicht angemeldet', () => {
		const { container } = render(Footer, { props: { data: null } });

		const links = container.querySelectorAll('a');
		const linkElement = links[2]; // Index starts at 0
		expect(linkElement).toHaveAttribute('href', ROUTE_NAMES.ROOT);

		// User/View does not have any ID
		const ID_displayElement = screen.queryByText('admin');
		expect(ID_displayElement).not.toBeInTheDocument();

		// Check for presence of `Profile` component
		const svg = screen.getByTestId('profile-component');
		expect(svg).toBeTruthy();
	});
});