68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
import { describe, it, expect, beforeEach } from 'vitest';
|
|
import { setActiveTheme, initThemeOnBoot, customThemeOption, getActiveTheme } from '../theme';
|
|
|
|
const lightCss = `:root[data-theme="papier"] { --bg-app: #fafafa; --accent-primary: #15803d; --radius-card: 8px; }`;
|
|
|
|
describe('custom themes', () => {
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
document.getElementById('mindsift-custom-theme')?.remove();
|
|
});
|
|
|
|
it('injects the CSS live and uses its data-theme', () => {
|
|
setActiveTheme('custom:thm_1', lightCss);
|
|
const style = document.getElementById('mindsift-custom-theme');
|
|
expect(style?.textContent).toBe(lightCss);
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('papier');
|
|
// light background -> no Tailwind dark class
|
|
expect(document.documentElement.classList.contains('dark')).toBe(false);
|
|
});
|
|
|
|
it('ignores data-theme mentioned in comments (like in the template)', () => {
|
|
setActiveTheme('custom:thm_2', `/* benenne [data-theme="mein-theme"] um */\n:root[data-theme="wald"] { --bg-app: #0b1a10; }`);
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('wald');
|
|
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
|
});
|
|
|
|
it('restores the active custom theme on boot from the cache', () => {
|
|
setActiveTheme('custom:thm_1', lightCss);
|
|
document.getElementById('mindsift-custom-theme')?.remove();
|
|
expect(initThemeOnBoot()).toBe('custom:thm_1');
|
|
expect(document.getElementById('mindsift-custom-theme')?.textContent).toBe(lightCss);
|
|
});
|
|
|
|
it('removes the custom CSS when switching back to a built-in theme', () => {
|
|
setActiveTheme('custom:thm_1', lightCss);
|
|
setActiveTheme('dark');
|
|
expect(document.getElementById('mindsift-custom-theme')).toBeNull();
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
|
|
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
|
expect(getActiveTheme()).toBe('dark');
|
|
});
|
|
|
|
it('falls back to dark when a custom theme has no CSS', () => {
|
|
setActiveTheme('custom:gone');
|
|
expect(getActiveTheme()).toBe('dark');
|
|
});
|
|
|
|
it('builds gallery previews from the CSS variables', () => {
|
|
const opt = customThemeOption({ id: 'thm_1', name: 'Papier', css: lightCss, createdAt: '', updatedAt: '' });
|
|
expect(opt.id).toBe('custom:thm_1');
|
|
expect(opt.previewBg).toBe('#fafafa');
|
|
expect(opt.previewAccent).toBe('#15803d');
|
|
expect(opt.isRounded).toBe(true);
|
|
});
|
|
|
|
it('supports polarized and suri built-in dark themes', () => {
|
|
setActiveTheme('polarized');
|
|
expect(getActiveTheme()).toBe('polarized');
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('polarized');
|
|
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
|
|
|
setActiveTheme('suri');
|
|
expect(getActiveTheme()).toBe('suri');
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('suri');
|
|
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
|
});
|
|
});
|