lanyuanxiaoyao
9f2b906063
- 重写 styles.css：CSS 变量化可用率色阶、状态色类、工具类、安全选择器 - 组件改造：StatusDot/StatusBar/TargetDetailDrawer/GroupHeader 等改用 CSS 类和 Typography - color-threshold 移除 getLatencyColor 死代码，保留 getAvailabilityProgressColor 返回 CSS 变量 - target-table-columns 状态列和延迟列切换为 CSS 类 - 新增 css-utility-classes spec，更新 4 个 main specs（probe/card/table/drawer） - README 和 config.yaml 写入前端样式开发规范
70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import { describe, test, expect } from "bun:test";
|
|
import { getAvailabilityProgressColor } from "../../../src/web/constants/color-threshold";
|
|
|
|
describe("color-threshold", () => {
|
|
describe("getAvailabilityProgressColor", () => {
|
|
test("0-10% 返回第一档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(0)).toBe("var(--avail-0)");
|
|
expect(getAvailabilityProgressColor(5)).toBe("var(--avail-0)");
|
|
expect(getAvailabilityProgressColor(9.99)).toBe("var(--avail-0)");
|
|
});
|
|
|
|
test("10-20% 返回第二档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(10)).toBe("var(--avail-1)");
|
|
expect(getAvailabilityProgressColor(15)).toBe("var(--avail-1)");
|
|
expect(getAvailabilityProgressColor(19.99)).toBe("var(--avail-1)");
|
|
});
|
|
|
|
test("20-30% 返回第三档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(20)).toBe("var(--avail-2)");
|
|
expect(getAvailabilityProgressColor(25)).toBe("var(--avail-2)");
|
|
});
|
|
|
|
test("30-40% 返回第四档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(30)).toBe("var(--avail-3)");
|
|
expect(getAvailabilityProgressColor(35)).toBe("var(--avail-3)");
|
|
});
|
|
|
|
test("40-50% 返回第五档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(40)).toBe("var(--avail-4)");
|
|
expect(getAvailabilityProgressColor(45)).toBe("var(--avail-4)");
|
|
});
|
|
|
|
test("50-60% 返回第六档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(50)).toBe("var(--avail-5)");
|
|
expect(getAvailabilityProgressColor(55)).toBe("var(--avail-5)");
|
|
});
|
|
|
|
test("60-70% 返回第七档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(60)).toBe("var(--avail-6)");
|
|
expect(getAvailabilityProgressColor(65)).toBe("var(--avail-6)");
|
|
});
|
|
|
|
test("70-80% 返回第八档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(70)).toBe("var(--avail-7)");
|
|
expect(getAvailabilityProgressColor(75)).toBe("var(--avail-7)");
|
|
});
|
|
|
|
test("80-90% 返回第九档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(80)).toBe("var(--avail-8)");
|
|
expect(getAvailabilityProgressColor(85)).toBe("var(--avail-8)");
|
|
});
|
|
|
|
test("90-100% 返回第十档 CSS 变量", () => {
|
|
expect(getAvailabilityProgressColor(90)).toBe("var(--avail-9)");
|
|
expect(getAvailabilityProgressColor(95)).toBe("var(--avail-9)");
|
|
expect(getAvailabilityProgressColor(99.9)).toBe("var(--avail-9)");
|
|
expect(getAvailabilityProgressColor(100)).toBe("var(--avail-9)");
|
|
});
|
|
|
|
test("边界值", () => {
|
|
expect(getAvailabilityProgressColor(9.999)).toBe("var(--avail-0)");
|
|
expect(getAvailabilityProgressColor(10)).toBe("var(--avail-1)");
|
|
expect(getAvailabilityProgressColor(19.999)).toBe("var(--avail-1)");
|
|
expect(getAvailabilityProgressColor(20)).toBe("var(--avail-2)");
|
|
expect(getAvailabilityProgressColor(89.999)).toBe("var(--avail-8)");
|
|
expect(getAvailabilityProgressColor(90)).toBe("var(--avail-9)");
|
|
});
|
|
});
|
|
});
|