Files
Genarrative/apps/ai-game-creator-shell/tests/collapsibleSidebarPanel.test.tsx
k88936 0797410eef
Project CI / Repository checks (push) Successful in 3m18s
Project CI / Frontend tests (push) Successful in 3m32s
Project CI / Backend tests (push) Successful in 4m24s
Project CI / Native shell tests (push) Successful in 15m34s
Feat/UI自动识别和布局编辑器简化版 (#170)
* 支持从项目, 本地电脑, 主站导入/引用素材.
* 页面复杂, 需要足够空间, 作为资源打开时会占满右侧
* 编辑结果作为一种新的美术资源.
* 新增素材按钮现在是空的实现, 临时在旁边加了一个新增UI设计的按钮

临时入口:
![shotmd-1787128060.jpg](/attachments/349a4fa8-7abe-4bbb-80e0-73b1717b6488)

简化:
* 组件实现了最基本的图片和文本
* 容器式布局未接入llm编辑
* 不同阶段统一维护一个状态State, 任何阶段都可以人工调整, 不设单独的步骤
* 多图的UI合并功能暂时不要求, 隐藏入口
* 因为生成工具尚未从主站迁移, 主站地图子画布未实现, 以tab栏的形式容纳素材的子画布需求搁置
* 未实现llm绑定字体功能
* 识别会替换现有UI树, 暂时不是增量的

Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/170
Co-authored-by: 王德宇 <kvtodev@outlook.com>
Co-committed-by: 王德宇 <kvtodev@outlook.com>
2026-08-20 19:07:25 +08:00

38 lines
1.3 KiB
TypeScript

// @vitest-environment jsdom
import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { CollapsibleSidebarPanel } from '../src/view/ui-editor/components/CollapsibleSidebarPanel';
describe('CollapsibleSidebarPanel', () => {
it('uses a zero flex basis when panels expand', () => {
render(
<div className="flex h-96 flex-col gap-3">
<CollapsibleSidebarPanel label="Tree" title="UI Tree" grow={2}>
<div>tree content</div>
</CollapsibleSidebarPanel>
<CollapsibleSidebarPanel label="Input" title="界面图">
<div>input content</div>
</CollapsibleSidebarPanel>
</div>,
);
const treePanel = screen
.getByRole('heading', { name: 'UI Tree' })
.closest('section');
const inputPanel = screen
.getByRole('heading', { name: '界面图' })
.closest('section');
expect(treePanel?.style.flex).toBe('2 1 0px');
expect(inputPanel?.style.flex).toBe('1 1 0px');
fireEvent.click(screen.getByRole('button', { name: /UI Tree/ }));
expect(treePanel?.style.flex).toBe('0 0 auto');
fireEvent.click(screen.getByRole('button', { name: /UI Tree/ }));
expect(treePanel?.style.flex).toBe('2 1 0px');
});
});