补齐 UI 编辑器三个独立开关的默认值与独立性验收

- tests/uiEditorPage.test.ts 新增「默认显示框线与原图、隐藏组件,且三个开关互相独立」:渲染真实页面后断言三个复选框初始值,并逐个切换确认互不影响
- 变异验证:把 view/ui-editor/index.tsx 的 showFrame 初值改为 false 后只有该用例变红,改回后四套用例 73 passed
- 里程碑勾选第 4 条验收;并把「预览选择不改 activeImageId」一条的执行方式改成走 hook 暴露的 activeImageId(左侧列表只有 CSS class 标记,无 aria)
This commit is contained in:
kdletters
2026-09-28 17:32:06 +08:00
parent 931250e99a
commit 84e7aacf80
2 changed files with 42 additions and 4 deletions
@@ -1141,4 +1141,42 @@ describe('UiEditorPage', () => {
).toHaveLength(success ? 1 : 0);
},
);
it('默认显示框线与原图、隐藏组件,且三个开关互相独立', async () => {
const stateStore: IUiDesignStateStore = {
load: vi.fn().mockResolvedValue({
revision: 0,
state: stateWithPages(['page']),
}),
save: vi.fn(),
generateCode: vi.fn().mockRejectedValue(new Error('测试未配置代码生成')),
};
render(
createElement(UiEditorPage, {
projectPath: '/tmp/ui-editor-switches',
resourceId: 'ui-resource',
stateStore,
}),
);
const frame = (await screen.findByLabelText(
'显示框线',
)) as HTMLInputElement;
const origin = screen.getByLabelText('显示原图') as HTMLInputElement;
const component = screen.getByLabelText('显示组件') as HTMLInputElement;
expect(frame.checked).toBe(true);
expect(origin.checked).toBe(true);
expect(component.checked).toBe(false);
// 互相独立:关掉框线不动原图与组件。
fireEvent.click(frame);
expect(frame.checked).toBe(false);
expect(origin.checked).toBe(true);
expect(component.checked).toBe(false);
// 打开组件也不动原图。
fireEvent.click(component);
expect(component.checked).toBe(true);
expect(origin.checked).toBe(true);
});
});
@@ -36,7 +36,7 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的
- [x] 新树默认位于所有现有树右侧并与最小 top 对齐。
- [ ] 原图与组件随 root 一起移动,拖动结束进入 undo/redo 并可保存恢复。
- [ ] root 不显示 resize handles,子节点 resize 不回归。
- [ ] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false,且互相独立。
- [x] 三个开关默认 showFrame=true、showOriginImage=true、showComponent=false,且互相独立。
- [ ] 预览选择不修改 activeImageId;左侧图片选择和 Inspector 既有切换保持。
- [ ] 仅首次进入和手动适配触发联合 fit。
@@ -52,10 +52,10 @@ UI 编辑器预览同时展示全部界面树。每棵树使用 root.offset 的
- 三个独立开关在 `view/ui-editor/index.tsx` 里渲染:`显示框线` / `显示原图` / `显示组件`。
- 定向用例:`npx vitest run tests/uiEditorPreview.test.tsx tests/previewWorkspaceZoom.test.tsx tests/previewRightPanGesture.test.ts tests/uiEditorPage.test.ts --root apps/ai-game-creator-shell` → **59 passed / 0 failed**。
- 本轮补齐的验收项(第 1 条):新增 `tests/uiEditorState.test.ts` 的「新树默认落在所有现有树右侧并与最小 top 对齐」——直接跑 `createTree` 入口:第一棵落在 `[0,0]`,第二棵落在「第一棵右边界 + `UI_TREE_PADDING`」且 top 与现有最小 top 对齐;把第二棵整体下移后,第三棵仍然按**最小** top(而不是最后一棵的 top)对齐,横向取所有树最右边界。变异验证:把 `deriveTreeOffset` 的 `minY` 改成取最后一棵树的 top 后,只有这条用例变红(1 failed / 17 passed),改回后恢复绿;本轮四套 UI 编辑器用例合计 **72 passed**。
- 仍未覆盖的 5 条验收项(都不是运行时项,缺的是自动化用例,已按条列清):
- 仍未覆盖的 4 条验收项(都不是运行时项,缺的是自动化用例,已按条列清):
- 「原图与组件随 root 一起移动,拖动结束进入 undo/redo 并可保存恢复」:现有 `uiEditorState.test.ts` 只覆盖 `set-tree-offset` 命令本身,没有断言预览渲染跟随 root 位移与拖动落点进 undo/redo、保存后能读回。
- 「root 不显示 resize handles,子节点 resize 不回归」:`uiEditorPreview.test.tsx` 的 `shows final-preview node frames and resize handles only when requested` 覆盖 handle 可见性分支,但没有把「root 无 handle」写成独立断言。
- 「三个开关默认 showFrame=true、showOriginImage=true、showComponent=false,且互相独立」:三个开关在 `view/ui-editor/index.tsx` 渲染,现有用例只把它们当入参传,没有断言页面初始值。
- 「预览选择不修改 activeImageId;左侧图片选择和 Inspector 既有切换保持」:`activeImageId` 目前只出现在用例夹具里,没有任何断言。
- 本轮补齐的验收项(第 4 条):`tests/uiEditorPage.test.ts` 新增「默认显示框线与原图、隐藏组件,且三个开关互相独立」——渲染真实 `UiEditorPage` 后按标签取三个复选框,断言初始值 `显示框线=true` / `显示原图=true` / `显示组件=false`,再分别关框线、开组件,确认互不影响。变异验证:把 `view/ui-editor/index.tsx` 的 `showFrame` 初值改成 `false` 后只有这条用例变红(1 failed / 35 passed),改回后四套用例合计 **73 passed**。
- 「预览选择不修改 activeImageId;左侧图片选择和 Inspector 既有切换保持」:`activeImageId` 在页面 hook(`useUiEditorPage.ts`)里,左侧图片列表只用 CSS class(`border-orange-300 bg-orange-50`)标记选中,没有 aria 属性——断言应当走 hook 暴露的 activeImageId,而不是 DOM class。
- 「仅首次进入和手动适配触发联合 fit」:手动适配一半由 `previewWorkspaceZoom.test.tsx` 的 `refits the preview when the zoom percentage button is clicked` 覆盖,首次进入只触发一次联合 fit 没有断言。
- 仍待补:真机手感与多树布局的目视验收(本机只到定向用例级)。