test(settings): add tests for switch

Added test cases for the switch to test the default value functionality.

src/features/settings/components/Switch.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { useId } from 'vue';
+import { ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -35,8 +35,16 @@ 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 () {
-    store.set(props.path, !store.get(props.path));
+    enabled.value = !enabled.value;
+    store.set(props.path, enabled.value);
 };
 </script>
 
@@ -47,7 +55,7 @@ const toggle = function toggle () {
         </label>
         <div
             class="switch-wrapper"
-            :class="{ enabled: store.get(props.path) }"
+            :class="{ enabled }"
             :title="t('settings.switch.title')"
             :aria-label="t('settings.switch.ariaLabel')"
             :aria-labelledby="labelId"

src/features/settings/components/__tests__/Switch.test.js

@@ -20,17 +20,23 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';
 
-const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
+const getWrapper = function getWrapper ({
+    i18n = 'switch1',
+    defaultValue = undefined,
+    translations = {},
+    piniaOptions = {}
+} = {}) {
     return mountComponent(Switch, {
         attrs: {
             setting: {
                 type: 'bool',
                 name: 'switch',
-                i18n
+                i18n,
+                default: defaultValue
             },
             path: 'switch'
         }
-    }, translations);
+    }, translations, [], piniaOptions);
 };
 
 describe('Switch', () => {
@@ -53,6 +59,42 @@ 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();
         

src/features/settings/views/SettingsView.vue

@@ -61,6 +61,10 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
+
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
+};
 </script>
 
 <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
                             :class="{ active: activeSection === section.name }"
+                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>

src/features/sidebar/components/Sidebar.vue

@@ -61,6 +61,10 @@ const toggleSidebar = function toggleSidebar () {
 }
 
 @media (max-width: 48rem) {
+    .sidebar {
+        border: none;
+    }
+
     .sidebar:not(.expanded) .sidebar-expand-button {
         display: none;
     }

src/layouts/LeftSidebarLayout.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleExpanded = function toggleExpanded () {
+const toggleSidebar = function toggleSidebar () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleExpanded = function toggleExpanded () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
         </div>
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" />
+            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot />
+            <slot :toggleSidebar="toggleSidebar" />
         </main>
     </div>
 </template>

src/styles/common.css

@@ -86,4 +86,9 @@ input {
 
 .button:hover {
     background-color: var(--light-hover);
+}
+
+/* Temporary until a custom tap highlight is implemented. */
+* {
+    -webkit-tap-highlight-color: transparent;
 }