kdletters
c5200c7d45
## 变更内容 - 新增基于 shadcn open-code 模式的共享 UI canonical 组件、样式与导出。 - 新增 `/components` 共享组件展示页，并覆盖平台组件、Token、状态和移动端布局。 - 补齐平台展示页的筛选、排序、上传预览、标签、开关和异步状态交互。 - 修复排序导致预览主题变化、筛选弹窗误关闭和入口状态不更新的问题。 - 同步网站与客户端构建别名、依赖、路由测试和项目文档。 ## 验证 - `npm run test -- src/components/shared-components/SharedComponentsShowcasePage.test.tsx` - `npm run typecheck` - `npm run check:encoding` - `npm run build:raw` - `git diff --check` - pre-push 门禁通过 Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/202 Co-authored-by: kdletters <kdletters@qq.com> Co-committed-by: kdletters <kdletters@qq.com>
80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformToggleRow } from './index';
|
|
|
|
test('renders a controlled checkbox row and forwards the next value', () => {
|
|
const onChange = vi.fn();
|
|
render(
|
|
<PlatformToggleRow label="自由输入" checked={false} onChange={onChange} />,
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole('checkbox', { name: '自由输入' }));
|
|
|
|
expect(onChange).toHaveBeenCalledWith(true);
|
|
expect(screen.getByText('自由输入').closest('label')?.className).toContain(
|
|
'bg-white/74',
|
|
);
|
|
});
|
|
|
|
test('renders read-only and clickable status variants with custom labels', () => {
|
|
const onClick = vi.fn();
|
|
const { rerender } = render(
|
|
<PlatformToggleRow
|
|
label="文本模式"
|
|
checked
|
|
mode="status"
|
|
onLabel="已开启"
|
|
offLabel="未开启"
|
|
surface="plain"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByRole('checkbox')).toBeNull();
|
|
expect(screen.getByText('已开启')).toBeTruthy();
|
|
expect(screen.getByText('文本模式').closest('div')?.className).toContain(
|
|
'bg-white/78',
|
|
);
|
|
|
|
rerender(
|
|
<PlatformToggleRow
|
|
label="文本模式"
|
|
checked={false}
|
|
mode="status"
|
|
onLabel="已开启"
|
|
offLabel="未开启"
|
|
onClick={onClick}
|
|
/>,
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '文本模式 未开启' }));
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('keeps disabled state and visual slots', () => {
|
|
render(
|
|
<PlatformToggleRow
|
|
label="玩家可见"
|
|
checked
|
|
disabled
|
|
icon={<span data-testid="toggle-icon" />}
|
|
className="custom-row"
|
|
labelClassName="custom-label"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByRole('checkbox', { name: '玩家可见' })).toHaveProperty(
|
|
'disabled',
|
|
true,
|
|
);
|
|
expect(screen.getByTestId('toggle-icon')).toBeTruthy();
|
|
expect(screen.getByText('玩家可见').closest('label')?.className).toContain(
|
|
'custom-row',
|
|
);
|
|
expect(screen.getByText('玩家可见').parentElement?.className).toContain(
|
|
'custom-label',
|
|
);
|
|
});
|