35 lines
1.7 KiB
TypeScript
35 lines
1.7 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { exportFrame } from '@/lib/wysiwyg/export'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function baseFrame(bg = '#111111'): Frame {
|
|
return {
|
|
id: 'f', width: 320, height: 200, background: bg,
|
|
layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
|
|
}
|
|
}
|
|
|
|
describe('wysiwyg export - CSS regression (tokens + rules presence)', () => {
|
|
it('contains core tokens and rules across themes and states', () => {
|
|
const out = exportFrame(baseFrame('#222222'))
|
|
const css = out.css
|
|
// root and theme tokens
|
|
expect(css).toMatch(/:root\s*{[^}]*--bg:/)
|
|
expect(css).toMatch(/\[data-theme="light"\]\s*{[^}]*--bg:/)
|
|
expect(css).toMatch(/\[data-theme="dark"\]\s*{[^}]*--bg:/)
|
|
// base usage
|
|
expect(css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
|
|
expect(css).toMatch(/a\s*{[^}]*color:var\(--primary\)/)
|
|
// controls base
|
|
expect(css).toMatch(/input,select,textarea\s*{[^}]*color:var\(--text\)/)
|
|
expect(css).toMatch(/input,select,textarea\s*{[^}]*border:1px solid var\(--border\)/)
|
|
// states
|
|
expect(css).toMatch(/input:focus,select:focus,textarea:focus\s*{[^}]*outline:2px solid var\(--primary\)/)
|
|
expect(css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
|
|
expect(css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
|
|
expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\s*{[^}]*border-color:var\(--danger\)/)
|
|
expect(css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
|
|
expect(css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
|
|
})
|
|
})
|