test(legal): add test for the legal notice view

Added tests for the legal notice view (LegalNoticeView.vue).
test(legal): add tests for getLegalNotice
2026-08-06 21:01:18 +02:00 · 2026-08-06 21:01:18 +02:00 · 2026-08-06 21:01:18 +02:00 · 2026-08-06 21:01:18 +02:00 · 2026-08-06 21:01:18 +02:00 · 2026-08-06 21:01:18 +02:00
13 changed files with 402 additions and 5 deletions
@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();

 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref('auto');
+const colorScheme = ref(null);
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
    updateColorScheme(newValue);
@@ -40,8 +40,20 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment">
-            &copy; {{ copyrightPeriod }} Seekra
+        <div class="footer-segment legal-segment">
+            <div></div>
+            <div class="copyright-notice">
+                &copy; {{ copyrightPeriod }} Seekra
+            </div>
+            <div class="legal-links">
+                <RouterLink
+                    :to="{ name: 'legalNotice' }"
+                    class="link"
+                    :title="t('legal.notice.title')"
+                >
+                    {{ t('legal.notice.title') }}
+                </RouterLink>
+            </div>
        </div>
    </footer>
 </template>
@@ -64,4 +76,31 @@ const copyrightPeriod =
 .global-footer a {
    color: var(--dark);
 }
+
+.legal-segment {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    text-align: center;
+}
+
+.copyright-notice {
+    justify-self: center;
+}
+
+.legal-links {
+    justify-self: end;
+}
+
+@media (max-width: 48rem) {
+    .legal-segment {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+    }
+
+    .legal-links {
+        margin-top: 0.8em;
+    }
+}
 </style>
