101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import {
|
|
act,
|
|
fireEvent,
|
|
render,
|
|
renderHook,
|
|
screen,
|
|
} from '@testing-library/react';
|
|
import { createElement, type ReactNode } from 'react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
|
|
vi.mock('../src/components/AssetImporter', () => ({
|
|
AssetImporter: ({ open }: { open: boolean }) =>
|
|
open ? createElement('div', { role: 'dialog' }, '素材导入器') : null,
|
|
}));
|
|
|
|
vi.mock('../src/components/modal/ThemedModal', () => ({
|
|
ThemedModal: ({ open, children }: { open: boolean; children: ReactNode }) =>
|
|
open ? createElement('div', { role: 'dialog' }, children) : null,
|
|
}));
|
|
|
|
import UiEditorPage from '../src/view/ui-editor';
|
|
import { useUiEditorPage } from '../src/view/ui-editor/useUiEditorPage';
|
|
|
|
describe('UiEditorPage', () => {
|
|
it('renders split input tools over a real empty State', () => {
|
|
render(createElement(UiEditorPage, { projectPath: '/tmp/ui-editor' }));
|
|
|
|
expect(
|
|
screen.getByRole('navigation', { name: 'UI 编辑工具' }),
|
|
).toBeTruthy();
|
|
expect(screen.getByRole('button', { name: '导入界面图' })).toBeTruthy();
|
|
expect(screen.getByRole('button', { name: '导入独立素材' })).toBeTruthy();
|
|
expect(screen.getByRole('button', { name: '导入字体' })).toBeTruthy();
|
|
expect(screen.getByText('从界面图开始')).toBeTruthy();
|
|
expect(screen.queryByText('Pause Dialog')).toBeNull();
|
|
});
|
|
|
|
it('switches tools freely without inventing completed workflow state', () => {
|
|
render(createElement(UiEditorPage, { projectPath: '/tmp/ui-editor' }));
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /布局验收/ }));
|
|
expect(screen.getByRole('heading', { name: '布局验收' })).toBeTruthy();
|
|
expect(screen.getByText('当前界面尚无组件树。')).toBeTruthy();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '检查前置数据' }));
|
|
expect(screen.getByText('还不能执行此操作')).toBeTruthy();
|
|
expect(screen.getByText('请先导入界面图')).toBeTruthy();
|
|
});
|
|
|
|
it('opens the design-image importer independently', () => {
|
|
render(createElement(UiEditorPage, { projectPath: '/tmp/ui-editor' }));
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '导入界面图' }));
|
|
expect(screen.getByText('素材导入器')).toBeTruthy();
|
|
});
|
|
|
|
it('switches from a selected node to the sprite inspector', () => {
|
|
const { result } = renderHook(() => useUiEditorPage('/tmp/ui-editor'));
|
|
act(() => {
|
|
result.current.editor.addDesignImages([
|
|
{
|
|
id: 'page',
|
|
image: {
|
|
metadata: {
|
|
name: 'Page',
|
|
description: '',
|
|
role: 'Page',
|
|
slave_to: null,
|
|
},
|
|
path: 'assets/page.png',
|
|
pixel_size: [320, 180],
|
|
pixels_per_unit: 1,
|
|
},
|
|
},
|
|
]);
|
|
result.current.editor.addSpriteAssets([
|
|
{
|
|
asset_id: 'panel',
|
|
metadata: { name: 'Panel', asset_type: '' },
|
|
path: 'assets/panel.png',
|
|
pixel_size: [32, 32],
|
|
pixels_per_unit: 1,
|
|
border: { left: 0, right: 0, top: 0, bottom: 0 },
|
|
},
|
|
]);
|
|
});
|
|
const rootId = result.current.editor.state.ui_trees[0]!.root.id;
|
|
act(() => {
|
|
result.current.selectDesignImage('page');
|
|
result.current.selectNode(rootId);
|
|
});
|
|
expect(result.current.selectedNodeId).toBe(rootId);
|
|
|
|
act(() => result.current.selectSprite('panel'));
|
|
expect(result.current.selectedNodeId).toBeNull();
|
|
expect(result.current.selectedSpriteId).toBe('panel');
|
|
});
|
|
});
|