lupin-demo/tests

测试文档

本目录包含罗盘项目的所有测试用例。

测试文件结构

tests/
├── README.md                 # 本文档
├── constants.test.ts        # 常量和配置测试
├── utils.test.ts            # 工具函数单元测试
├── useLuopan.test.ts        # 组合函数业务逻辑测试
└── Luopan.test.ts           # Vue 组件测试

测试覆盖范围

1. constants.test.ts (22 个测试)

测试项目的常量配置和示例数据：

• 默认尺寸、文字位置等配置项的有效性
• 示例数据的完整性和正确性
• 角度数组和半径数组的有效性验证
• 不同类型示例的存在性检查

2. utils.test.ts (48 个测试)

测试所有工具函数的核心逻辑：

• polarToXY: 极坐标转换
• normalizeDeg: 角度归一化
• annularSectorCentroid: 扇形形心计算
• annularSectorPath: SVG 路径生成
• annularSectorInsetPath: 内缩路径生成
• calculateLabelRotation: 文字旋转角度
• generateSectorColor: 扇区颜色生成
• generateTextPath: 文字路径生成
• generateVerticalTextPath: 竖排文字路径
• getTextColorForBackground: 文字颜色适配
• calculateSectorFontSize: 字体大小计算

3. useLuopan.test.ts (32 个测试)

测试罗盘业务逻辑组合函数：

• 基本功能和返回值验证
• 扇区生成逻辑
• 文字位置模式（middle/centroid）
• 文字方向判断
• 竖排文字判断
• 内部填色逻辑
• 响应式更新
• 边界情况处理

4. Luopan.test.ts (57 个测试)

测试 Vue 组件的完整功能：

• 组件基本渲染
• 示例切换功能
• 辅助线显示/隐藏
• 文字位置模式选择
• 缩放功能（放大、缩小、重置）
• 鼠标滚轮缩放
• 鼠标拖拽平移
• 扇区渲染
• 文字渲染
• 辅助线渲染
• 说明文本
• 背景渲染
• 样式验证
• 边界情况
• 性能测试

运行测试

运行所有测试

npm test

运行单个测试文件

npm test tests/utils.test.ts

运行测试并监视文件变化

npm test -- --watch

生成测试覆盖率报告

npm test -- --coverage

测试统计

• 总测试文件: 4 个
• 总测试用例: 159 个
• 测试通过率: 100%
• 测试运行时间: ~1.8 秒

测试编写规范

1. 描述清晰: 每个测试用例的描述应该清楚说明测试的内容
2. 独立性: 测试用例之间应该相互独立，不依赖执行顺序
3. 覆盖全面: 包括正常情况、边界情况和异常情况
4. 断言准确: 使用合适的断言方法，确保测试的准确性
5. 可维护性: 测试代码应该易于理解和维护

技术栈

• 测试框架: Vitest
• Vue 测试工具: @vue/test-utils
• 测试环境: happy-dom

贡献指南

添加新功能时，请确保：

1. 为新功能编写对应的测试用例
2. 确保所有现有测试通过
3. 测试覆盖率不低于当前水平
4. 测试用例描述清晰，易于理解