kdletters
fface53745
新增 PlatformFieldLabel inlineForm 变体承接行内表单标题 模板确认弹层“关卡数”标题改为复用 PlatformFieldLabel 补充组件测试、收口计划文档和 Hermes 决策记录
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import { expect, test } from 'vitest';
|
|
|
|
import { PlatformFieldLabel } from './PlatformFieldLabel';
|
|
|
|
test('renders compact field label by default', () => {
|
|
render(<PlatformFieldLabel>作品名称</PlatformFieldLabel>);
|
|
|
|
const label = screen.getByText('作品名称');
|
|
|
|
expect(label.className).toContain('text-xs');
|
|
expect(label.className).toContain('text-[var(--platform-text-soft)]');
|
|
});
|
|
|
|
test('renders section label with tracking', () => {
|
|
render(<PlatformFieldLabel variant="section">作品信息</PlatformFieldLabel>);
|
|
|
|
const label = screen.getByText('作品信息');
|
|
|
|
expect(label.className).toContain('tracking-[0.18em]');
|
|
expect(label.className).toContain('font-bold');
|
|
});
|
|
|
|
test('renders form label and keeps local classes', () => {
|
|
render(
|
|
<PlatformFieldLabel variant="form" className="mt-1">
|
|
一句话创作
|
|
</PlatformFieldLabel>,
|
|
);
|
|
|
|
const label = screen.getByText('一句话创作');
|
|
|
|
expect(label.className).toContain('mb-2');
|
|
expect(label.className).toContain('font-black');
|
|
expect(label.className).toContain('mt-1');
|
|
});
|
|
|
|
test('renders inline form label without block spacing', () => {
|
|
render(
|
|
<PlatformFieldLabel variant="inlineForm" className="shrink-0">
|
|
关卡数
|
|
</PlatformFieldLabel>,
|
|
);
|
|
|
|
const label = screen.getByText('关卡数');
|
|
|
|
expect(label.className).toContain('inline-flex');
|
|
expect(label.className).toContain('text-sm');
|
|
expect(label.className).toContain('font-bold');
|
|
expect(label.className).toContain('shrink-0');
|
|
expect(label.className).not.toContain('mb-2');
|
|
});
|
|
|
|
test('renders pill and accent pill labels', () => {
|
|
render(
|
|
<>
|
|
<PlatformFieldLabel variant="pill">作品标题</PlatformFieldLabel>
|
|
<PlatformFieldLabel variant="accentPill">
|
|
主题/场景描述
|
|
</PlatformFieldLabel>
|
|
</>,
|
|
);
|
|
|
|
expect(screen.getByText('作品标题').className).toContain('rounded-full');
|
|
expect(screen.getByText('主题/场景描述').className).toContain('bg-rose-50');
|
|
});
|