test(web/m7-362): tokens-to-css generator unit test
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,43 @@
|
|||||||
|
import { describe, expect, test } from 'vitest';
|
||||||
|
import { emit } from './tokens-to-css.js';
|
||||||
|
|
||||||
|
const sample = {
|
||||||
|
colors: {
|
||||||
|
dark: { obsidian: '#000', parchment: '#FFF' },
|
||||||
|
light: { obsidian: '#FFF', parchment: '#000' },
|
||||||
|
flat: { accent: '#4A6B5C', 'on-action': '#E8E4D8' }
|
||||||
|
},
|
||||||
|
radii: { sm: '4px' },
|
||||||
|
fontStacks: {
|
||||||
|
display: "'Fraunces', serif",
|
||||||
|
body: "'Inter', sans-serif",
|
||||||
|
mono: "'JetBrains Mono', monospace"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('tokens-to-css emit()', () => {
|
||||||
|
test('emits :root block with dark and flat tokens', () => {
|
||||||
|
const css = emit(sample);
|
||||||
|
expect(css).toMatch(/:root \{[\s\S]*--fs-obsidian: #000;[\s\S]*--fs-parchment: #FFF;[\s\S]*--fs-accent: #4A6B5C;[\s\S]*--fs-on-action: #E8E4D8;[\s\S]*\}/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('emits [data-theme="light"] block with light tokens only', () => {
|
||||||
|
const css = emit(sample);
|
||||||
|
expect(css).toMatch(/\[data-theme="light"\] \{[\s\S]*--fs-obsidian: #FFF;[\s\S]*--fs-parchment: #000;[\s\S]*\}/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('flat tokens are not duplicated into the light block', () => {
|
||||||
|
const css = emit(sample);
|
||||||
|
const match = css.match(/\[data-theme="light"\] \{([\s\S]*?)\}/);
|
||||||
|
expect(match).not.toBeNull();
|
||||||
|
const lightBlock = match[1];
|
||||||
|
expect(lightBlock).not.toContain('--fs-accent');
|
||||||
|
expect(lightBlock).not.toContain('--fs-on-action');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('preserves radii and font stacks in :root', () => {
|
||||||
|
const css = emit(sample);
|
||||||
|
expect(css).toContain('--fs-radius-sm: 4px;');
|
||||||
|
expect(css).toContain("--fs-font-display: 'Fraunces', serif;");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -6,7 +6,7 @@ export default defineConfig({
|
|||||||
plugins: [sveltekit(), svelteTesting()],
|
plugins: [sveltekit(), svelteTesting()],
|
||||||
test: {
|
test: {
|
||||||
environment: 'jsdom',
|
environment: 'jsdom',
|
||||||
include: ['src/**/*.test.ts', 'src/**/*.svelte.test.ts'],
|
include: ['src/**/*.test.ts', 'src/**/*.svelte.test.ts', 'scripts/**/*.test.js'],
|
||||||
// M7 #374: these two test files explode at module-load with
|
// M7 #374: these two test files explode at module-load with
|
||||||
// `TypeError: notifiable_store is not a function` from SvelteKit's
|
// `TypeError: notifiable_store is not a function` from SvelteKit's
|
||||||
// internal client.js — the import chain triggers SvelteKit's client
|
// internal client.js — the import chain triggers SvelteKit's client
|
||||||
|
|||||||
Reference in New Issue
Block a user