40 lines
2.2 KiB
JavaScript
40 lines
2.2 KiB
JavaScript
import { readFileSync } from 'node:fs'
|
|
import { test } from 'node:test'
|
|
import assert from 'node:assert/strict'
|
|
|
|
const studioCss = readFileSync(new URL('../app/assets/studio.css', import.meta.url), 'utf8')
|
|
const indexPage = readFileSync(new URL('../app/pages/index.vue', import.meta.url), 'utf8')
|
|
const defaultLayout = readFileSync(new URL('../app/layouts/default.vue', import.meta.url), 'utf8')
|
|
const baseSelect = readFileSync(new URL('../app/components/BaseSelect.vue', import.meta.url), 'utf8')
|
|
const dramaDetail = readFileSync(new URL('../app/pages/drama/[id]/index.vue', import.meta.url), 'utf8')
|
|
const episodeWorkbench = readFileSync(new URL('../app/pages/drama/[id]/episode/[episodeNumber].vue', import.meta.url), 'utf8')
|
|
|
|
test('global button system exposes complete button tokens and states', () => {
|
|
assert.match(studioCss, /--button-height:\s*36px/)
|
|
assert.match(studioCss, /--button-height-sm:\s*30px/)
|
|
assert.match(studioCss, /--button-height-icon:\s*36px/)
|
|
assert.match(studioCss, /--button-border:\s*transparent/)
|
|
assert.match(studioCss, /--button-focus:\s*rgba\(0,113,227,0\.18\)/)
|
|
assert.match(studioCss, /--radius-pill:\s*980px/)
|
|
assert.match(studioCss, /\.btn\s*\{[\s\S]*?border-radius:\s*var\(--button-radius\)/)
|
|
assert.match(studioCss, /\.btn:focus-visible\s*\{/)
|
|
assert.match(studioCss, /\.btn-danger\s*\{/)
|
|
assert.match(studioCss, /\.btn-danger:hover\s*\{/)
|
|
})
|
|
|
|
test('button-like controls share focus-visible and active hooks', () => {
|
|
assert.match(indexPage, /\.filter-chip:focus-visible\s*\{/)
|
|
assert.match(indexPage, /\.menu-item:focus-visible\s*\{/)
|
|
assert.match(defaultLayout, /\.nav-link:focus-visible\s*\{/)
|
|
assert.match(defaultLayout, /\.brand:focus-visible\s*\{/)
|
|
assert.match(baseSelect, /\.base-select-trigger:focus-visible\s*\{/)
|
|
assert.match(baseSelect, /\.base-select-option:focus-visible\s*\{/)
|
|
})
|
|
|
|
test('custom return buttons use the unified quiet circular surface', () => {
|
|
assert.match(dramaDetail, /\.back-btn\s*\{[\s\S]*?background:\s*rgba\(0,0,0,0\.05\)/)
|
|
assert.match(dramaDetail, /\.back-btn:focus-visible\s*\{/)
|
|
assert.match(episodeWorkbench, /\.back-btn\s*\{[\s\S]*?background:\s*rgba\(0,0,0,0\.05\)/)
|
|
assert.match(episodeWorkbench, /\.back-btn:focus-visible\s*\{/)
|
|
})
|