81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
||
import { render, screen } from '@testing-library/react';
|
||
import React from 'react';
|
||
|
||
import { BudgetChip } from '../../src/components/WorkCard';
|
||
|
||
/**
|
||
* 往返预算徽标。
|
||
*
|
||
* 它是「这个任务还剩几个来回」的唯一视觉提示，两件事必须对：
|
||
* - 显示的是**剩余**而不是已用（人做决定看的是「还能问几次」）
|
||
* - 0 = 不限时**不显示**，而不是显示「0/0」
|
||
*/
|
||
describe('BudgetChip 预算渲染', () => {
|
||
it('显示剩余数而不是已用数', () => {
|
||
render(React.createElement(BudgetChip, { max: 20, used: 3 }));
|
||
|
||
// 20 个上限、用了 3 个 → 剩 17。显示 3/20 会让人以为快用完了
|
||
expect(screen.getByText('17/20')).toBeInTheDocument();
|
||
});
|
||
|
||
it('max 为 0（不限）时完全不渲染', () => {
|
||
const { container } = render(React.createElement(BudgetChip, { max: 0, used: 0 }));
|
||
|
||
// 「0/0」或「不限」对每张卡片都成立，等于纯噪声
|
||
expect(container.firstChild).toBeNull();
|
||
});
|
||
|
||
it('max 为负数时也不渲染（脏数据兜底）', () => {
|
||
const { container } = render(React.createElement(BudgetChip, { max: -1, used: 0 }));
|
||
expect(container.firstChild).toBeNull();
|
||
});
|
||
|
||
it('用超时剩余按 0 显示，不出现负数', () => {
|
||
render(React.createElement(BudgetChip, { max: 5, used: 8 }));
|
||
|
||
// 「-3/5」看起来像 bug，而实际情形（免配额转发不计数、人手动下调过上限）是合法的
|
||
expect(screen.getByText('0/5')).toBeInTheDocument();
|
||
});
|
||
|
||
it('剩余为 0 时转红并标注「已用尽」', () => {
|
||
render(React.createElement(BudgetChip, { max: 5, used: 5 }));
|
||
|
||
const chip = screen.getByText('0/5').closest('span')!;
|
||
expect(chip.className).toContain('bg-red-100');
|
||
expect(chip.getAttribute('title')).toContain('已用尽');
|
||
});
|
||
|
||
it('剩余 1 个时转橙 —— 那是需要人介入的时刻', () => {
|
||
render(React.createElement(BudgetChip, { max: 20, used: 19 }));
|
||
|
||
const chip = screen.getByText('1/20').closest('span')!;
|
||
// 要么加预算，要么让它收尾；这一步不提示的话下一封信就被挡住了
|
||
expect(chip.className).toContain('bg-orange-100');
|
||
});
|
||
|
||
it('余量充足时用中性灰，不抢注意力', () => {
|
||
render(React.createElement(BudgetChip, { max: 20, used: 2 }));
|
||
|
||
const chip = screen.getByText('18/20').closest('span')!;
|
||
expect(chip.className).toContain('bg-gray-100');
|
||
expect(chip.className).not.toContain('red');
|
||
expect(chip.className).not.toContain('orange');
|
||
});
|
||
|
||
it('title 里带已用/上限，供悬停查看细节', () => {
|
||
render(React.createElement(BudgetChip, { max: 20, used: 7 }));
|
||
|
||
const chip = screen.getByText('13/20').closest('span')!;
|
||
// 徽标上只有剩余，具体用了几个放在 title 里 —— 徽标要窄
|
||
expect(chip.getAttribute('title')).toContain('已用 7/20');
|
||
});
|
||
|
||
it('剩余 2 个时还不转橙（阈值是 <= 1）', () => {
|
||
render(React.createElement(BudgetChip, { max: 10, used: 8 }));
|
||
|
||
const chip = screen.getByText('2/10').closest('span')!;
|
||
expect(chip.className).toContain('bg-gray-100');
|
||
});
|
||
});
|