kdletters
d4ceb084c9
PlatformEmptyState 增加 button 形态，支持空列表 CTA 复用同一套空态 chrome。 项目页空列表新建项目卡片改为复用 PlatformEmptyState，保留项目页局部尺寸样式。 补充共享空态按钮形态和项目页空态创建测试，并更新 TRACKING。
100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformEmptyState } from './PlatformEmptyState';
|
|
|
|
test('renders compact soft platform empty state', () => {
|
|
render(<PlatformEmptyState>暂无作品</PlatformEmptyState>);
|
|
|
|
const emptyState = screen.getByText('暂无作品');
|
|
|
|
expect(emptyState.className).toContain('platform-empty-state');
|
|
expect(emptyState.className).toContain('platform-surface--soft');
|
|
expect(emptyState.className).toContain('rounded-[1.35rem]');
|
|
expect(emptyState.className).toContain('px-4');
|
|
});
|
|
|
|
test('supports dashed panel empty state for picker dialogs', () => {
|
|
render(
|
|
<PlatformEmptyState surface="dashed" size="panel" className="mt-2">
|
|
读取中...
|
|
</PlatformEmptyState>,
|
|
);
|
|
|
|
const emptyState = screen.getByText('读取中...');
|
|
|
|
expect(emptyState.className).toContain('border-dashed');
|
|
expect(emptyState.className).toContain('min-h-[14rem]');
|
|
expect(emptyState.className).toContain('mt-2');
|
|
});
|
|
|
|
test('supports inline subpanel empty state for runtime panels', () => {
|
|
render(
|
|
<PlatformEmptyState surface="subpanel" size="inline">
|
|
暂无历史
|
|
</PlatformEmptyState>,
|
|
);
|
|
|
|
const emptyState = screen.getByText('暂无历史');
|
|
|
|
expect(emptyState.className).toContain('rounded-[1rem]');
|
|
expect(emptyState.className).toContain('bg-white/74');
|
|
expect(emptyState.className).toContain('py-5');
|
|
expect(emptyState.className).toContain('text-[var(--platform-text-soft)]');
|
|
});
|
|
|
|
test('allows explicit tone override', () => {
|
|
render(
|
|
<PlatformEmptyState surface="subpanel" size="inline" tone="base">
|
|
暂无属性
|
|
</PlatformEmptyState>,
|
|
);
|
|
|
|
const emptyState = screen.getByText('暂无属性');
|
|
|
|
expect(emptyState.className).toContain('text-[var(--platform-text-base)]');
|
|
});
|
|
|
|
test('supports dark editor dashed empty state', () => {
|
|
render(
|
|
<PlatformEmptyState surface="editorDark" size="compact" tone="soft">
|
|
还没有配置角色技能。
|
|
</PlatformEmptyState>,
|
|
);
|
|
|
|
const emptyState = screen.getByText('还没有配置角色技能。');
|
|
|
|
expect(emptyState.className).toContain('border-dashed');
|
|
expect(emptyState.className).toContain('border-white/12');
|
|
expect(emptyState.className).toContain('bg-black/20');
|
|
expect(emptyState.className).toContain('text-[var(--platform-text-soft)]');
|
|
});
|
|
|
|
test('supports button empty state for empty collection actions', () => {
|
|
const onClick = vi.fn();
|
|
render(
|
|
<PlatformEmptyState
|
|
asChild="button"
|
|
surface="subpanel"
|
|
size="panel"
|
|
className="local-empty-action"
|
|
onClick={onClick}
|
|
>
|
|
新建项目
|
|
</PlatformEmptyState>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '新建项目' });
|
|
|
|
expect(button.tagName).toBe('BUTTON');
|
|
expect(button.getAttribute('type')).toBe('button');
|
|
expect(button.className).toContain('platform-empty-state');
|
|
expect(button.className).toContain('local-empty-action');
|
|
|
|
fireEvent.click(button);
|
|
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|