收口前端平台组件库能力
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
This commit is contained in:
78
src/components/common/PlatformInfoBlock.test.tsx
Normal file
78
src/components/common/PlatformInfoBlock.test.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { expect, test } from 'vitest';
|
||||
|
||||
import { PlatformInfoBlock } from './PlatformInfoBlock';
|
||||
|
||||
test('renders platform info block label and value chrome', () => {
|
||||
render(<PlatformInfoBlock label="来源">拼图草稿</PlatformInfoBlock>);
|
||||
|
||||
const label = screen.getByText('来源');
|
||||
const value = screen.getByText('拼图草稿');
|
||||
const block = label.closest('div')?.parentElement;
|
||||
|
||||
expect(block?.className).toContain('bg-white/72');
|
||||
expect(block?.className).toContain('rounded-[1rem]');
|
||||
expect(value.className).toContain('font-semibold');
|
||||
expect(value.className).toContain('leading-5');
|
||||
});
|
||||
|
||||
test('supports multiline value layout and class overrides', () => {
|
||||
render(
|
||||
<PlatformInfoBlock
|
||||
label="错误"
|
||||
multiline
|
||||
className="custom-block"
|
||||
labelClassName="custom-label"
|
||||
valueClassName="custom-value"
|
||||
>
|
||||
第一行{'\n'}第二行
|
||||
</PlatformInfoBlock>,
|
||||
);
|
||||
|
||||
const value = screen.getByText(/第一行/u);
|
||||
const block = value.closest('div')?.parentElement;
|
||||
|
||||
expect(block?.className).toContain('custom-block');
|
||||
expect(screen.getByText('错误').className).toContain('custom-label');
|
||||
expect(value.className).toContain('whitespace-pre-wrap');
|
||||
expect(value.className).toContain('leading-6');
|
||||
expect(value.className).toContain('custom-value');
|
||||
});
|
||||
|
||||
test('supports plain multiline value without a visible label', () => {
|
||||
render(
|
||||
<PlatformInfoBlock multiline className="rounded-[1.25rem]">
|
||||
分享正文
|
||||
</PlatformInfoBlock>,
|
||||
);
|
||||
|
||||
const value = screen.getByText('分享正文');
|
||||
const block = value.closest('div')?.parentElement;
|
||||
|
||||
expect(block?.className).toContain('bg-white/72');
|
||||
expect(block?.className).toContain('rounded-[1.25rem]');
|
||||
expect(value.className.split(/\s+/u)).not.toContain('mt-1');
|
||||
expect(value.className).toContain('whitespace-pre-wrap');
|
||||
});
|
||||
|
||||
test('supports compact row variant for dense preview metadata', () => {
|
||||
render(
|
||||
<PlatformInfoBlock label="场景" variant="compactRow">
|
||||
霓虹公园擂台
|
||||
</PlatformInfoBlock>,
|
||||
);
|
||||
|
||||
const label = screen.getByText('场景');
|
||||
const value = screen.getByText('霓虹公园擂台');
|
||||
const block = label.closest('div')?.parentElement;
|
||||
|
||||
expect(block?.className).toContain('bg-white/74');
|
||||
expect(block?.className).toContain('rounded-[0.85rem]');
|
||||
expect(block?.className).toContain('sm:px-3');
|
||||
expect(label.className).toContain('text-[var(--platform-text-muted)]');
|
||||
expect(value.className).toContain('text-right');
|
||||
expect(value.className).toContain('font-black');
|
||||
expect(value.className.split(/\s+/u)).not.toContain('mt-1');
|
||||
});
|
||||
Reference in New Issue
Block a user