NextUI 测试指南

测试覆盖

C# 单元测试

项目位置: src/NextUI.Core.Tests/

测试框架: xUnit

测试覆盖:

ThemeState 测试 (ThemeStateTests.cs)

  • ✅ 颜色调色板生成 (GeneratePalette)
  • ✅ 颜色混合 (Mix)
  • ✅ 亮度调整 (AdjustBrightness)
  • ✅ 字体缩放 (FontScale) - 新增
    • 默认值测试
    • 边界值限制（最小值/最大值）
    • 事件触发
  • ✅ 布局密度 (DensityScale) - 新增
    • 默认值测试
    • 边界值限制（最小值/最大值）
    • 事件触发
    • 预设值测试
    • 与其他设置的独立性

测试数量: 45 个测试全部通过 ✅

运行命令:

dotnet test src/NextUI.Core.Tests/NextUI.Core.Tests.csproj

CSS 变量测试 (CssTokensTests.cs)

  • ✅ 主题色调色板变量存在性
  • ✅ 字体缩放变量和计算
  • ✅ 布局密度变量和计算 - 新增
    • 密度缩放变量
    • 基础间距变量
    • 应用间距变量（使用 calc）
    • 语义化间距变量
    • 控件高度部分缩放
    • 圆角变量不受密度影响

测试数量: 45 个测试全部通过 ✅

JavaScript 测试

项目位置: tests/js/

测试框架: Vitest

前置要求: Node.js >= 18.0.0

测试覆盖:

ThemeRuntime 密度功能测试 (theme-runtime.test.mjs)

  • ✅ setDensityScale() - 设置密度缩放因子
    • 有效值设置
    • 最小值限制（0.5）
    • 最大值限制（2.0）
    • 边界值处理
    • localStorage 持久化控制
  • ✅ getDensityScale() - 获取当前密度
    • 默认值返回
    • 从 localStorage 读取
    • 数值解析
  • ✅ setDensityPreset() - 设置预设密度级别
    • 所有预设值（extra-tight, compact, comfortable, spacious, extra-spacious）
    • 大小写不敏感
    • 未知预设处理
  • ✅ 与其他设置的独立性
  • ✅ 持久化测试

测试数量: 19 个测试全部通过 ✅

运行 JS 测试:

# 快速运行（推荐）
cd tests/js
./run-tests.sh

# 或手动运行
cd tests/js
source ~/.nvm/nvm.sh
nvm use 18
npm test

运行所有测试

C# 测试

# 运行所有 C# 测试
dotnet test src/NextUI.Core.Tests/NextUI.Core.Tests.csproj

# 带详细输出
dotnet test src/NextUI.Core.Tests/NextUI.Core.Tests.csproj --verbosity normal

# 生成覆盖率报告（需要安装 coverlet）
dotnet test src/NextUI.Core.Tests/NextUI.Core.Tests.csproj --collect:"XPlat Code Coverage"

JavaScript 测试

# 运行 JS 测试
cd tests/js
npm test

# 监视模式（开发时）
npm run test:watch

# 生成覆盖率报告
npm run test:coverage

测试覆盖率目标

  • C# 核心逻辑: ✅ 已达到（ThemeState 和 CSS 变量完整测试）
  • CSS 变量完整性: ✅ 100% 验证（所有变量存在且格式正确）
  • JavaScript 运行时: ✅ 已达到（密度管理功能完整测试）

当前测试状态

✅ 已完成的测试

  1. C# 单元测试 (45/45 通过)

    • ThemeState 所有功能测试
    • CSS 变量完整性验证
    • 布局密度功能测试

  2. JavaScript 测试 (19/19 通过)

    • ThemeRuntime 密度管理功能
    • localStorage 持久化
    • 边界值处理

  3. CSS 变量验证 (9/9 通过)

    • 密度缩放变量
    • 基础间距变量
    • 应用间距变量
    • 语义化间距变量
    • 控件高度缩放
    • 圆角变量验证

持续集成

建议在 CI/CD 流程中：

  1. 运行所有 C# 测试
  2. 运行所有 JS 测试
  3. 生成覆盖率报告
  4. 确保覆盖率不低于目标值

测试最佳实践

  1. 单元测试优先: 核心逻辑必须有单元测试
  2. CSS 变量验证: 所有新增 CSS 变量必须在测试中验证
  3. 跨平台一致性: C# 和 JS 实现必须通过相同的测试用例
  4. 边界值测试: 必须测试最小值、最大值、默认值
  5. 集成测试: 在 Workbench 中进行实际功能测试