kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformDarkOptionCard } from './PlatformDarkOptionCard';
|
|
|
|
test('renders selected dark option card with tone classes', () => {
|
|
render(
|
|
<PlatformDarkOptionCard selected tone="rose" className="w-full">
|
|
玫瑰信物
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
const card = screen.getByRole('button', { name: '玫瑰信物' });
|
|
|
|
expect(card.className).toContain('platform-dark-option-card');
|
|
expect(card.className).toContain('border-rose-400/60');
|
|
expect(card.className).toContain('bg-rose-500/10');
|
|
expect(card.className).toContain('w-full');
|
|
});
|
|
|
|
test('renders idle dark option card and forwards button behavior', async () => {
|
|
const user = userEvent.setup();
|
|
const handleClick = vi.fn();
|
|
|
|
render(
|
|
<PlatformDarkOptionCard
|
|
selected={false}
|
|
radius="sm"
|
|
padding="md"
|
|
onClick={handleClick}
|
|
>
|
|
月壳
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
const card = screen.getByRole('button', { name: '月壳' });
|
|
|
|
expect(card.getAttribute('type')).toBe('button');
|
|
expect(card.className).toContain('border-white/8');
|
|
expect(card.className).toContain('hover:border-white/15');
|
|
expect(card.className).toContain('rounded-lg');
|
|
expect(card.className).toContain('py-2.5');
|
|
|
|
await user.click(card);
|
|
|
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('supports emerald, sky, and amber selected tones', () => {
|
|
const { rerender } = render(
|
|
<PlatformDarkOptionCard selected tone="emerald">
|
|
购买物品
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
expect(screen.getByRole('button', { name: '购买物品' }).className).toContain(
|
|
'border-emerald-400/45',
|
|
);
|
|
|
|
rerender(
|
|
<PlatformDarkOptionCard selected tone="sky">
|
|
出售物品
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
expect(screen.getByRole('button', { name: '出售物品' }).className).toContain(
|
|
'border-sky-400/45',
|
|
);
|
|
|
|
rerender(
|
|
<PlatformDarkOptionCard selected tone="amber">
|
|
调整同行
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
expect(screen.getByRole('button', { name: '调整同行' }).className).toContain(
|
|
'border-amber-400/60',
|
|
);
|
|
});
|
|
|
|
test('supports large radius and spacing for dark option grids', () => {
|
|
render(
|
|
<PlatformDarkOptionCard selected tone="sky" radius="lg" padding="lg">
|
|
奔跑
|
|
</PlatformDarkOptionCard>,
|
|
);
|
|
|
|
const card = screen.getByRole('button', { name: '奔跑' });
|
|
|
|
expect(card.className).toContain('rounded-2xl');
|
|
expect(card.className).toContain('py-3');
|
|
});
|