feat: frontend unit tests

2026-01-20 15:22:58 -05:00 · 2026-01-07 19:47:54 +02:00
parent ed5cfa1a84
commit 1c15880ae3
74 changed files with 6000 additions and 877 deletions
--- a/frontend/tests/utils/settings/theme.test.ts
+++ b/frontend/tests/utils/settings/theme.test.ts
@@ -0,0 +1,77 @@
+import { init, settings } from '../../../src/static/js/utils/settings/theme';
+
+const themeConfig = (theme?: any, logo?: any) => {
+    init(theme, logo);
+    return settings();
+};
+
+describe('utils/settings', () => {
+    describe('theme', () => {
+        test('Applies defaults when no inputs provided', () => {
+            const cfg = themeConfig();
+            expect(cfg).toStrictEqual({
+                mode: 'light',
+                switch: { enabled: true, position: 'header' },
+                logo: { lightMode: { img: '', svg: '' }, darkMode: { img: '', svg: '' } },
+            });
+        });
+
+        test("Sets dark mode only when theme.mode is exactly 'dark' after trim", () => {
+            expect(themeConfig({ mode: 'dark' }).mode).toBe('dark');
+            expect(themeConfig({ mode: ' dark ' }).mode).toBe('dark');
+            expect(themeConfig({ mode: 'Dark' }).mode).toBe('light');
+            expect(themeConfig({ mode: 'light' }).mode).toBe('light');
+            expect(themeConfig({ mode: '  ' }).mode).toBe('light');
+        });
+
+        test('Switch config: enabled only toggles off when explicitly false; position set to sidebar only when exactly sidebar after trim', () => {
+            expect(themeConfig({ switch: { enabled: false } }).switch.enabled).toBe(false);
+            expect(themeConfig({ switch: { enabled: true } }).switch.enabled).toBe(true);
+            expect(themeConfig({ switch: { enabled: undefined } }).switch.enabled).toBe(true);
+
+            expect(themeConfig({ switch: { position: 'sidebar' } }).switch.position).toBe('sidebar');
+            expect(themeConfig({ switch: { position: ' sidebar ' } }).switch.position).toBe('header'); // @todo: Fix this. It should be 'sidebar'
+            expect(themeConfig({ switch: { position: 'header' } }).switch.position).toBe('header');
+            expect(themeConfig({ switch: { position: 'foot' } }).switch.position).toBe('header');
+        });
+
+        test('Trims and maps logo URLs for both light and dark modes; ignores missing fields', () => {
+            const cfg = themeConfig(undefined, {
+                lightMode: { img: ' /img/light.png ', svg: ' /img/light.svg ' },
+                darkMode: { img: ' /img/dark.png ', svg: ' /img/dark.svg ' },
+            });
+
+            expect(cfg).toStrictEqual({
+                mode: 'light',
+                switch: { enabled: true, position: 'header' },
+                logo: {
+                    lightMode: { img: '/img/light.png', svg: '/img/light.svg' },
+                    darkMode: { img: '/img/dark.png', svg: '/img/dark.svg' },
+                },
+            });
+
+            const partial = themeConfig(undefined, { lightMode: { img: ' /only-light.png ' } });
+
+            expect(partial).toStrictEqual({
+                mode: 'light',
+                switch: { enabled: true, position: 'header' },
+                logo: {
+                    lightMode: { img: '/only-light.png', svg: '' },
+                    darkMode: { img: '', svg: '' },
+                },
+            });
+        });
+
+        test('Does not mutate input objects', () => {
+            const themeIn = { mode: ' dark ', switch: { enabled: false, position: ' sidebar ' } };
+            const logoIn = { lightMode: { img: ' x ', svg: ' y ' }, darkMode: { img: ' z ', svg: ' w ' } };
+            const themeCopy = JSON.parse(JSON.stringify(themeIn));
+            const logoCopy = JSON.parse(JSON.stringify(logoIn));
+
+            themeConfig(themeIn, logoIn);
+
+            expect(themeIn).toStrictEqual(themeCopy);
+            expect(logoIn).toStrictEqual(logoCopy);
+        });
+    });
+});