hyprcrd/public/plugins/tests/theme.test.js

import { describe, it, afterEach, expect, $, $$, click, closeAll, sleep } from './runner.js';

describe('Theme', () => {
    it('CSS custom properties set', () => {
        const style = getComputedStyle(document.documentElement);
        for (const prop of ['--t-bg', '--t-accent', '--t-text', '--t-surface', '--t-border', '--t-muted', '--t-dim', '--t-bright']) {
            expect(style.getPropertyValue(prop).trim()).toBeTruthy();
        }
    });

    it('theme persisted in localStorage', () => {
        expect(localStorage.getItem('hyprcrd-theme')).toBeTruthy();
    });

    it('applyTheme function exists', () => {
        expect(typeof window.applyTheme).toBe('function');
    });

    it('themes object available', () => {
        expect(window.themes).toExist();
        expect(Object.keys(window.themes).length).toBeGreaterThan(5);
    });

    it('card layout CSS vars set', () => {
        const style = getComputedStyle(document.documentElement);
        expect(style.getPropertyValue('--card-min-h').trim()).toBeTruthy();
    });
});

describe('Keyboard Shortcuts', () => {
    it('Ctrl+Shift+Alt+T bound (test runner)', () => {
        // Just verify we got here — the test runner itself proves this works
        expect(true).toBe(true);
    });
});

describe('Theme: Design preset persistence', () => {
    const STORAGE_KEY = 'hyprcrd-design-active-preset';
    const DESIGN_KEY = 'hyprcrd-design';
    let savedActive = null;
    let savedDesign = null;

    afterEach(async () => {
        // Restore the user's actual preset selection AND committed design.
        // loadSelectedPreset() in the test fires commitDesign() which writes
        // to hyprcrd-design — without this restore, running the test would
        // permanently swap the user's design.
        if (savedActive === null) localStorage.removeItem(STORAGE_KEY);
        else localStorage.setItem(STORAGE_KEY, savedActive);
        if (savedDesign === null) localStorage.removeItem(DESIGN_KEY);
        else localStorage.setItem(DESIGN_KEY, savedDesign);
        await closeAll();
    });

    function snapshot() {
        savedActive = localStorage.getItem(STORAGE_KEY);
        savedDesign = localStorage.getItem(DESIGN_KEY);
    }

    async function openThemeTab() {
        click('#settings-btn');
        await sleep(150);
        const tab = $$('.settings-tab').find(t => t.dataset.tab === 'theme');
        if (tab) click(tab);
        await sleep(150);
    }

    it('preset select exists in theme tab', async () => {
        snapshot();
        await openThemeTab();
        expect($('#design-preset-select')).toExist();
    });

    it('changing preset writes active key to localStorage', async () => {
        snapshot();
        await openThemeTab();
        const sel = $('#design-preset-select');
        if (!sel) return;
        const opt = sel.querySelector('option[value^="builtin:"]');
        if (!opt) return;
        sel.value = opt.value;
        sel.dispatchEvent(new Event('change', { bubbles: true }));
        await sleep(100);
        expect(localStorage.getItem(STORAGE_KEY)).toBe(opt.value);
    });

    it('reopening settings restores the previously selected preset', async () => {
        snapshot();
        // Pre-seed an active preset before settings is ever opened in this test
        await openThemeTab();
        const sel = $('#design-preset-select');
        if (!sel) return;
        const opts = [...sel.querySelectorAll('option[value^="builtin:"]')];
        if (opts.length < 2) return;
        const target = opts[1].value;
        localStorage.setItem(STORAGE_KEY, target);

        // Close + reopen settings to trigger initDesignSettings → refreshPresetSelect
        click('#settings-close');
        await sleep(150);
        await openThemeTab();

        const sel2 = $('#design-preset-select');
        expect(sel2.value).toBe(target);
    });

    it('refreshPresetSelect ignores unknown preset keys', async () => {
        snapshot();
        localStorage.setItem(STORAGE_KEY, 'user:__definitely_not_a_real_preset__');
        await openThemeTab();
        const sel = $('#design-preset-select');
        if (!sel) return;
        // Must not throw and must not assign the bogus value to the select
        expect(sel.value).toBe(sel.value); // sanity: didn't crash above
        expect(sel.value === 'user:__definitely_not_a_real_preset__').toBe(false);
    });
});