133 lines
4.3 KiB
TypeScript
133 lines
4.3 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';
|
|
|
|
import type { State } from '../src/features/ui-editor/types/State';
|
|
|
|
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 { InspectorSidebar } from '../src/view/ui-editor/components/Inspector/InspectorSidebar';
|
|
import { useUiEditorPage } from '../src/view/ui-editor/useUiEditorPage';
|
|
|
|
const SELECTABLE_STATE: State = {
|
|
ui_design_images: {
|
|
page: {
|
|
metadata: { name: '主界面', role: 'Page', slave_to: null },
|
|
path: 'assets/page.png',
|
|
pixel_size: [100, 80],
|
|
pixels_per_unit: 1,
|
|
},
|
|
},
|
|
sprite_assets: {
|
|
button: {
|
|
asset_id: 'button',
|
|
metadata: { name: '按钮素材', asset_type: '' },
|
|
path: 'assets/button.png',
|
|
pixel_size: [32, 32],
|
|
pixels_per_unit: 1,
|
|
border: { left: 0, right: 0, top: 0, bottom: 0 },
|
|
},
|
|
},
|
|
font_assets: {},
|
|
ui_trees: [
|
|
{
|
|
src_ui_design: 'page',
|
|
root: {
|
|
id: 'page-root',
|
|
transform: {
|
|
anchor_min: [0, 0],
|
|
anchor_max: [1, 1],
|
|
offset_min: [0, 0],
|
|
offset_max: [0, 0],
|
|
},
|
|
metadata: {
|
|
name: '根节点',
|
|
description: '',
|
|
layout_status: 'Passed',
|
|
components_status: 'Pending',
|
|
allow_llm_edit_layout: true,
|
|
allow_llm_edit_component: true,
|
|
source: 'System',
|
|
},
|
|
components: [],
|
|
children: [],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
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.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('shows the asset inspector after selecting an asset from a selected node', () => {
|
|
const { result } = renderHook(() => useUiEditorPage('/tmp/ui-editor'));
|
|
|
|
act(() => {
|
|
result.current.editor.replaceState(structuredClone(SELECTABLE_STATE));
|
|
result.current.selectDesignImage('page');
|
|
result.current.selectNode('page-root');
|
|
});
|
|
|
|
const inspector = render(
|
|
createElement(InspectorSidebar, { controller: result.current }),
|
|
);
|
|
expect(screen.getByRole('heading', { name: '当前节点' })).toBeTruthy();
|
|
|
|
act(() => {
|
|
result.current.selectSprite('button');
|
|
});
|
|
inspector.rerender(
|
|
createElement(InspectorSidebar, { controller: result.current }),
|
|
);
|
|
|
|
expect(screen.getByRole('heading', { name: '当前素材' })).toBeTruthy();
|
|
expect(screen.queryByRole('heading', { name: '当前节点' })).toBeNull();
|
|
});
|
|
});
|