kdletters
e612b13b88
为 PlatformActionButton 增加 accentSoft tone 将作品详情点赞按钮迁移到 PlatformActionButton 删除作品详情点赞按钮本地 chrome CSS 补充公共按钮和作品详情点赞断言 更新 PlatformUiKit 文档和 Hermes 决策记录
112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import { expect, test } from 'vitest';
|
|
|
|
import { PlatformActionButton } from './PlatformActionButton';
|
|
|
|
test('renders platform primary action button by default', () => {
|
|
render(<PlatformActionButton>确认</PlatformActionButton>);
|
|
|
|
const button = screen.getByRole('button', { name: '确认' });
|
|
|
|
expect(button.className).toContain('platform-button');
|
|
expect(button.className).toContain('platform-button--primary');
|
|
expect(button.className).toContain('rounded-2xl');
|
|
expect(button.className).toContain('disabled:cursor-not-allowed');
|
|
});
|
|
|
|
test('supports profile primary button surface', () => {
|
|
render(
|
|
<PlatformActionButton surface="profile" fullWidth size="md">
|
|
兑换
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '兑换' });
|
|
|
|
expect(button.className).toContain('platform-primary-button');
|
|
expect(button.className).toContain('w-full');
|
|
expect(button.className).toContain('py-3');
|
|
});
|
|
|
|
test('supports secondary and pill variants', () => {
|
|
render(
|
|
<PlatformActionButton tone="secondary" shape="pill" size="xs" align="start">
|
|
重新加载
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '重新加载' });
|
|
|
|
expect(button.className).toContain('platform-button--secondary');
|
|
expect(button.className).toContain('rounded-full');
|
|
expect(button.className).toContain('text-xs');
|
|
expect(button.className).toContain('justify-start');
|
|
expect(button.className).toContain('text-left');
|
|
});
|
|
|
|
test('supports label child chrome for file upload controls', () => {
|
|
render(
|
|
<PlatformActionButton asChild="label" tone="secondary" htmlFor="upload">
|
|
上传
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const label = screen.getByText('上传');
|
|
|
|
expect(label.tagName).toBe('LABEL');
|
|
expect(label.getAttribute('for')).toBe('upload');
|
|
expect(label.className).toContain('platform-button--secondary');
|
|
});
|
|
|
|
test('supports editor dark action surface', () => {
|
|
render(
|
|
<PlatformActionButton surface="editorDark" tone="warning" size="xxs">
|
|
确认前往
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '确认前往' });
|
|
|
|
expect(button.className).toContain('platform-action-button--editor-dark');
|
|
expect(button.className).toContain('border-amber-300/30');
|
|
expect(button.className).toContain('bg-amber-500/20');
|
|
expect(button.className).toContain('text-[10px]');
|
|
});
|
|
|
|
test('supports accent action tone', () => {
|
|
render(
|
|
<PlatformActionButton surface="editorDark" tone="accent" size="lg" fullWidth>
|
|
生成
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '生成' });
|
|
|
|
expect(button.className).toContain('platform-action-button--accent');
|
|
expect(button.className).toContain('bg-amber-200');
|
|
expect(button.className).toContain('text-slate-950');
|
|
expect(button.className).toContain('h-12');
|
|
expect(button.className).toContain('w-full');
|
|
});
|
|
|
|
test('supports accent soft action tone', () => {
|
|
render(
|
|
<PlatformActionButton
|
|
tone="accentSoft"
|
|
className="[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]"
|
|
>
|
|
点赞
|
|
</PlatformActionButton>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '点赞' });
|
|
|
|
expect(button.className).toContain('platform-action-button--accent-soft');
|
|
expect(button.className).toContain('[color:var(--platform-action-accent,#c7653d)]');
|
|
expect(button.className).toContain(
|
|
'[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]',
|
|
);
|
|
});
|