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-。 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 默认红绿黄') })