innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor magic links in Footer component and associated tests

Browse Source
This commit is contained in:
Chi Cong Tran
2025-09-23 09:04:22 +02:00
parent ef5971d41c
commit 33b40ee29f
2 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/Footer.svelte
View File

@@ -1,6 +1,8 @@
<script>
import Profile from "$lib/icons/Profile.svelte";
import { ROUTE_NAMES } from "../../routes";
export let data;
</script>
@@ -10,19 +12,19 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="flex justify-between divide-x divide-gray-900/5 border-x border-gray-900/5">
<a
href="/list"
href="{ROUTE_NAMES.LIST}"
class="px-4 py-1 -ml-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
>
&copy; 2023 Innovation Hub Niedersachen
</a>
<a
href="/"
href="{ROUTE_NAMES.ROOT}"
class="px-4 py-1 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
>
back
</a>
<a
href="/"
href="{ROUTE_NAMES.ROOT}"
class="px-4 py-1 -mr-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
>
<!--icon-->

53
tests/components/Footer.test.ts Normal file
View File

@@ -0,0 +1,53 @@
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'
}
};
const { container } = 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
// Look for the <svg> element with class="w-6 h-6"
const svg = container.querySelector('svg.w-6.h-6');
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
// Look for the <svg> element with class="w-6 h-6"
const svg = container.querySelector('svg.w-6.h-6');
expect(svg).toBeTruthy();
});
});