test(legal): add tests for getLegalNotice

feat(legal): add legal notice loading indicator
feat(legal): add legal notice error handling
2026-08-05 15:19:11 +02:00 · 2026-08-05 14:40:43 +02:00 · 2026-08-05 14:38:09 +02:00 · 2026-08-05 14:13:42 +02:00 · 2026-08-05 14:12:54 +02:00 · 2026-08-05 13:33:58 +02:00
12 changed files with 15 additions and 279 deletions
@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();

 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref('auto');
+const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
    updateColorScheme(newValue);
@@ -46,7 +46,6 @@ watch(colorScheme, (newValue) => {
        document.body.classList.remove('color-scheme-auto');
    }
 });
-colorScheme.value = getColorScheme();

 watchEffect(() => updatePageTitle(route));
 </script>
@@ -66,7 +66,6 @@ const copyrightPeriod =
 .footer-segment {
    display: flex;
    justify-content: center;
-    align-items: center;
    gap: 32px;
    padding: var(--padding-y);
    background-color: var(--light-bg);
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { FetchError } from '../../errors';
-import { getLegalNotice } from '../fetchLegalContent';
+import { FetchError } from '../errors';
+import { getLegalNotice } from './fetchLegalContent';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';

 let fetchSpy;
@@ -27,10 +27,9 @@ const legalNoticeHtml = ref(null);
 onMounted(async () => {
    try {
        legalNoticeHtml.value = await getLegalNotice();
+        loading.value = false;
    } catch {
        legalNoticeError.value = 'legal.notice.loadError';
-    } finally {
-        loading.value = false;
    }
 });
 </script>
@@ -43,7 +42,7 @@ onMounted(async () => {
            </h1>
        </header>
        <main>
-            <div class="legal-notice-loading" v-if="loading">
+            <div v-if="loading">
                {{ t('loading') }}
            </div>
            <div class="error" v-else-if="legalNoticeError">
@@ -1,78 +0,0 @@
-/*
-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);
-    });
-});
@@ -16,7 +16,7 @@ limitations under the License.

 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { ref, useId, watch } from 'vue';
+import { useId } from 'vue';
 import { useI18n } from 'vue-i18n';

 const { t } = useI18n();
@@ -35,16 +35,8 @@ const switchId = useId();

 const store = useSettingsStore();

-const enabled = ref(null);
-watch(store, (newStore) => {
-    enabled.value = newStore.get(props.path);
-});
-// set value after registering watcher to avoid immediate value change
-enabled.value = store.get(props.path) ?? props.setting.default;
-
 const toggle = function toggle () {
-    enabled.value = !enabled.value;
-    store.set(props.path, enabled.value);
+    store.set(props.path, !store.get(props.path));
 };
 </script>

@@ -55,7 +47,7 @@ const toggle = function toggle () {
        </label>
        <div
            class="switch-wrapper"
-            :class="{ enabled }"
+            :class="{ enabled: store.get(props.path) }"
            :title="t('settings.switch.title')"
            :aria-label="t('settings.switch.ariaLabel')"
            :aria-labelledby="labelId"
@@ -20,23 +20,17 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';

-const getWrapper = function getWrapper ({
-    i18n = 'switch1',
-    defaultValue = undefined,
-    translations = {},
-    piniaOptions = {}
-} = {}) {
+const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
    return mountComponent(Switch, {
        attrs: {
            setting: {
                type: 'bool',
                name: 'switch',
-                i18n,
-                default: defaultValue
+                i18n
            },
            path: 'switch'
        }
-    }, translations, [], piniaOptions);
+    }, translations);
 };

 describe('Switch', () => {
@@ -59,42 +53,6 @@ describe('Switch', () => {
        expect(switchElementClasses2).not.toContain('enabled');
    });

-    test('shows default value', () => {
-        const wrapper = getWrapper({
-            defaultValue: true
-        });
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeTruthy();
-    });
-
-    test('shows stored value instead of default value', () => {
-        const wrapper = getWrapper({
-            defaultValue: true,
-            piniaOptions: {
-                setupStores: () => {
-                    const store = useSettingsStore();
-                    store.set('switch', false);
-                }
-            }
-        });
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeFalsy();
-    });
-
-    test('reacts on store change', async () => {
-        const wrapper = getWrapper();
-        const store = useSettingsStore();
-
-        const switchElement = wrapper.find('.switch-wrapper');
-        expect(switchElement.classes('enabled')).toBeFalsy();
-        
-        store.set('switch', true);
-        await nextTick();
-        expect(switchElement.classes('enabled')).toBeTruthy();
-    });
-
    test('toggles value in store', async () => {
        const wrapper = getWrapper();
        
@@ -1,94 +0,0 @@
-/*
-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 { useSettingsConfigCacheStore } from '../../stores/settingsConfigCacheStore';
-import { useSettingsStore } from '../../stores/settingsStore';
-import { useSettings } from '../useSettings';
-import { createTestingPinia } from '@pinia/testing';
-import { setActivePinia } from 'pinia';
-import { beforeEach, describe, expect, test, vi } from 'vitest';
-
-const settingDefaultValue = 42;
-const settingPath = ['test', 'number'];
-
-describe('useSettings', () => {
-    describe('getSetting', () => {
-        test('returns stored value', () => {
-            const { getSetting } = useSettings();
-            const settings = useSettingsStore();
-
-            const key = 'setting';
-            const value = 42;
-
-            settings.set(key, value);
-
-            expect(getSetting(key)).toBe(value);
-        });
-
-        test('returns default value', () => {
-            const { getSetting } = useSettings();
-            expect(getSetting(settingPath)).toBe(settingDefaultValue);
-        });
-
-        test('returns stored value instead of default value', () => {
-            const { getSetting } = useSettings();
-            const settings = useSettingsStore();
-
-            const value = 43;
-
-            expect(getSetting(settingPath)).toBe(settingDefaultValue);
-
-            settings.set(settingPath, value);
-            expect(getSetting(settingPath)).toBe(value);
-        });
-
-        test('returns undefined if there is no value', () => {
-            const { getSetting } = useSettings();
-            expect(getSetting(['test', 'bool'])).toBeUndefined();
-        });
-    });
-});
-
-beforeEach(() => {
-    setActivePinia(
-        createTestingPinia({
-            createSpy: vi.fn,
-            stubActions: false
-        })
-    );
-    const settingsConfigCache = useSettingsConfigCacheStore();
-    settingsConfigCache.set({
-        contents: [
-            {
-                name: 'test',
-                i18n: '',
-                content: [
-                    {
-                        type: 'number',
-                        i18n: '',
-                        name: 'number',
-                        default: settingDefaultValue
-                    },
-                    {
-                        type: 'bool',
-                        i18n: '',
-                        name: 'bool'
-                    }
-                ]
-            }
-        ]
-    });
-});
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
 import { useSettingsStore } from '../stores/settingsStore';
 import { getSettingRecursively } from '../utils/getSetting';
 import { loadSettingsConfig } from '../utils/settingsParser';
@@ -28,10 +27,10 @@ export const useSettings = function useSettings () {
     * @param {string[]} key - The settings key.
     * @return The value of the setting.
     */
-    const getSetting = function getSetting (key) {
+    const getSetting = async function getSetting (key) {
        const settingsStore = useSettingsStore();

-        const settings = useSettingsConfigCacheStore().get();
+        const settings = await loadSettingsConfig();
        return (
            settingsStore.get(key) ??
            getSettingRecursively(
@@ -1,31 +0,0 @@
-/*
-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 { defineStore } from 'pinia';
-
-export const useSettingsConfigCacheStore = defineStore('settingsConfigCache', () => {
-    let settingsConfig = undefined;
-
-    const set = function set (value) {
-        settingsConfig = value;
-    };
-
-    const get = function get () {
-        return settingsConfig;
-    };
-
-    return { set, get };
-});
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
 import { validateSettingsConfig } from './settingsValidator.js';

 /**
@@ -22,12 +21,10 @@ import { validateSettingsConfig } from './settingsValidator.js';
 * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
 */
 export async function loadSettingsConfig() {
-    const settingsConfigCache = useSettingsConfigCacheStore();
    let raw;

    try {
        raw = (await import('../settings.json')).default;
-        settingsConfigCache.set(raw);
    } catch (e) {
        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
    }
@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
        <div class="sidebar-controls">
            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
        </div>
-        <div class="sidebar-content" v-show="props.expanded">
+        <div class="sidebar-content" v-if="props.expanded">
            <slot />
        </div>
    </nav>
@@ -61,10 +61,6 @@ const toggleSidebar = function toggleSidebar () {
 }

@media (max-width: 48rem) {
-    .sidebar {
-        border: none;
-    }
-
    .sidebar:not(.expanded) .sidebar-expand-button {
        display: none;
    }
Author	SHA1	Message	Date
jakob.scheid	aecb213c10	test(legal): add tests for getLegalNotice	2026-08-05 15:19:11 +02:00
jakob.scheid	8c62b17e5e	feat(legal): add legal notice loading indicator	2026-08-05 14:40:43 +02:00
jakob.scheid	378f19d3b7	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-05 14:38:09 +02:00
jakob.scheid	64f4116820	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-05 14:13:42 +02:00
jakob.scheid	8f47a6dde0	feat(legal): load and display legal notice	2026-08-05 14:12:54 +02:00
jakob.scheid	9e0b47b672	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-05 13:33:58 +02:00
jakob.scheid	aecd23ddf9	feat(legal): add route for the legal notice	2026-08-05 13:33:52 +02:00
jakob.scheid	de5bee2c4a	feat(settings): add composable for settings values Added the composable useSettings that provides the function getSetting. This function returns the set value of the setting, or otherwise the default value. If there is no default value, it returns undefined.	2026-08-05 00:32:53 +02:00