lanyuanxiaoyao
f48e39a615
- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer - 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询） - CSS 607行精简至73行，颜色迁移至 TDesign tokens - 可用率进度条颜色按 10% 一档红→绿渐变 - 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值） - 同步更新主 specs 并归档变更文档
96 lines
3.8 KiB
TypeScript
96 lines
3.8 KiB
TypeScript
import { describe, test, expect } from "bun:test";
|
|
import { getAvailabilityProgressColor, getLatencyColor } from "../../../src/web/constants/color-threshold";
|
|
|
|
describe("color-threshold", () => {
|
|
describe("getAvailabilityProgressColor", () => {
|
|
test("0-10% 返回第一档颜色", () => {
|
|
expect(getAvailabilityProgressColor(0)).toBe("#d54941");
|
|
expect(getAvailabilityProgressColor(5)).toBe("#d54941");
|
|
expect(getAvailabilityProgressColor(9.99)).toBe("#d54941");
|
|
});
|
|
|
|
test("10-20% 返回第二档颜色", () => {
|
|
expect(getAvailabilityProgressColor(10)).toBe("#d96241");
|
|
expect(getAvailabilityProgressColor(15)).toBe("#d96241");
|
|
expect(getAvailabilityProgressColor(19.99)).toBe("#d96241");
|
|
});
|
|
|
|
test("20-30% 返回第三档颜色", () => {
|
|
expect(getAvailabilityProgressColor(20)).toBe("#e37318");
|
|
expect(getAvailabilityProgressColor(25)).toBe("#e37318");
|
|
});
|
|
|
|
test("30-40% 返回第四档颜色", () => {
|
|
expect(getAvailabilityProgressColor(30)).toBe("#e89318");
|
|
expect(getAvailabilityProgressColor(35)).toBe("#e89318");
|
|
});
|
|
|
|
test("40-50% 返回第五档颜色", () => {
|
|
expect(getAvailabilityProgressColor(40)).toBe("#d9a818");
|
|
expect(getAvailabilityProgressColor(45)).toBe("#d9a818");
|
|
});
|
|
|
|
test("50-60% 返回第六档颜色", () => {
|
|
expect(getAvailabilityProgressColor(50)).toBe("#b8b020");
|
|
expect(getAvailabilityProgressColor(55)).toBe("#b8b020");
|
|
});
|
|
|
|
test("60-70% 返回第七档颜色", () => {
|
|
expect(getAvailabilityProgressColor(60)).toBe("#8dba30");
|
|
expect(getAvailabilityProgressColor(65)).toBe("#8dba30");
|
|
});
|
|
|
|
test("70-80% 返回第八档颜色", () => {
|
|
expect(getAvailabilityProgressColor(70)).toBe("#6dba3f");
|
|
expect(getAvailabilityProgressColor(75)).toBe("#6dba3f");
|
|
});
|
|
|
|
test("80-90% 返回第九档颜色", () => {
|
|
expect(getAvailabilityProgressColor(80)).toBe("#4dba50");
|
|
expect(getAvailabilityProgressColor(85)).toBe("#4dba50");
|
|
});
|
|
|
|
test("90-100% 返回第十档颜色", () => {
|
|
expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
|
|
expect(getAvailabilityProgressColor(95)).toBe("#3dba60");
|
|
expect(getAvailabilityProgressColor(99.9)).toBe("#3dba60");
|
|
expect(getAvailabilityProgressColor(100)).toBe("#3dba60");
|
|
});
|
|
|
|
test("边界值", () => {
|
|
expect(getAvailabilityProgressColor(9.999)).toBe("#d54941");
|
|
expect(getAvailabilityProgressColor(10)).toBe("#d96241");
|
|
expect(getAvailabilityProgressColor(19.999)).toBe("#d96241");
|
|
expect(getAvailabilityProgressColor(20)).toBe("#e37318");
|
|
expect(getAvailabilityProgressColor(89.999)).toBe("#4dba50");
|
|
expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
|
|
});
|
|
});
|
|
|
|
describe("getLatencyColor", () => {
|
|
test("<=100ms 返回 success 色", () => {
|
|
expect(getLatencyColor(0)).toBe("var(--td-success-color)");
|
|
expect(getLatencyColor(50)).toBe("var(--td-success-color)");
|
|
expect(getLatencyColor(100)).toBe("var(--td-success-color)");
|
|
});
|
|
|
|
test("100-500ms 返回 warning 色", () => {
|
|
expect(getLatencyColor(101)).toBe("var(--td-warning-color)");
|
|
expect(getLatencyColor(250)).toBe("var(--td-warning-color)");
|
|
expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
|
|
});
|
|
|
|
test(">500ms 返回 error 色", () => {
|
|
expect(getLatencyColor(501)).toBe("var(--td-error-color)");
|
|
expect(getLatencyColor(1000)).toBe("var(--td-error-color)");
|
|
});
|
|
|
|
test("边界值", () => {
|
|
expect(getLatencyColor(100)).toBe("var(--td-success-color)");
|
|
expect(getLatencyColor(100.01)).toBe("var(--td-warning-color)");
|
|
expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
|
|
expect(getLatencyColor(500.01)).toBe("var(--td-error-color)");
|
|
});
|
|
});
|
|
});
|