test: add coverage for CSP theme-init scripts and navbar handlers

Author: clean6378-max-it

static/js/app.test.js

@@ -5,16 +5,22 @@ const showProjects = vi.fn();
 const showWorkspace = vi.fn();
 const loadSession = vi.fn();
 const showSearchPage = vi.fn();
+const toggleTheme = vi.fn();
+const toggleSidebar = vi.fn();
 
 vi.mock('./projects.js', () => ({ showProjects }));
 vi.mock('./sessions.js', () => ({ showWorkspace, loadSession, selectSession: vi.fn(), copyAll: vi.fn() }));
 vi.mock('./search.js', () => ({ showSearchPage, doSearch: vi.fn() }));
 vi.mock('./export.js', () => ({ bulkExport: vi.fn(), downloadSession: vi.fn() }));
+vi.mock('./shared/utils.js', async (importOriginal) => {
+    const actual = await importOriginal();
+    return { ...actual, toggleSidebar, closeSidebar: vi.fn() };
+});
 vi.mock('./shared/theme.js', () => ({
     HLJS_THEME_SHEETS: {},
     applyHljsTheme: vi.fn(),
     applyTheme: vi.fn(),
-    toggleTheme: vi.fn(),
+    toggleTheme,
     setWorkspaceMode: vi.fn(),
 }));
 
@@ -109,3 +115,55 @@ describe('router (app.js)', () => {
         expect(showWorkspace).toHaveBeenCalledWith('other');
     });
 });
+
+describe('navbar handlers (app.js DOMContentLoaded)', () => {
+    const origScrollTo = window.scrollTo;
+
+    beforeAll(async () => {
+        vi.resetModules();
+        window.scrollTo = vi.fn();
+        document.body.innerHTML = `
+            <button id="hamburger-btn"></button>
+            <a id="navbar-brand" href="#"></a>
+            <a id="nav-search-link" href="#search"></a>
+            <button id="theme-toggle"></button>
+            <div id="content"></div>
+            <span id="footer-year"></span>
+        `;
+        await import('./app.js');
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+    });
+
+    afterAll(() => {
+        window.scrollTo = origScrollTo;
+    });
+
+    beforeEach(() => {
+        toggleTheme.mockClear();
+        toggleSidebar.mockClear();
+        showProjects.mockClear();
+        showSearchPage.mockClear();
+    });
+
+    it('wires hamburger click to toggleSidebar', () => {
+        document.getElementById('hamburger-btn').click();
+        expect(toggleSidebar).toHaveBeenCalledTimes(1);
+    });
+
+    it('wires navbar brand click to showProjects', () => {
+        const brand = document.getElementById('navbar-brand');
+        brand.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(showProjects).toHaveBeenCalled();
+    });
+
+    it('wires nav search link click to showSearchPage', () => {
+        const link = document.getElementById('nav-search-link');
+        link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(showSearchPage).toHaveBeenCalled();
+    });
+
+    it('wires theme toggle click to toggleTheme', () => {
+        document.getElementById('theme-toggle').click();
+        expect(toggleTheme).toHaveBeenCalledTimes(1);
+    });
+});

static/js/hljs-theme-init.test.js

@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('hljs-theme-init.js', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.body.innerHTML = '';
+    });
+
+    it('does nothing when data-theme is dark', async () => {
+        document.body.innerHTML = '<link id="hljs-theme" href="https://example.com/dark.css" />';
+        await import('./hljs-theme-init.js');
+        const link = document.getElementById('hljs-theme');
+        expect(link.href).toContain('dark.css');
+        expect(link.getAttribute('integrity')).toBeNull();
+    });
+
+    it('sets light-theme CDN href and SRI when data-theme is light', async () => {
+        document.documentElement.setAttribute('data-theme', 'light');
+        document.body.innerHTML = '<link id="hljs-theme" href="about:blank" />';
+        await import('./hljs-theme-init.js');
+        const link = document.getElementById('hljs-theme');
+        expect(link.href).toContain('github.min.css');
+        expect(link.integrity).toBe(
+            'sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==',
+        );
+    });
+
+    it('no-ops when hljs-theme link is missing', async () => {
+        document.documentElement.setAttribute('data-theme', 'light');
+        await import('./hljs-theme-init.js');
+        expect(document.getElementById('hljs-theme')).toBeNull();
+    });
+});

static/js/theme-init.test.js

@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('theme-init.js', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        localStorage.clear();
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    it('defaults to dark when localStorage has no theme', async () => {
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+
+    it('applies saved light theme before paint', async () => {
+        localStorage.setItem('theme', 'light');
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    });
+
+    it('ignores invalid stored theme values', async () => {
+        localStorage.setItem('theme', 'sepia');
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+});