Merge pull request 'Feat(sidebar): implement sidebar toggling' (#157) from feature/expandable-sidebar into main

Reviewed-on: #157
Reviewed-by: Jakob Gregory

scripts/setup.ps1

@@ -1,3 +1,17 @@
 #!/usr/bin/env pwsh
 
+# 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.
+
 git config --local commit.template .gitmessage

scripts/setup.sh

@@ -1,3 +1,17 @@
 #!/usr/bin/bash
 
+# 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.
+
 git config --local commit.template .gitmessage

src/assets/icons/sidebar-expand.svg

@@ -0,0 +1,38 @@
+<!--
+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.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="
+            M6 4
+            h12
+            a4 4 0 0 1 4 4
+            v8
+            a4 4 0 0 1 -4 4
+            h-12
+            a4 4 0 0 1 -4 -4
+            v-8
+            a4 4 0 0 1 4 -4
+            m2 0
+            v16
+        "
+    />
+</svg>

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/settingsValidator.js

@@ -73,12 +73,27 @@ export const validateEntry = function validateEntry (entry, path) {
             throw new Error(`[settings] "${path}.default" must be a string`);
         }
         if (entry.type === 'selection') {
-            if (typeof entry.default !== 'string') {
-                throw new Error(`[settings] "${path}.default" must be a string`);
-            };
-            if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                throw new Error(`[settings] option "${path}.default" does not exist`);
-            };
+            if (entry.allowMultiple) {
+                if (!Array.isArray(entry.default)) {
+                    throw new Error(`[settings] "${path}.default" must be an array`);
+                }
+                const allOptions = entry.options.map((option) => option.name);
+                entry.default.forEach((defaultValue, index) => {
+                    if (typeof defaultValue !== 'string') {
+                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
+                    }
+                    if (!allOptions.includes(defaultValue)) {
+                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
+                    }
+                });
+            } else {
+                if (typeof entry.default !== 'string') {
+                    throw new Error(`[settings] "${path}.default" must be a string`);
+                };
+                if (!entry.options.map((option) => option.name).includes(entry.default)) {
+                    throw new Error(`[settings] option "${path}.default" does not exist`);
+                };
+            }
         };
     }
 }

src/features/sidebar/components/Sidebar.vue

@@ -14,15 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import SidebarExpandButton from './SidebarExpandButton.vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+const emit = defineEmits(['toggleExpanded']);
+
+const toggleSidebar = function toggleSidebar () {
+    emit('toggleExpanded');
+};
+</script>
+
 <template>
-    <nav class="sidebar">
-        <slot />
+    <nav class="sidebar" :class="{ expanded }">
+        <div class="sidebar-controls">
+            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
+        </div>
+        <div class="sidebar-content" v-if="props.expanded">
+            <slot />
+        </div>
     </nav>
 </template>
 
 <style scoped>
 .sidebar {
     border-right: 1px solid var(--border);
+}
+
+.sidebar-controls {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: 1em 20px;
+    padding-bottom: 0;
+    margin-bottom: 8px;
+}
+
+.sidebar:not(.expanded) .sidebar-controls {
+    padding: 1em;
+}
+
+@media (max-width: 48rem) {
+    .sidebar:not(.expanded) .sidebar-expand-button {
+        display: none;
+    }
+}
+
+.sidebar-content {
     padding: 20px;
+    padding-top: 0;
 }
 </style>

src/features/sidebar/components/SidebarExpandButton.vue

@@ -0,0 +1,41 @@
+<!--
+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 Icon from '@/features/icons/components/Icon.vue';
+
+const emit = defineEmits(['click']);
+
+const click = function click (event) {
+    emit('click', event);
+};
+</script>
+
+<template>
+    <button class="button sidebar-expand-button">
+        <Icon name="sidebar-expand" @click="click" />
+    </button>
+</template>
+
+<style scoped>
+.sidebar-expand-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: 10px;
+}
+</style>

src/layouts/LeftSidebarLayout.vue

