62 lines
3.3 KiB
TypeScript
62 lines
3.3 KiB
TypeScript
import test from 'node:test'
|
|
import assert from 'node:assert/strict'
|
|
import { readSource } from './helpers.ts'
|
|
|
|
// module 13 task 244：全局组件观感对齐（Element 表格头/行 hover/输入焦点/弹窗圆角/分页色），
|
|
// 让 15 页无需逐页内联即可获得 admin.html 的表格与输入观感。
|
|
|
|
test('test_task_244_component_normal_primary_path', () => {
|
|
const css = readSource('src/styles/main.css')
|
|
assert.match(css, /--el-table-header-bg-color:\s*#edf4fa/, '表头底色应对齐 admin #edf4fa')
|
|
assert.match(css, /--el-table-header-text-color:\s*#4e6479/, '表头文字色应对齐 admin')
|
|
assert.match(css, /--el-table-row-hover-bg-color:\s*#f1f7fb/, '行 hover 应对齐 admin')
|
|
})
|
|
|
|
test('test_task_244_component_normal_variant_input', () => {
|
|
const css = readSource('src/styles/main.css')
|
|
assert.match(css, /th\.el-table__cell\s*\{[^}]*font-weight:\s*600/, '表头应为 600 字重')
|
|
assert.match(css, /th\.el-table__cell\s*\{[^}]*font-size:\s*12\.5px/, '表头应为 12.5px')
|
|
})
|
|
|
|
test('test_task_244_component_normal_repeated_operation_is_idempotent', () => {
|
|
const css = readSource('src/styles/main.css')
|
|
const re = /--el-table-header-bg-color:\s*#edf4fa/
|
|
assert.ok(re.test(css))
|
|
assert.ok(re.test(css))
|
|
})
|
|
|
|
test('test_task_244_component_boundary_empty_input', () => {
|
|
// 边界：输入/选择器焦点 ring 为 admin 蓝（rgba(95,133,173,.16)），非 Element 默认。
|
|
const css = readSource('src/styles/main.css')
|
|
assert.match(css, /rgba\(95,\s*133,\s*173,\s*0\.16\)/, '焦点 ring 需用 admin 蓝')
|
|
assert.match(css, /\.el-input__wrapper,?\s*\.el-textarea__inner\s*\{\s*border-radius:\s*9px/, '输入框圆角 9px')
|
|
assert.match(css, /\.el-input__wrapper\.is-focus,?\s*\.el-select__wrapper\.is-focused\s*\{[^}]*rgba\(95,\s*133,\s*173,\s*0\.16\)/, '焦点 ring 用 admin 蓝')
|
|
})
|
|
|
|
test('test_task_244_component_boundary_single_item', () => {
|
|
// 边界：斑马纹若存在则用极浅蓝，避免过重条纹。
|
|
const css = readSource('src/styles/main.css')
|
|
assert.match(css, /row--striped[^}]*background:\s*#f9fbfd/, '斑马纹底应接近 #f9fbfd')
|
|
})
|
|
|
|
test('test_task_244_component_boundary_limit_or_missing_field', () => {
|
|
// 边界上限：弹窗/消息盒圆角 14px、分页文字用正文色。
|
|
const css = readSource('src/styles/main.css')
|
|
assert.match(css, /\.el-dialog\s*\{[^}]*border-radius:\s*14px/, '弹窗圆角 14px')
|
|
assert.match(css, /\.el-message-box\s*\{[^}]*border-radius:\s*14px/, '消息盒圆角 14px')
|
|
assert.match(css, /\.el-pagination\s*\{[^}]*--el-pagination-button-color:\s*var\(--admin-text\)/)
|
|
})
|
|
|
|
test('test_task_244_component_invalid_input_rejected', () => {
|
|
// 异常：不残留旧的 Element 默认表头/圆角覆盖（6px 基础圆角已被 9px 取代）。
|
|
const css = readSource('src/styles/main.css')
|
|
assert.equal(/--el-border-radius-base:\s*6px/.test(css), false, '基础圆角应为 9px 而非 6px')
|
|
})
|
|
|
|
test('test_task_244_component_dependency_failure_returns_actionable_message', () => {
|
|
// 依赖失败：Element 组件覆盖必须走 CSS 变量/语义色，不硬编码回默认红绿。
|
|
const css = readSource('src/styles/main.css')
|
|
assert.ok(!/#f56c6c|#67c23a|#e6a23c/.test(css), '不得残留 Element 默认红绿黄')
|
|
assert.match(css, /\.el-button\s*\{[^}]*border-radius:\s*9px/, '按钮圆角 9px')
|
|
})
|