kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformToggleRow } from './PlatformToggleRow';
|
|
|
|
test('renders checkbox toggle row and reports checked value', () => {
|
|
const onChange = vi.fn();
|
|
render(
|
|
<PlatformToggleRow label="自由输入" checked={false} onChange={onChange} />,
|
|
);
|
|
|
|
const checkbox = screen.getByRole('checkbox', { name: '自由输入' });
|
|
fireEvent.click(checkbox);
|
|
|
|
expect(onChange).toHaveBeenCalledWith(true);
|
|
expect(screen.getByText('自由输入').closest('label')?.className).toContain(
|
|
'bg-white/74',
|
|
);
|
|
});
|
|
|
|
test('renders disabled checkbox row', () => {
|
|
render(<PlatformToggleRow label="玩家可见" checked disabled />);
|
|
|
|
const checkbox = screen.getByRole('checkbox', { name: '玩家可见' });
|
|
|
|
expect(checkbox).toHaveProperty('disabled', true);
|
|
expect(screen.getByText('玩家可见').closest('label')?.className).toContain(
|
|
'opacity-60',
|
|
);
|
|
});
|
|
|
|
test('renders status row without checkbox', () => {
|
|
render(
|
|
<PlatformToggleRow
|
|
label="文本模式"
|
|
checked
|
|
mode="status"
|
|
surface="plain"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByRole('checkbox')).toBeNull();
|
|
expect(screen.getByText('开启').className).toContain(
|
|
'bg-[var(--platform-neutral-bg)]',
|
|
);
|
|
expect(screen.getByText('文本模式').closest('div')?.className).toContain(
|
|
'bg-white/78',
|
|
);
|
|
});
|
|
|
|
test('renders clickable status row as button', () => {
|
|
const onClick = vi.fn();
|
|
render(
|
|
<PlatformToggleRow
|
|
label="文本模式"
|
|
checked={false}
|
|
mode="status"
|
|
onClick={onClick}
|
|
/>,
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /文本模式/u }));
|
|
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
expect(screen.getByText('关闭')).toBeTruthy();
|
|
});
|
|
|
|
test('keeps icon and local classes', () => {
|
|
render(
|
|
<PlatformToggleRow
|
|
label="文本模式"
|
|
checked
|
|
icon={<span data-testid="toggle-icon" />}
|
|
className="custom-row"
|
|
labelClassName="custom-label"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByTestId('toggle-icon')).toBeTruthy();
|
|
expect(screen.getByText('文本模式').closest('label')?.className).toContain(
|
|
'custom-row',
|
|
);
|
|
expect(screen.getByText('文本模式').parentElement?.className).toContain(
|
|
'custom-label',
|
|
);
|
|
});
|