@@ -16,11 +16,30 @@ limitations under the License.
 
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
+import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+
+const expanded = ref(props.expanded);
+
+const toggleExpanded = function toggleExpanded () {
+    expanded.value = !expanded.value;
+};
 </script>
 
 <template>
-    <div class="layout-container">
-        <Sidebar>
+    <div class="layout-container" :class="{ expanded }">
+        <div class="sidebar-expand-button-container">
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+        </div>
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
@@ -32,11 +51,53 @@ import Sidebar from '@/features/sidebar/components/Sidebar.vue';
 <style scoped>
 .layout-container {
     display: grid;
-    grid-template-columns: min(24%, 280px) 1fr;
+    grid-template-columns: calc(32px + 2em) 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "sidebar-expand sidebar-expand"
+        "sidebar main-content";
     border-top: 1px solid var(--border);
 }
 
+.layout-container.expanded {
+    grid-template-columns: min(24%, 280px) 1fr;
+}
+
+.sidebar-expand-button-container {
+    grid-area: sidebar-expand;
+    display: none;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+@media (max-width: 48rem) {
+    .layout-container {
+        grid-template-columns: 0 1fr;
+    }
+
+    .layout-container.expanded {
+        grid-template-columns: 1fr 0;
+    }
+    
+    .layout-container:not(.expanded) .sidebar-expand-button-container {
+        justify-content: end;
+        display: block;
+        padding: 20px;
+    }
+
+    .layout-container:not(.expanded) .main-content {
+        padding-top: 0;
+    }
+
+    .layout-container.expanded .main-content {
+        display: none;
+    }
+}
+
 .main-content {
+    grid-area: main-content;
     padding: 20px;
 }
 </style>

src/locales/es.json

@@ -38,5 +38,28 @@
             }
         }
     },
-    "slogan": "Hecho para buscar."
+    "slogan": "Hecho para buscar.",
+    "settings": {
+        "input": {
+            "done": {
+                "title": "Guardar valor",
+                "ariaLabel": "Guarda el valor introducido"
+            }
+        },
+        "switch": {
+            "title": "Cambiar valor",
+            "ariaLabel": "Cambia el valor"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Va a la página de configuración {page}"
+            }
+        },
+        "noSectionSelected": "No se ha seleccionado ninguna sección de configuración.",
+        "selection": {
+            "option": {
+                "ariaLabel": "Selecciona la opción {option}"
+            }
+        }
+    }
 }

src/locales/fr.json

@@ -38,5 +38,28 @@
             }
         }
     },
-    "slogan": "Conçu pour chercher."
+    "slogan": "Conçu pour chercher.",
+    "settings": {
+        "input": {
+            "done": {
+                "title": "Enregistrer la valeur",
+                "ariaLabel": "Enregistre la valeur saisie"
+            }
+        },
+        "switch": {
+            "title": "Basculer la valeur",
+            "ariaLabel": "Bascule la valeur"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Accéder à la page de paramètres {page}"
+            }
+        },
+        "noSectionSelected": "Aucune section des paramètres n'est sélectionnée.",
+        "selection": {
+            "option": {
+                "ariaLabel": "Sélectionne l'option {option}"
+            }
+        }
+    }
 }

src/locales/it.json

@@ -38,5 +38,28 @@
             }
         }
     },
-    "slogan": "Costruito per cercare."
+    "slogan": "Costruito per cercare.",
+    "settings": {
+        "input": {
+            "done": {
+            "title": "Salva valore",
+                "ariaLabel": "Salva il valore inserito"
+            }
+        },
+        "switch": {
+            "title": "Attiva/disattiva valore",
+            "ariaLabel": "Attiva o disattiva il valore"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Vai alla pagina delle impostazioni {page}"
+            }
+        },
+        "noSectionSelected": "Nessuna sezione delle impostazioni è selezionata.",
+        "selection": {
+            "option": {
+                "ariaLabel": "Seleziona l'opzione {option}"
+            }
+        }
+    }
 }

src/locales/pt.json

@@ -38,5 +38,28 @@
             }
         }
     },
