wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
96 lines
4.4 KiB
TypeScript
96 lines
4.4 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
import {
|
|
DEFAULT_ACCENT_COLOR,
|
|
applyAppearanceToDocument,
|
|
normalizeAccentColor,
|
|
resolveAccentColor,
|
|
} from '../../src/state/appearance';
|
|
|
|
describe('normalizeAccentColor', () => {
|
|
it('accepts six-digit hex colors and normalizes casing', () => {
|
|
expect(normalizeAccentColor(' #4F46E5 ')).toBe('#4f46e5');
|
|
});
|
|
|
|
it('rejects invalid accent colors', () => {
|
|
expect(normalizeAccentColor('blue')).toBeNull();
|
|
expect(normalizeAccentColor('#123')).toBeNull();
|
|
expect(normalizeAccentColor('#12345g')).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('resolveAccentColor', () => {
|
|
it('falls back to the first appearance color for missing or invalid values', () => {
|
|
expect(resolveAccentColor(undefined)).toBe(DEFAULT_ACCENT_COLOR);
|
|
expect(resolveAccentColor('blue')).toBe(DEFAULT_ACCENT_COLOR);
|
|
});
|
|
});
|
|
|
|
describe('applyAppearanceToDocument', () => {
|
|
afterEach(() => {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
document.documentElement.style.removeProperty('--accent');
|
|
document.documentElement.style.removeProperty('--accent-strong');
|
|
document.documentElement.style.removeProperty('--accent-soft');
|
|
document.documentElement.style.removeProperty('--accent-tint');
|
|
document.documentElement.style.removeProperty('--accent-hover');
|
|
});
|
|
|
|
it('applies the saved theme and accent variables to the root element', () => {
|
|
applyAppearanceToDocument({ theme: 'dark', accentColor: '#4F46E5' });
|
|
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
|
|
expect(document.documentElement.style.getPropertyValue('--accent')).toBe('#4f46e5');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-hover')).toContain('#4f46e5');
|
|
});
|
|
|
|
it('does not apply appearance colors to global background variables', () => {
|
|
document.documentElement.style.setProperty('--bg', '#faf9f7');
|
|
document.documentElement.style.setProperty('--bg-app', '#faf9f7');
|
|
|
|
applyAppearanceToDocument({ theme: 'light', accentColor: '#059669' });
|
|
|
|
expect(document.documentElement.style.getPropertyValue('--bg')).toBe('#faf9f7');
|
|
expect(document.documentElement.style.getPropertyValue('--bg-app')).toBe('#faf9f7');
|
|
|
|
document.documentElement.style.removeProperty('--bg');
|
|
document.documentElement.style.removeProperty('--bg-app');
|
|
});
|
|
|
|
it('applies accent variables while clearing an explicit theme for system mode', () => {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
|
|
applyAppearanceToDocument({ theme: 'system', accentColor: '#10B981' });
|
|
|
|
expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
|
|
expect(document.documentElement.style.getPropertyValue('--accent')).toBe('#10b981');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-strong')).toContain('#10b981');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-soft')).toContain('#10b981');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-tint')).toContain('#10b981');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-hover')).toContain('#10b981');
|
|
});
|
|
|
|
it('replaces existing accent variables when the saved color changes', () => {
|
|
applyAppearanceToDocument({ theme: 'light', accentColor: '#4F46E5' });
|
|
|
|
applyAppearanceToDocument({ theme: 'light', accentColor: '#EF4444' });
|
|
|
|
expect(document.documentElement.style.getPropertyValue('--accent')).toBe('#ef4444');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-strong')).toContain('#ef4444');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-strong')).not.toContain('#4f46e5');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-soft')).toContain('#ef4444');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-tint')).toContain('#ef4444');
|
|
expect(document.documentElement.style.getPropertyValue('--accent-hover')).toContain('#ef4444');
|
|
});
|
|
|
|
it('falls back to the default accent when no valid accent is configured', () => {
|
|
document.documentElement.style.setProperty('--accent', '#4f46e5');
|
|
|
|
applyAppearanceToDocument({ theme: 'system', accentColor: 'not-a-color' });
|
|
|
|
expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
|
|
expect(document.documentElement.style.getPropertyValue('--accent')).toBe(DEFAULT_ACCENT_COLOR);
|
|
});
|
|
});
|