@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export class FetchError extends Error {
+    constructor (message) {
+        super(message);
+        this.name = 'FetchError';
+    };
+};
@@ -0,0 +1,110 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../../errors';
+import { getLegalNotice } from '../fetchLegalContent';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+let fetchSpy;
+
+beforeEach(() => {
+    fetchSpy = vi.spyOn(globalThis, 'fetch');
+});
+
+afterEach(() => {
+    fetchSpy.mockRestore();
+});
+
+const exampleHtml = `<h1>Heading</h1>
+<p>
+    <a>...</a>
+</p>`;
+
+const exampleHtmlWithLinkClass = `<h1>Heading</h1>
+<p>
+    <a class="link">...</a>
+</p>`;
+const exampleHtmlDocument = `<html>
+    <head>
+        <title>Legal Notice</title>
+    </head>
+    <body>
+        ${exampleHtml}
+    </body>
+</html>`;
+const exampleHtmlDocumentWithMain = `<html>
+    <head>
+        <title>Legal Notice</title>
+    </head>
+    <body>
+        <main>
+            ${exampleHtml}
+        </main>
+    </body>
+</html>`;
+
+describe('fetchLegalContent', () => {
+    describe('getLegalNotice', () => {
+        describe('success', () => {
+            test('returns HTML body', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(exampleHtmlDocument)
+                );
+
+                expect(
+                    (await getLegalNotice()).trim()
+                ).toBe(exampleHtmlWithLinkClass);
+            });
+
+            test('returns HTML <main>', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(exampleHtmlDocumentWithMain)
+                );
+
+                expect(
+                    (await getLegalNotice()).trim()
+                ).toBe(exampleHtmlWithLinkClass);
+            });
+
+            test('does not fail on success status code', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(null, { status: 206 })
+                );
+
+                await getLegalNotice();
+            });
+        });
+
+        describe('error', () => {
+            test('throws FetchError when fetch fails', async () => {
+                fetchSpy.mockRejectedValue(new TypeError());
+                await expect(getLegalNotice()).rejects.toThrow(FetchError);
+            });
+
+            test('throws FetchError on HTTP error', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(null, { status: 404 })
+                )
+                await expect(getLegalNotice()).rejects.toThrow(FetchError);
+            });
+
+            test('does not throw FetchError when fetch throws another error than TypeError', async () => {
+                fetchSpy.mockRejectedValue(new Error());
+                await expect(getLegalNotice()).rejects.toThrow(Error);
+            });
+        });
+    });
+});
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../errors';
+import { getAssetsUrl } from '@/config/env';
+
+const fetchHtml = async function fetchHtml (url, options) {
+    let response;
+    try {
+        response = await fetch(url, options);
+    } catch (err) {
+        if (err instanceof TypeError) throw new FetchError(err);
+        else throw err;
+    }
+    if (response.ok) return await response.text();
+    else throw new FetchError();
+};
+
+export const getLegalNotice = async function getLegalNotice () {
+    const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href;
+    const html = await fetchHtml(legalNoticeUrl);
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
+    legalNoticeContainer.querySelectorAll('a').forEach(
+        (link) => link.classList.add('link')
+    );
+    return legalNoticeContainer.innerHTML;
+};
@@ -0,0 +1,61 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { getLegalNotice } from '../services/fetchLegalContent';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const loading = ref(true);
+const legalNoticeError = ref(null);
+const legalNoticeHtml = ref(null);
+onMounted(async () => {
+    try {
+        legalNoticeHtml.value = await getLegalNotice();
+    } catch {
+        legalNoticeError.value = 'legal.notice.loadError';
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="main-content-padding legal-notice-container">
+        <header class="header">
+            <h1>
+                {{ t('legal.notice.title') }}
+            </h1>
+        </header>
+        <main>
+            <div class="legal-notice-loading" v-if="loading">
+                {{ t('loading') }}
+            </div>
+            <div class="error" v-else-if="legalNoticeError">
+                {{ t(legalNoticeError) }}
+            </div>
+            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.header h1 {
+    margin-top: 0;
+}
+</style>
@@ -0,0 +1,78 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../../errors.js';
+import LegalNoticeView from '../LegalNoticeView.vue';
+import { mountComponent } from '@/test-utils/mountComponent';
+import { flushPromises } from '@vue/test-utils';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice'));
+vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        getLegalNotice
+    };
+});
+
+afterEach(() => getLegalNotice.mockRestore());
+
+describe('LegalNoticeView', () => {
+    test('shows loading indicator', () => {
+        const wrapper = mountComponent(LegalNoticeView);
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(true);
+        expect(legalNoticeError.exists()).toBe(false);
+        expect(legalNotice.exists()).toBe(false);
+    });
+
+    test('shows error', async () => {
+        getLegalNotice.mockRejectedValue(new FetchError());
+
+        const wrapper = mountComponent(LegalNoticeView);
+
+        await flushPromises();
+        await wrapper.vm.$nextTick();
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(false);
+        expect(legalNoticeError.exists()).toBe(true);
+        expect(legalNotice.exists()).toBe(false);
+    });
+
+    test('shows legal notice', async () => {
+        const wrapper = mountComponent(LegalNoticeView);
+
+        await flushPromises();
+        await wrapper.vm.$nextTick();
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(false);
+        expect(legalNoticeError.exists()).toBe(false);
+        expect(legalNotice.exists()).toBe(true);
+    });
+});
@@ -40,5 +40,15 @@ export const useSettings = function useSettings () {
        );
    };

-    return { getSetting };
+    /**
+     * Sets the value of a specific setting.
+     * @param {string[]} key - The setting key.
+     * @param value - The new value for the setting.
+     */
+    const setSetting = function setSetting (key, value) {
+        const settingsStore = useSettingsStore();
+        settingsStore.set(key.join('.'), value);
+    };
+
+    return { getSetting, setSetting };
 };
@@ -61,5 +61,11 @@
                "ariaLabel": "Wählt die Option {option} aus"
            }
        }
+    },
+    "legal": {
+        "notice": {
+            "title": "Impressum",
+            "loadError": "Das Impressum konnte nicht geladen werden."
+        }
    }
 }
@@ -61,5 +61,11 @@
                "ariaLabel": "Selects option {option}"
            }
        }
+    },
+    "legal": {
+        "notice": {
+            "title": "Legal Notice",
+            "loadError": "The legal notice could not be loaded."
+        }
    }
 }