-    "slogan": "Feito para pesquisar."
+    "slogan": "Feito para pesquisar.",
+    "settings": {
+        "input": {
+            "done": {
+            "title": "Guardar valor",
+                "ariaLabel": "Guarda o valor introduzido"
+            }
+        },
+        "switch": {
+            "title": "Alternar valor",
+            "ariaLabel": "Alterna o valor"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Ir para a página de definições {page}"
+            }
+        },
+        "noSectionSelected": "Nenhuma secção de definições está selecionada.",
+        "selection": {
+            "option": {
+                "ariaLabel": "Seleciona a opção {option}"
+            }
+        }
+    }
 }

src/styles/common.css

@@ -25,7 +25,7 @@ body {
     text-decoration: none;
 }
 
-.link:hover:not(.button-link), .link:focus:not(.button-link) {
+.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
     outline: none;
     text-decoration: underline;
 }
@@ -78,7 +78,7 @@ input {
     color: inherit;
 }
 
-.button:focus {
+.button:focus-visible {
     background-color: var(--light-hover);
     outline: none;
 }

src/utils/__tests__/cssDimensions.test.js

@@ -14,109 +14,111 @@ 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';
 
-test.for([
-    { dimension: null,                       expected: '0px' },
-    { dimension: undefined,                  expected: '0px' },
+describe('cssDimensions', () => {
+    test.for([
+        { dimension: null,                       expected: '0px' },
+        { dimension: undefined,                  expected: '0px' },
 
-    { dimension: 0,                          expected: '0px' },
-    { dimension: -0,                         expected: '0px' },
-    { dimension: -1,                         expected: '-1px' },
-    { dimension: -42,                        expected: '-42px' },
-    { dimension: 1,                          expected: '1px' },
-    { dimension: 42,                         expected: '42px' },
+        { dimension: 0,                          expected: '0px' },
+        { dimension: -0,                         expected: '0px' },
+        { dimension: -1,                         expected: '-1px' },
+        { dimension: -42,                        expected: '-42px' },
+        { dimension: 1,                          expected: '1px' },
+        { dimension: 42,                         expected: '42px' },
 
-    { dimension: 0.0,                        expected: '0px' },
-    { dimension: -0.0,                       expected: '0px' },
-    { dimension: -1.0,                       expected: '-1px' },
-    { dimension: -42.0,                      expected: '-42px' },
-    { dimension: 1.0,                        expected: '1px' },
-    { dimension: 42.0,                       expected: '42px' },
+        { dimension: 0.0,                        expected: '0px' },
+        { dimension: -0.0,                       expected: '0px' },
+        { dimension: -1.0,                       expected: '-1px' },
+        { dimension: -42.0,                      expected: '-42px' },
+        { dimension: 1.0,                        expected: '1px' },
+        { dimension: 42.0,                       expected: '42px' },
 
-    { dimension: 0.42,                       expected: '0.42px' },
-    { dimension: -0.42,                      expected: '-0.42px' },
-    { dimension: -1.42,                      expected: '-1.42px' },
-    { dimension: -42.42,                     expected: '-42.42px' },
-    { dimension: 1.42,                       expected: '1.42px' },
-    { dimension: 42.42,                      expected: '42.42px' },
+        { dimension: 0.42,                       expected: '0.42px' },
+        { dimension: -0.42,                      expected: '-0.42px' },
+        { dimension: -1.42,                      expected: '-1.42px' },
+        { dimension: -42.42,                     expected: '-42.42px' },
+        { dimension: 1.42,                       expected: '1.42px' },
+        { dimension: 42.42,                      expected: '42.42px' },
 
-    { dimension: '0',                        expected: '0px' },
-    { dimension: '-0',                       expected: '-0px' },
-    { dimension: '-1',                       expected: '-1px' },
-    { dimension: '-42',                      expected: '-42px' },
-    { dimension: '1',                        expected: '1px' },
-    { dimension: '42',                       expected: '42px' },
+        { dimension: '0',                        expected: '0px' },
+        { dimension: '-0',                       expected: '-0px' },
+        { dimension: '-1',                       expected: '-1px' },
+        { dimension: '-42',                      expected: '-42px' },
+        { dimension: '1',                        expected: '1px' },
+        { dimension: '42',                       expected: '42px' },
 
-    { dimension: '0.0',                      expected: '0.0px' },
-    { dimension: '-0.0',                     expected: '-0.0px' },
-    { dimension: '-1.0',                     expected: '-1.0px' },
-    { dimension: '-42.0',                    expected: '-42.0px' },
-    { dimension: '1.0',                      expected: '1.0px' },
-    { dimension: '42.0',                     expected: '42.0px' },
+        { dimension: '0.0',                      expected: '0.0px' },
+        { dimension: '-0.0',                     expected: '-0.0px' },
+        { dimension: '-1.0',                     expected: '-1.0px' },
+        { dimension: '-42.0',                    expected: '-42.0px' },
+        { dimension: '1.0',                      expected: '1.0px' },
+        { dimension: '42.0',                     expected: '42.0px' },
 
-    { dimension: '0.42',                     expected: '0.42px' },
-    { dimension: '-0.42',                    expected: '-0.42px' },
-    { dimension: '-1.42',                    expected: '-1.42px' },
-    { dimension: '-42.42',                   expected: '-42.42px' },
-    { dimension: '1.42',                     expected: '1.42px' },
-    { dimension: '42.42',                    expected: '42.42px' },
+        { dimension: '0.42',                     expected: '0.42px' },
+        { dimension: '-0.42',                    expected: '-0.42px' },
+        { dimension: '-1.42',                    expected: '-1.42px' },
+        { dimension: '-42.42',                   expected: '-42.42px' },
+        { dimension: '1.42',                     expected: '1.42px' },
+        { dimension: '42.42',                    expected: '42.42px' },
 
-    { dimension: '0px',                      expected: '0px' },
-    { dimension: '-0px',                     expected: '-0px' },
-    { dimension: '-1px',                     expected: '-1px' },
-    { dimension: '-42px',                    expected: '-42px' },
-    { dimension: '1px',                      expected: '1px' },
-    { dimension: '42px',                     expected: '42px' },
+        { dimension: '0px',                      expected: '0px' },
+        { dimension: '-0px',                     expected: '-0px' },
+        { dimension: '-1px',                     expected: '-1px' },
+        { dimension: '-42px',                    expected: '-42px' },
+        { dimension: '1px',                      expected: '1px' },
+        { dimension: '42px',                     expected: '42px' },
 
-    { dimension: '0.0px',                    expected: '0.0px' },
-    { dimension: '-0.0px',                   expected: '-0.0px' },
-    { dimension: '-1.0px',                   expected: '-1.0px' },
-    { dimension: '-42.0px',                  expected: '-42.0px' },
-    { dimension: '1.0px',                    expected: '1.0px' },
-    { dimension: '42.0px',                   expected: '42.0px' },
+        { dimension: '0.0px',                    expected: '0.0px' },
+        { dimension: '-0.0px',                   expected: '-0.0px' },
+        { dimension: '-1.0px',                   expected: '-1.0px' },
+        { dimension: '-42.0px',                  expected: '-42.0px' },
+        { dimension: '1.0px',                    expected: '1.0px' },
+        { dimension: '42.0px',                   expected: '42.0px' },
 
-    { dimension: '0.42px',                   expected: '0.42px' },
-    { dimension: '-0.42px',                  expected: '-0.42px' },
-    { dimension: '-1.42px',                  expected: '-1.42px' },
-    { dimension: '-42.42px',                 expected: '-42.42px' },
-    { dimension: '1.42px',                   expected: '1.42px' },
-    { dimension: '42.42px',                  expected: '42.42px' },
+        { dimension: '0.42px',                   expected: '0.42px' },
+        { dimension: '-0.42px',                  expected: '-0.42px' },
+        { dimension: '-1.42px',                  expected: '-1.42px' },
+        { dimension: '-42.42px',                 expected: '-42.42px' },
+        { dimension: '1.42px',                   expected: '1.42px' },
+        { dimension: '42.42px',                  expected: '42.42px' },
 
-    { dimension: '0em',                      expected: '0em' },
-    { dimension: '-0em',                     expected: '-0em' },
-    { dimension: '-1em',                     expected: '-1em' },
-    { dimension: '-42em',                    expected: '-42em' },
-    { dimension: '1em',                      expected: '1em' },
-    { dimension: '42em',                     expected: '42em' },
+        { dimension: '0em',                      expected: '0em' },
+        { dimension: '-0em',                     expected: '-0em' },
+        { dimension: '-1em',                     expected: '-1em' },
+        { dimension: '-42em',                    expected: '-42em' },
+        { dimension: '1em',                      expected: '1em' },
+        { dimension: '42em',                     expected: '42em' },
 
-    { dimension: '0.0em',                    expected: '0.0em' },
-    { dimension: '-0.0em',                   expected: '-0.0em' },
-    { dimension: '-1.0em',                   expected: '-1.0em' },
-    { dimension: '-42.0em',                  expected: '-42.0em' },
-    { dimension: '1.0em',                    expected: '1.0em' },
-    { dimension: '42.0em',                   expected: '42.0em' },
+        { dimension: '0.0em',                    expected: '0.0em' },
+        { dimension: '-0.0em',                   expected: '-0.0em' },
+        { dimension: '-1.0em',                   expected: '-1.0em' },
+        { dimension: '-42.0em',                  expected: '-42.0em' },
+        { dimension: '1.0em',                    expected: '1.0em' },
+        { dimension: '42.0em',                   expected: '42.0em' },
 
-    { dimension: '0.42em',                   expected: '0.42em' },
-    { dimension: '-0.42em',                  expected: '-0.42em' },
-    { dimension: '-1.42em',                  expected: '-1.42em' },
-    { dimension: '-42.42em',                 expected: '-42.42em' },
-    { dimension: '1.42em',                   expected: '1.42em' },
-    { dimension: '42.42em',                  expected: '42.42em' },
+        { dimension: '0.42em',                   expected: '0.42em' },
+        { dimension: '-0.42em',                  expected: '-0.42em' },
+        { dimension: '-1.42em',                  expected: '-1.42em' },
+        { dimension: '-42.42em',                 expected: '-42.42em' },
+        { dimension: '1.42em',                   expected: '1.42em' },
+        { dimension: '42.42em',                  expected: '42.42em' },
 
-    { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
-    { dimension: 'calc(42px)',               expected: 'calc(42px)' },
-    { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
-    { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
-    { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
-    { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
+        { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
+        { dimension: 'calc(42px)',               expected: 'calc(42px)' },
+        { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
+        { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
+        { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
+        { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
 
-    { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
-    { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
-    { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
-    { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
-    { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
-])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
-    expect(ensureUnit(dimension)).toBe(expected);
+        { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
+        { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
+        { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
+        { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
+        { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
+    ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
+        expect(ensureUnit(dimension)).toBe(expected);
+    });
 });

src/utils/__tests__/currentLanguage.test.js

@@ -14,48 +14,48 @@ 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 = [
-    { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
-    { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
+describe('currentLanguage', () => {
+    test.for([
+        { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
 
-    { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
-    { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
+        { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
 
-    { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
-    { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
+        { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
 
-    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
-    { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
-    { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
+        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
+        { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
+        { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
 
-    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
-    { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
-    { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
+        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
 
-    { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
-    { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
-    { 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'}
-];
+        { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
+        { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
+        { 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 }) => {
+        Object.defineProperty(navigator, 'language', {
+            value: navigatorLanguage,
+            configurable: true
+        });
 
-test.for(locales)('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
-    Object.defineProperty(navigator, 'language', {
-        value: navigatorLanguage,
-        configurable: true
+        if (localStorageLanguage) {
+            localStorage.setItem('locale', localStorageLanguage);
+        };
+
+        expect(getCurrentLanguage()).toBe(expected);
     });
-
-    if (localStorageLanguage) {
-        localStorage.setItem('locale', localStorageLanguage);
-    };
-
-    expect(getCurrentLanguage()).toBe(expected);
 });