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>
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { describe, expect, test, vi } from 'vitest';
|
|
|
|
import {
|
|
PlatformAsyncStatePanel,
|
|
PlatformFilterToolbar,
|
|
PlatformIconBadge,
|
|
PlatformInfoBlock,
|
|
PlatformNavigableListItem,
|
|
PlatformStatGrid,
|
|
} from './index';
|
|
|
|
describe('shared platform components', () => {
|
|
test('exposes display primitives with their visual variants', () => {
|
|
render(
|
|
<>
|
|
<PlatformInfoBlock label="来源" variant="compactRow">
|
|
拼图草稿
|
|
</PlatformInfoBlock>
|
|
<PlatformIconBadge icon="+" label="新增" size="lg" tone="success" />
|
|
<PlatformStatGrid
|
|
items={[{ label: '作品数', value: '24' }]}
|
|
columns="two"
|
|
order="labelFirst"
|
|
surface="plain"
|
|
/>
|
|
</>,
|
|
);
|
|
|
|
expect(screen.getByText('来源').className).toContain('text-xs');
|
|
expect(screen.getByLabelText('新增')).toBeTruthy();
|
|
expect(screen.getByLabelText('新增').className).toContain('h-12');
|
|
expect(screen.getByText('作品数').parentElement?.className).toContain(
|
|
'border',
|
|
);
|
|
});
|
|
|
|
test('preserves list row button semantics and callback slots', () => {
|
|
const onClick = vi.fn();
|
|
render(
|
|
<PlatformNavigableListItem
|
|
leading={<span>图标</span>}
|
|
trailing={<span>前往</span>}
|
|
onClick={onClick}
|
|
>
|
|
项目工作台
|
|
</PlatformNavigableListItem>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', {
|
|
name: /图标.*项目工作台.*前往/u,
|
|
});
|
|
expect(button.getAttribute('type')).toBe('button');
|
|
fireEvent.click(button);
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('keeps async state precedence explicit', () => {
|
|
const { rerender } = render(
|
|
<PlatformAsyncStatePanel
|
|
errorState={<span>错误</span>}
|
|
isLoading
|
|
loadingState={<span>加载中</span>}
|
|
isEmpty
|
|
emptyState={<span>空态</span>}
|
|
>
|
|
<span>内容</span>
|
|
</PlatformAsyncStatePanel>,
|
|
);
|
|
|
|
expect(screen.getByText('错误')).toBeTruthy();
|
|
rerender(
|
|
<PlatformAsyncStatePanel isLoading loadingState={<span>加载中</span>}>
|
|
<span>内容</span>
|
|
</PlatformAsyncStatePanel>,
|
|
);
|
|
expect(screen.getByText('加载中')).toBeTruthy();
|
|
});
|
|
|
|
test('forwards filter, tab and sort actions in both layout modes', () => {
|
|
const onOpenFilter = vi.fn();
|
|
const onTabChange = vi.fn();
|
|
const onToggleSort = vi.fn();
|
|
render(
|
|
<PlatformFilterToolbar
|
|
filterLabel="筛选"
|
|
filterCount={2}
|
|
tabItems={[{ id: 'all', label: '全部' }]}
|
|
activeTabId="all"
|
|
sortLabel="最新"
|
|
layout="mobile"
|
|
onOpenFilter={onOpenFilter}
|
|
onTabChange={onTabChange}
|
|
onToggleSort={onToggleSort}
|
|
/>,
|
|
);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /筛选/u }));
|
|
fireEvent.click(screen.getByRole('button', { name: /按最新排序/u }));
|
|
expect(onOpenFilter).toHaveBeenCalledTimes(1);
|
|
expect(onToggleSort).toHaveBeenCalledTimes(1);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '全部' }));
|
|
expect(onTabChange).toHaveBeenCalledWith('all');
|
|
});
|
|
});
|