kdletters
9141540c37
将充值结果弹窗和支付确认遮罩的图标槽迁移到共享 PlatformIconBadge 为 PlatformIconBadge 补充稳定类名并更新相关测试 同步更新 PlatformUiKit 收口文档与团队决策记录
127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import { Play } from 'lucide-react';
|
|
import { expect, test } from 'vitest';
|
|
|
|
import { PlatformIconBadge } from './PlatformIconBadge';
|
|
|
|
test('renders neutral circular icon badge by default', () => {
|
|
render(<PlatformIconBadge icon={<Play className="h-4 w-4" />} />);
|
|
|
|
const badge = document.querySelector('[aria-hidden="true"]');
|
|
|
|
expect(badge?.className).toContain('platform-icon-badge');
|
|
expect(badge?.className).toContain('h-9');
|
|
expect(badge?.className).toContain('rounded-full');
|
|
expect(badge?.className).toContain('bg-[var(--platform-neutral-bg)]');
|
|
});
|
|
|
|
test('supports rounded medium icon badge with label', () => {
|
|
render(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-4 w-4" />}
|
|
label="继续"
|
|
size="md"
|
|
shape="rounded"
|
|
className="custom-badge"
|
|
/>,
|
|
);
|
|
|
|
const badge = screen.getByLabelText('继续');
|
|
|
|
expect(badge.className).toContain('h-11');
|
|
expect(badge.className).toContain('rounded-[0.85rem]');
|
|
expect(badge.className).toContain('custom-badge');
|
|
});
|
|
|
|
test('supports extra small soft icon badge', () => {
|
|
render(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-3.5 w-3.5" />}
|
|
size="xs"
|
|
tone="soft"
|
|
/>,
|
|
);
|
|
|
|
const badge = document.querySelector('[aria-hidden="true"]');
|
|
|
|
expect(badge?.className).toContain('h-7');
|
|
expect(badge?.className).toContain('bg-white/82');
|
|
expect(badge?.className).toContain('shadow-sm');
|
|
});
|
|
|
|
test('supports larger creative icon badge tones', () => {
|
|
const { rerender } = render(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-4 w-4" />}
|
|
size="base"
|
|
tone="softBright"
|
|
/>,
|
|
);
|
|
|
|
let badge = document.querySelector('[aria-hidden="true"]');
|
|
expect(badge?.className).toContain('h-10');
|
|
expect(badge?.className).toContain('bg-white/84');
|
|
|
|
rerender(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-5 w-5" />}
|
|
size="lg"
|
|
tone="hero"
|
|
/>,
|
|
);
|
|
badge = document.querySelector('[aria-hidden="true"]');
|
|
expect(badge?.className).toContain('h-12');
|
|
expect(badge?.className).toContain('bg-white/18');
|
|
|
|
rerender(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-3.5 w-3.5" />}
|
|
size="xs"
|
|
tone="heroMuted"
|
|
/>,
|
|
);
|
|
badge = document.querySelector('[aria-hidden="true"]');
|
|
expect(badge?.className).toContain('h-7');
|
|
expect(badge?.className).toContain('text-white/72');
|
|
|
|
rerender(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-6 w-6" />}
|
|
size="xl"
|
|
tone="success"
|
|
/>,
|
|
);
|
|
badge = document.querySelector('[aria-hidden="true"]');
|
|
expect(badge?.className).toContain('h-14');
|
|
expect(badge?.className).toContain('bg-[var(--platform-success-bg)]');
|
|
|
|
rerender(
|
|
<PlatformIconBadge icon={<Play className="h-4 w-4" />} tone="danger" />,
|
|
);
|
|
badge = document.querySelector('[aria-hidden="true"]');
|
|
expect(badge?.className).toContain('bg-[var(--platform-button-danger-fill)]');
|
|
expect(badge?.className).toContain(
|
|
'text-[var(--platform-button-danger-text)]',
|
|
);
|
|
});
|
|
|
|
test('supports extra large dark amber icon badge', () => {
|
|
render(
|
|
<PlatformIconBadge
|
|
icon={<Play className="h-8 w-8" />}
|
|
size="xxl"
|
|
shape="xl"
|
|
tone="darkAmber"
|
|
/>,
|
|
);
|
|
|
|
const badge = document.querySelector('[aria-hidden="true"]');
|
|
|
|
expect(badge?.className).toContain('h-20');
|
|
expect(badge?.className).toContain('rounded-2xl');
|
|
expect(badge?.className).toContain('border-amber-400/30');
|
|
expect(badge?.className).toContain('bg-amber-500/15');
|
|
});
|