test(settings): add describe to settingsValidator test

Added a watcher (watchEffect) to App.vue to update the page title
always when a dependency changes. The afterEach hook was removed from
the router.

src/App.vue

@@ -18,21 +18,40 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
+import { updatePageTitle } from './router';
 import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
-import { ref, provide, watch } from 'vue';
+import { ref, provide, watch, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
-watch(colorScheme, val => updateColorScheme(val))
+watch(colorScheme, (newValue) => {
+    updateColorScheme(newValue);
+    document.body.style.setProperty(colorScheme, {
+        auto: 'normal',
+        dark: 'dark',
+        light: 'light'
+    });
+    if (newValue === 'dark') {
+        document.body.classList.add('dark');
+    } else {
+        document.body.classList.remove('dark');
+    }
+    if (newValue === 'auto') {
+        document.body.classList.add('color-scheme-auto');
+    } else {
+        document.body.classList.remove('color-scheme-auto');
+    }
+});
+
+watchEffect(() => updatePageTitle(route));
 </script>
 
 <template>
-    <div
+    <div id="app-wrapper">
-        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
-        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
-        id="app-wrapper"
-    >
         <Navbar />
 
         <router-view class="main-content" />

src/features/i18n/components/__tests__/LanguageSwitchButton.test.js

@@ -39,7 +39,7 @@ vi.mock('@/features/icons/components/Icon.vue', () => ({
     }
 }));
 
-describe('LanguageSwitchButton.vue', () => {
+describe('LanguageSwitchButton', () => {
     beforeEach(() => {
         vi.clearAllMocks();
         localStorage.clear();

src/features/settings/utils/__tests__/settingsValidator.test.js

@@ -17,6 +17,7 @@ limitations under the License.
 import { describe, test, expect } from 'vitest';
 import { validateSettingsConfig, validateEntry, validateSelectionOptions, assertType, assertString } from '../settingsValidator';
 
+describe('settingsValidator', () => {
     describe('validateSettingsConfig', () => {
         test.for([
             { raw: false, expected: false },
@@ -756,3 +757,4 @@ describe('assertString', () => {
             expect(() => assertString(value)).throws(Error);
         });
     });
+});

src/router/index.js

@@ -59,18 +59,17 @@ const router = createRouter({
     routes
 });
 
-// set page title
+export const updatePageTitle = function updatePageTitle (route) {
-router.afterEach(to => {
     const title =
-        typeof to.meta.title === 'function'
+        typeof route.meta.title === 'function'
-        ? to.meta.title(to)
+        ? route.meta.title(route)
-        : to.meta.title;
+        : route.meta.title;
 
     if (title) {
         document.title = `${title} - Seekra`;
     } else {
         document.title = 'Seekra';
     };
-});
+};
 
 export default router;

src/styles/common.css

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 body {
+    background-color: var(--light-bg);
+    color: var(--dark);
     margin: 0;
     font-size: 16px;
 }

src/styles/variables/colors.css

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-#app-wrapper {
+body {
     --primary-color-l-8:  oklch(0.897 0.202 260);
     --primary-color-l-7:  oklch(0.847 0.202 260);
     --primary-color-l-6:  oklch(0.797 0.202 260);
@@ -87,7 +87,7 @@ limitations under the License.
 }
 
 @media (prefers-color-scheme: dark) {
-    #app-wrapper.color-scheme-auto {
+    body.color-scheme-auto {
         --dark-l-8:             var(--white-d-8);
         --dark-l-7:             var(--white-d-7);
         --dark-l-6:             var(--white-d-6);
@@ -121,7 +121,7 @@ limitations under the License.
     }
 }
 
-#app-wrapper.dark {
+body.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);
     --dark-l-6:             var(--white-d-6);

src/utils/__tests__/cssDimensions.test.js

@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { expect,  test } from 'vitest';
+import { describe, expect,  test } from 'vitest';
 import { ensureUnit } from '../cssDimensions';
 
+describe('cssDimensions', () => {
     test.for([
         { dimension: null,                       expected: '0px' },
         { dimension: undefined,                  expected: '0px' },
@@ -120,3 +121,4 @@ test.for([
     ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
         expect(ensureUnit(dimension)).toBe(expected);
     });
+});

src/utils/__tests__/currentLanguage.test.js

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { expect, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import getCurrentLanguage from '../currentLanguage';
 
-const locales = [
+describe('currentLanguage', () => {
+    test.for([
         { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
         { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
         { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
@@ -45,9 +46,7 @@ const locales = [
         { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
         { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
         { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
-];
+    ])('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
-
-test.for(locales)('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
         Object.defineProperty(navigator, 'language', {
             value: navigatorLanguage,
             configurable: true
@@ -59,3 +58,4 @@ test.for(locales)('returns the language $expected (navigator: $navigatorLanguage
 
         expect(getCurrentLanguage()).toBe(expected);
     });
+});