73 lines
3.5 KiB
TypeScript
73 lines
3.5 KiB
TypeScript
import test from 'node:test'
|
||
import assert from 'node:assert/strict'
|
||
import { readSource } from './helpers.ts'
|
||
import { contrastRatio } from '../src/styles/theme.ts'
|
||
import { EP_ALIGN, elCssVarName, elCssVars } from '../src/styles/ep-overrides.ts'
|
||
|
||
// module 13 task 242：Element Plus 全局语义色/圆角对齐 admin.html 蓝白浅色皮肤，
|
||
// 避免页面仍用 Element 默认红/绿/黄与默认边框。
|
||
|
||
test('test_task_242_ep_align_normal_primary_path', () => {
|
||
// 正常主路径：语义色命中 admin.html 蓝白基线。
|
||
assert.equal(EP_ALIGN.primary, '#4f78a5')
|
||
assert.equal(EP_ALIGN.success, '#4e806d')
|
||
assert.equal(EP_ALIGN.warning, '#a8793e')
|
||
assert.equal(EP_ALIGN.danger, '#b35f6a')
|
||
assert.equal(EP_ALIGN.borderColor, '#d8e3ee')
|
||
})
|
||
|
||
test('test_task_242_ep_align_normal_variant_input', () => {
|
||
// 正常变体：CSS 变量名生成规则符合 --el-color-<name>。
|
||
assert.equal(elCssVarName('danger'), '--el-color-danger')
|
||
assert.equal(elCssVarName('success'), '--el-color-success')
|
||
assert.equal(elCssVarName('warning'), '--el-color-warning')
|
||
})
|
||
|
||
test('test_task_242_ep_align_normal_repeated_operation_is_idempotent', () => {
|
||
// 正常重复：变量映射幂等、可安全合并多次。
|
||
const a = elCssVars()
|
||
const b = elCssVars()
|
||
assert.deepEqual(a, b)
|
||
assert.ok(Object.keys(a).length >= 5, '至少覆盖主色/成功/警告/危险/边框')
|
||
})
|
||
|
||
test('test_task_242_ep_align_boundary_empty_input', () => {
|
||
// 边界：全部 hex 合法、值与 Element 默认值不同（确认不是漏改的默认色）。
|
||
for (const v of [EP_ALIGN.primary, EP_ALIGN.success, EP_ALIGN.warning, EP_ALIGN.danger, EP_ALIGN.borderColor]) {
|
||
assert.match(v, /^#[0-9a-fA-F]{6}$/)
|
||
}
|
||
assert.notEqual(EP_ALIGN.danger, '#f56c6c', 'danger 不应停留在 Element 默认红')
|
||
assert.notEqual(EP_ALIGN.success, '#67c23a', 'success 不应停留在 Element 默认绿')
|
||
assert.notEqual(EP_ALIGN.warning, '#e6a23c', 'warning 不应停留在 Element 默认黄')
|
||
})
|
||
|
||
test('test_task_242_ep_align_boundary_single_item', () => {
|
||
// 边界单元素：danger/success 在浅色内容底上满足按钮文本对比。
|
||
const bg = '#ffffff'
|
||
assert.ok(contrastRatio('#ffffff', EP_ALIGN.danger) >= 3, '白字/危险渐变按钮需 ≥3')
|
||
assert.ok(contrastRatio(EP_ALIGN.success, bg) >= 3, '成功色可读')
|
||
})
|
||
|
||
test('test_task_242_ep_align_boundary_limit_or_missing_field', () => {
|
||
// 边界上限：圆角 token 有值；映射含边框变量。
|
||
assert.ok(typeof EP_ALIGN.borderRadiusBase === 'string' && EP_ALIGN.borderRadiusBase.trim().length > 0)
|
||
assert.ok('--el-border-color' in elCssVars() || '--el-border-color-base' in elCssVars())
|
||
})
|
||
|
||
test('test_task_242_ep_align_invalid_input_rejected', () => {
|
||
// 异常：main.css 必须落盘对齐后的语义色与圆角（readSource 交叉校验）。
|
||
const css = readSource('src/styles/main.css')
|
||
for (const [name, value] of Object.entries(elCssVars())) {
|
||
assert.ok(css.includes(`${name}: ${value}`), `main.css 缺 ${name}: ${value}`)
|
||
}
|
||
assert.ok(css.includes('--el-border-radius-base: 9px'), '圆角应对齐 admin 9px')
|
||
assert.equal(/@import/.test(css), false)
|
||
})
|
||
|
||
test('test_task_242_ep_align_dependency_failure_returns_actionable_message', () => {
|
||
// 依赖失败：按钮/输入框等关键组件仍依赖 --el-* 变量（防硬编码 Element 默认色绕过主题）。
|
||
const css = readSource('src/styles/main.css')
|
||
assert.ok(css.includes('--el-color-primary'), '主色变量需存在')
|
||
assert.ok(!/#f56c6c|#67c23a|#e6a23c/.test(css), 'main.css 不得残留 Element 默认红绿黄')
|
||
})
|