106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen, within } from '@testing-library/react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
|
|
import type { CanvasLayer } from './ImageCanvasEditorTypes';
|
|
import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
|
|
|
|
function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
|
|
return {
|
|
id: 'layer-1',
|
|
resourceId: 'resource-1',
|
|
title: '生成主图',
|
|
src: 'data:image/png;base64,layer',
|
|
x: 0,
|
|
y: 0,
|
|
width: 320,
|
|
height: 240,
|
|
originalWidth: 320,
|
|
originalHeight: 240,
|
|
zIndex: 1,
|
|
sourceType: 'uploaded',
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function renderSelectedToolbar(
|
|
overrides: Partial<Parameters<typeof ImageCanvasSelectedLayerToolbarView>[0]> = {},
|
|
) {
|
|
const props: Parameters<typeof ImageCanvasSelectedLayerToolbarView>[0] = {
|
|
selectedLayer: createLayer(),
|
|
selectedToolbarStyle: { left: 12, top: 24 },
|
|
onDeleteSelectedLayer: vi.fn(),
|
|
onOpenQuickEditPanel: vi.fn(),
|
|
onOpenEditDialog: vi.fn(),
|
|
onOpenCharacterAnimationPanel: vi.fn(),
|
|
onOpenLayerMetadata: vi.fn(),
|
|
...overrides,
|
|
};
|
|
|
|
render(<ImageCanvasSelectedLayerToolbarView {...props} />);
|
|
|
|
return props;
|
|
}
|
|
|
|
describe('ImageCanvasSelectedLayerToolbarView', () => {
|
|
it('renders common layer actions and forwards callbacks', () => {
|
|
const props = renderSelectedToolbar();
|
|
const toolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
|
|
|
|
fireEvent.click(within(toolbar).getByRole('button', { name: '删除图片' }));
|
|
fireEvent.click(within(toolbar).getByRole('button', { name: '快速编辑' }));
|
|
|
|
expect(props.onDeleteSelectedLayer).toHaveBeenCalledTimes(1);
|
|
expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(props.selectedLayer);
|
|
});
|
|
|
|
it('renders generated and character actions only when applicable', () => {
|
|
const layer = createLayer({
|
|
sourceType: 'generated',
|
|
assetKind: 'character',
|
|
});
|
|
const props = renderSelectedToolbar({ selectedLayer: layer });
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
|
|
fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
|
|
fireEvent.click(
|
|
screen.getByRole('button', { name: `查看${layer.title}图片信息` }),
|
|
);
|
|
|
|
expect(props.onOpenEditDialog).toHaveBeenCalledWith(layer);
|
|
expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
|
|
expect(props.onOpenLayerMetadata).toHaveBeenCalledWith(layer);
|
|
});
|
|
|
|
it('renders nothing without a selected layer or toolbar position', () => {
|
|
const { rerender } = render(
|
|
<ImageCanvasSelectedLayerToolbarView
|
|
selectedLayer={null}
|
|
selectedToolbarStyle={{ left: 0, top: 0 }}
|
|
onDeleteSelectedLayer={vi.fn()}
|
|
onOpenQuickEditPanel={vi.fn()}
|
|
onOpenEditDialog={vi.fn()}
|
|
onOpenCharacterAnimationPanel={vi.fn()}
|
|
onOpenLayerMetadata={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByRole('toolbar', { name: '图片工具栏' })).toBeNull();
|
|
|
|
rerender(
|
|
<ImageCanvasSelectedLayerToolbarView
|
|
selectedLayer={createLayer()}
|
|
selectedToolbarStyle={null}
|
|
onDeleteSelectedLayer={vi.fn()}
|
|
onOpenQuickEditPanel={vi.fn()}
|
|
onOpenEditDialog={vi.fn()}
|
|
onOpenCharacterAnimationPanel={vi.fn()}
|
|
onOpenLayerMetadata={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByRole('toolbar', { name: '图片工具栏' })).toBeNull();
|
|
});
|
|
});
|