@@ -18,6 +18,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from '@/i18n';

 import SearchView from '../views/SearchView.vue';
+import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
 import SettingsView from '@/features/settings/views/SettingsView.vue';
 import NotFound from '../views/NotFound.vue';
@@ -39,6 +40,14 @@ const routes = [
            title: (route) => route.query.q
        }
    },
+    {
+        path: '/legal/notice',
+        name: 'legalNotice',
+        component: LegalNoticeView,
+        meta: {
+            title: () => i18n.global.t('legal.notice.title')
+        }
+    },
    {
        path: '/settings/:rest(.*)*',
        name: 'settings',
@@ -24,6 +24,7 @@ body {

 .link {
    text-decoration: none;
+    color: var(--dark);
 }

 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -91,4 +92,12 @@ input {
 /* Temporary until a custom tap highlight is implemented. */
 * {
    -webkit-tap-highlight-color: transparent;
-}
+}
+
+.error {
+    background-color: var(--color-negative-bg);
+    border: 1px solid var(--color-negative-border);
+    padding: 1em 2em;
+    border-radius: 1.2em;
+    color: var(--white);
+}
@@ -84,6 +84,9 @@ body {
    --light-hover:          var(--light-d-2);

    --invert: invert(0);
+
+    --color-negative-bg:     oklch(59% 0.22706 29.244);
+    --color-negative-border: oklch(51% 0.22706 29.244);
 }

@media (prefers-color-scheme: dark) {
Author	SHA1	Message	Date
jakob.scheidandGitea	9d10acb7bd	test(legal): add test for the legal notice view Added tests for the legal notice view (LegalNoticeView.vue).	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	28c47e91d5	test(legal): add tests for getLegalNotice	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	b64807f25c	feat(legal): add legal notice loading indicator	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	9fa3f5df50	feat(legal): add legal notice error handling The legal notice view now shows an error box if the legal notice could not be loaded.	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	e363ce090d	fix(style): set link color to --dark variable This change was necessary due to the dynamically loaded legal notice. Links would have the default color without this fix.	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	320393aa21	feat(legal): load and display legal notice	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	7a67677a99	feat(legal): add legal notice link in the footer Added a link to the legal notice in the footer and revised the layout of the last footer segment: The segment is now a grid container and the legal links (currently only the legal notice link) are displayed at the end. The copyright notice remains centered. On small screens, the legal links are displayed centered below the copyright notice.	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	ee242fe307	feat(legal): add route for the legal notice	2026-08-06 21:01:18 +02:00
jakob.scheidandGitea	dde56c42ae	Merge pull request 'Feat(settings): function to set settings' (#179 ) from feature/set-setting-function into main Deploy on dev / Deploy on dev (push) Successful in 35s Details Reviewed-on: #179 Reviewed-by: Jakob Gregory	2026-08-06 17:22:49 +02:00
jakob.scheid	15697144b1	feat(settings): add function to set settings Added function setSetting, which sets a setting, to useSettings composable.	2026-08-06 15:33:55 +02:00
jakob.scheidandGitea	396c025ec4	Merge pull request 'Fix(color-scheme): fix system color scheme initial loading' (#177 ) from fix/system-color-scheme-initial into main Deploy on dev / Deploy on dev (push) Successful in 34s Details Reviewed-on: #177 Reviewed-by: Jakob Gregory	2026-08-06 15:27:14 +02:00
jakob.scheid	30f6b82416	fix(color-scheme): set color scheme dummy value to null Set the initial value of the color scheme ref to null to make setting it to the actual value trigger a change if the color scheme is auto.	2026-08-06 15:06:30 +02:00
jakob.scheidandGitea	7b09cd74cb	Merge pull request 'Feat(settings): function to get the value of a setting' (#168 ) from feature/setting-value-function into main Deploy on dev / Deploy on dev (push) Successful in 38s Details Reviewed-on: #168 Reviewed-by: Jakob Gregory	2026-08-06 12:50:51 +02:00