kdletters
028a648d9c
生成跟随框关闭按钮改为复用 PlatformIconButton 的 surfaceFloating 变体，统一浮动图标动作 chrome。 编辑器薄包装 EditorIconButton 透传 variant，避免局部再写一套关闭按钮基础样式。 补充测试与 TRACKING，删除本地关闭按钮重复 CSS。
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { Check } from 'lucide-react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import {
|
|
EditorIconButton,
|
|
SidebarMediaItem,
|
|
} from './ImageCanvasEditorPrimitives';
|
|
|
|
test('editor icon button delegates accessible icon chrome to the platform primitive', () => {
|
|
render(
|
|
<EditorIconButton
|
|
label="素材选择模式"
|
|
title="选择"
|
|
icon={Check}
|
|
className="image-canvas-editor__icon-button"
|
|
pressed
|
|
expanded
|
|
/>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '素材选择模式' });
|
|
|
|
expect(button.className).toContain('platform-icon-button');
|
|
expect(button.className).toContain('image-canvas-editor__icon-button');
|
|
expect(button.getAttribute('title')).toBe('选择');
|
|
expect(button.getAttribute('aria-pressed')).toBe('true');
|
|
expect(button.getAttribute('aria-expanded')).toBe('true');
|
|
});
|
|
|
|
test('editor icon button forwards shared icon button variants', () => {
|
|
render(
|
|
<EditorIconButton
|
|
label="关闭生成图片"
|
|
title="关闭"
|
|
icon={Check}
|
|
variant="surfaceFloating"
|
|
className="image-canvas-editor__generation-close"
|
|
/>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '关闭生成图片' });
|
|
|
|
expect(button.className).toContain('bg-white/94');
|
|
expect(button.className).toContain('image-canvas-editor__generation-close');
|
|
});
|
|
|
|
test('sidebar media item delegates thumbnail chrome to the platform media frame', () => {
|
|
const onPrimaryClick = vi.fn();
|
|
render(
|
|
<SidebarMediaItem
|
|
title="拼图素材"
|
|
detail="1024 x 1024"
|
|
imageSrc="data:image/png;base64,one"
|
|
imageAlt="素材：拼图素材"
|
|
primaryLabel="添加拼图素材"
|
|
onPrimaryClick={onPrimaryClick}
|
|
rowClassName="image-canvas-editor__asset-row"
|
|
primaryClassName="image-canvas-editor__asset-button"
|
|
thumbnailClassName="image-canvas-editor__asset-thumb"
|
|
metaClassName="image-canvas-editor__asset-meta"
|
|
/>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '添加拼图素材' });
|
|
const image = screen.getByRole('img', { name: '素材：拼图素材' });
|
|
const frame = image.closest('.platform-media-frame');
|
|
|
|
expect(frame?.className).toContain('platform-media-frame');
|
|
expect(frame?.className).toContain('image-canvas-editor__asset-thumb');
|
|
expect(screen.getByText('1024 x 1024')).toBeTruthy();
|
|
|
|
fireEvent.click(button);
|
|
|
|
expect(onPrimaryClick).toHaveBeenCalledTimes(1);
|
|
});
|