修复素材选择检查器

选择独立素材时清除当前节点选择,确保检查器切换到素材面板。

补充节点选择后切换素材检查器的回归测试。
This commit is contained in:
2026-08-17 14:26:57 +08:00
parent b2e5948e8f
commit 6f69a0cfe2
2 changed files with 89 additions and 9 deletions
@@ -441,6 +441,7 @@ export function useUiEditorPage(
}
function selectSprite(id: SpriteAssetId) {
setSelectedNodeId(null);
setSelectedSpriteId(id);
}
@@ -1,31 +1,85 @@
// @vitest-environment jsdom
import { fireEvent, render, screen } from '@testing-library/react';
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),
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('navigation', { name: 'UI 编辑工具' }),
).toBeTruthy();
expect(screen.getByRole('button', { name: '导入界面图' })).toBeTruthy();
expect(screen.getByRole('button', { name: '导入独立素材' })).toBeTruthy();
expect(screen.getByText('从界面图开始')).toBeTruthy();
@@ -50,4 +104,29 @@ describe('UiEditorPage', () => {
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();
});
});