Files
Genarrative/apps/ai-game-creator-shell/tests/resourceRename.test.tsx
suzmii d1581892d7 修复 PR #316 review(前端 TS/TSX):资源工作台与资源画布
- 素材重命名(跨范围契约):`rename_local_project_asset` 现在要求 `expectedProjectId` + `expectedProjectRevision`,前端按删除 / 分类保存同一套 CAS 口径补齐——先 `get_local_game_project_revision` 读当前 revision 再连同项目身份提交,不用可能过期的本地缓存值
- 失败文案统一:新增 `projectAssetCommandErrorMessage`,把 `project-identity-conflict` / `project-revision-conflict` 翻成用户可读中文,重命名 / 删除 / 分类保存三条链路共用一份映射,其余错误原样透出
- index.tsx:资源面板下载按 `resolveDownloadablePanelEntries` 过滤,版本卡这类合成 path 的条目不再进入落盘链路
- index.tsx:`characterAnimationPanel` 纳入画布浮层开关判据(抽 `resolveResourceCanvasFloatingPanelOpen`),「生成动画」面板与快速编辑 / 信息浮层共用同一条「点外部 / Esc 关闭」规则
- index.tsx:去掉 `ResourceBookScene` 上重复的 `onWheel`,滚轮只由 manager 上的原生 `passive:false` 监听处理,平移 / 缩放不再被翻倍
- index.tsx:快速编辑的源资源在层 id 命中不到时回落到已正规化的 `asset:<id>`,重试不再静默什么都不做;取不到时给出可见失败
- ResourceCanvasPanelView.tsx:下载按钮按可下载条数判可用、不再在上传中显示下载转圈;上传中禁掉 × / Esc / 遮罩三条关闭路径;预览占位文案抽 helper
- GameRunVersionPicker.tsx:portal 菜单在滚动 / 缩放后重算位置;外部点击判定沿用共享 `useImageCanvasFloatingOptionDismiss` + `menuRef` 边界(review 该条已修,保留现状并补位置用例)
- ResourceCanvasGenerationPanelView.tsx:`submitting` 改 `finally` 收回,成功路径不再永久锁住面板
- ResourceAssetDeleteDialog.tsx / ResourceRenameDialog.tsx / ResourceClassificationPanel.tsx:在飞时 `closeOnEscape` / `closeOnBackdrop` 与头部 × 一起挡住
- resourceEditModel.ts / resourceCanvasToolbarModel.ts / useProjectResourceCardPreviews.ts / projectResourceLiveUpdateModel.ts:抽 `resourceBaseName`、`canonicalProjectedResourceMediaType` 参数收窄去掉强转、删未使用参数、补「IO 失败会 reject」的签名说明
- resourceCanvasHistoryModel.ts:`resourceCanvasSnapshotsEqual` 不再比较不可恢复的 `manuallyPlaced`,消除「压进历史但撤销是空操作」
- resourceCanvasSectionMapping.ts:删掉从未接线、且注释与实现相矛盾的 `LEGACY_RESOURCE_CANVAS_SECTION_FALLBACK`
- resourceCanvasChrome.css:`.game-resource-panel-grid` 补 `flex: 1 1 auto; min-height: 0`,卡片网格成为真正的滚动区
- 用例:重命名 CAS 载荷与读序、CAS 拒绝文案、版本卡下载门禁、上传中关闭路径、浮层判据、菜单跟随滚动、分区映射
2026-09-12 20:49:03 +08:00

338 lines
11 KiB
TypeScript

// @vitest-environment jsdom
import { afterEach, describe, expect, test, vi } from 'vitest';
import type { GameCreationAppManifest } from '../../../packages/shared/src/contracts/gameCreationApp';
import {
cleanup,
createGameCreationAppManifest,
fireEvent,
ProjectDevelopmentView,
React,
render,
screen,
waitFor,
within,
} from './appSurface/harness';
const PROJECT_PATH = '/tmp/workbench-asset-rename';
/** 资源卡懒加载预览要靠 IntersectionObserver 才认成可见,这里只做最小替身。 */
function installResourceCardIntersectionObserver() {
class ResourceCardIntersectionObserver {
readonly root = null;
readonly rootMargin = '160px';
readonly thresholds = [0];
readonly observed = new Set<Element>();
constructor(readonly callback: IntersectionObserverCallback) {}
observe(element: Element) {
this.observed.add(element);
}
unobserve(element: Element) {
this.observed.delete(element);
}
disconnect() {
this.observed.clear();
}
takeRecords() {
return [];
}
}
Object.defineProperty(window, 'IntersectionObserver', {
configurable: true,
value: ResourceCardIntersectionObserver,
});
}
function installInvoke(
implementation: (command: string, args?: unknown) => Promise<unknown>,
) {
const invoke = vi.fn(implementation);
(
window as unknown as {
__TAURI__?: { core?: { invoke?: typeof invoke } };
}
).__TAURI__ = { core: { invoke } };
return invoke;
}
function createManifestWithHero(localPath: string): GameCreationAppManifest {
const manifest = createGameCreationAppManifest(
'workbench-asset-rename',
'素材重命名测试',
);
manifest.assets = [
{
id: 'asset-hero',
kind: 'character',
mediaType: 'image/png',
localPath,
source: { kind: 'generated' },
},
];
return manifest;
}
async function openHeroCard(name = 'hero.png') {
fireEvent.click(screen.getByRole('button', { name: '按类型' }));
// 左侧栏目大纲导航已按用户要求删除:切栏目走「资源总览」的栏目缩略卡片。
if (document.querySelector('[data-resource-book-view="child"]')) {
fireEvent.click(await screen.findByRole('button', { name: '收起资源' }));
await waitFor(() =>
expect(
document.querySelector('[data-resource-book-view="main"]'),
).not.toBeNull(),
);
}
fireEvent.click(
await screen.findByRole('button', { name: '打开角色与对象' }),
);
// 资源画本先切到子画布再渲染卡片,等它落到 character 栏目再找卡。
await waitFor(() => {
const manager = document.querySelector('[data-resource-book-view="child"]');
expect(manager).not.toBeNull();
expect(
manager?.querySelector(
'.game-resource-book-scene-titlebar.is-active[data-resource-book-category="character"]',
),
).not.toBeNull();
});
// C3 后点卡是「选中 + 浮出工具条」,重命名入口在工具条上。
fireEvent.click(
await screen.findByRole('button', {
name: new RegExp(`^选中资源:角色与对象 ${name}$`),
}),
);
return screen.findByRole('toolbar', { name: '图片工具栏' });
}
function renderWorkbench(
manifest: GameCreationAppManifest,
onManifestChange?: (
projectPath: string,
next: GameCreationAppManifest,
metadata: unknown,
) => void,
) {
const { rerender } = render(
React.createElement(ProjectDevelopmentView, {
projectName: manifest.name,
projectPath: PROJECT_PATH,
manifest,
attachments: [],
recentRunStatus: null,
recentRunStopReason: null,
supervisor: React.createElement('div', null, '项目总控'),
onHomeOpen: vi.fn(),
onProjectsOpen: vi.fn(),
onManifestChange,
}),
);
return {
rerenderWith(next: GameCreationAppManifest) {
rerender(
React.createElement(ProjectDevelopmentView, {
projectName: next.name,
projectPath: PROJECT_PATH,
manifest: next,
attachments: [],
recentRunStatus: null,
recentRunStopReason: null,
supervisor: React.createElement('div', null, '项目总控'),
onHomeOpen: vi.fn(),
onProjectsOpen: vi.fn(),
onManifestChange,
}),
);
},
};
}
afterEach(() => {
cleanup();
delete (window as unknown as { __TAURI__?: unknown }).__TAURI__;
});
describe('素材重命名前端链路', () => {
test('renames through the strict native command and refreshes the resource card name', async () => {
installResourceCardIntersectionObserver();
const renamedManifest = createManifestWithHero('assets/hero-v2.png');
const invoke = installInvoke(async (command) => {
if (command === 'get_local_game_project_revision') {
return { revision: 11, hasCommittedEdit: true };
}
if (command === 'rename_local_project_asset') {
return {
asset: renamedManifest.assets[0],
previousLocalPath: 'assets/hero.png',
committedProjectRevision: 12,
};
}
if (command === 'get_local_game_manifest') {
return renamedManifest;
}
throw new Error(`unexpected command: ${command}`);
});
const onManifestChange = vi.fn();
const rendered = renderWorkbench(
createManifestWithHero('assets/hero.png'),
onManifestChange,
);
const toolbar = await openHeroCard();
fireEvent.click(within(toolbar).getByRole('button', { name: '重命名' }));
const field = (await screen.findByLabelText(
'新文件名',
)) as HTMLInputElement;
expect(field.value).toBe('hero.png');
fireEvent.change(field, { target: { value: 'hero-v2.png' } });
fireEvent.click(screen.getByRole('button', { name: '确认重命名素材' }));
await waitFor(() => {
expect(onManifestChange).toHaveBeenCalledTimes(1);
});
// 与删除 / 分类保存同一套 CAS 口径:带上项目身份 + **这一次读到的** revision。
expect(invoke).toHaveBeenCalledWith('rename_local_project_asset', {
input: {
projectPath: PROJECT_PATH,
expectedProjectId: 'workbench-asset-rename',
expectedProjectRevision: 11,
assetId: 'asset-hero',
newFileName: 'hero-v2.png',
},
});
expect(invoke).toHaveBeenCalledWith('get_local_game_project_revision', {
projectPath: PROJECT_PATH,
});
// revision 必须来自那一次读取:先读再改名,顺序反了就等于把过期值贴上去。
expect(
invoke.mock.calls.findIndex(
([command]) => command === 'get_local_game_project_revision',
),
).toBeLessThan(
invoke.mock.calls.findIndex(
([command]) => command === 'rename_local_project_asset',
),
);
expect(invoke).toHaveBeenCalledWith('get_local_game_manifest', {
projectPath: PROJECT_PATH,
commandId: 'asset.list',
});
expect(onManifestChange.mock.calls[0]?.[2]).toMatchObject({
revision: 12,
source: 'asset-command',
commitId: 'asset-rename:asset-hero',
});
rendered.rerenderWith(renamedManifest);
await waitFor(() => {
expect(
screen.getByRole('button', {
name: '选中资源:角色与对象 hero-v2.png',
}),
).not.toBeNull();
});
});
test('reads the project revision before renaming so a stale local value cannot be replayed', async () => {
installResourceCardIntersectionObserver();
// 本地 manifest 的 revision 落后(5)而磁盘上已经是 42:提交的必须是读到的 42,
// 否则后端按「陈旧改写」拒收,用户会看到一次凭空失败的重命名。
const staleManifest = createManifestWithHero('assets/hero.png');
const invoke = installInvoke(async (command) => {
if (command === 'get_local_game_project_revision') {
return { revision: 42, hasCommittedEdit: true };
}
if (command === 'rename_local_project_asset') {
return {
asset: createManifestWithHero('assets/hero-v2.png').assets[0],
previousLocalPath: 'assets/hero.png',
committedProjectRevision: 43,
};
}
if (command === 'get_local_game_manifest') {
return createManifestWithHero('assets/hero-v2.png');
}
throw new Error(`unexpected command: ${command}`);
});
renderWorkbench(staleManifest);
const toolbar = await openHeroCard();
fireEvent.click(within(toolbar).getByRole('button', { name: '重命名' }));
const field = (await screen.findByLabelText(
'新文件名',
)) as HTMLInputElement;
fireEvent.change(field, { target: { value: 'hero-v2.png' } });
fireEvent.click(screen.getByRole('button', { name: '确认重命名素材' }));
await waitFor(() => {
expect(invoke).toHaveBeenCalledWith(
'rename_local_project_asset',
expect.anything(),
);
});
expect(
invoke.mock.calls.find(
([command]) => command === 'rename_local_project_asset',
)?.[1],
).toMatchObject({ input: { expectedProjectRevision: 42 } });
});
test('surfaces the project CAS rejection as readable copy instead of the raw code', async () => {
installResourceCardIntersectionObserver();
installInvoke(async (command) => {
if (command === 'get_local_game_project_revision') {
return { revision: 7, hasCommittedEdit: true };
}
if (command === 'rename_local_project_asset') {
throw 'project-revision-conflict';
}
throw new Error(`unexpected command: ${command}`);
});
renderWorkbench(createManifestWithHero('assets/hero.png'));
const toolbar = await openHeroCard();
fireEvent.click(within(toolbar).getByRole('button', { name: '重命名' }));
const field = (await screen.findByLabelText(
'新文件名',
)) as HTMLInputElement;
fireEvent.change(field, { target: { value: 'hero-v2.png' } });
fireEvent.click(screen.getByRole('button', { name: '确认重命名素材' }));
const alert = await screen.findByRole('alert');
expect(alert.textContent).toBe('项目已被其它操作改动,请刷新后重试');
expect(alert.textContent).not.toContain('project-revision-conflict');
});
test('keeps the panel open and surfaces the native rejection', async () => {
installResourceCardIntersectionObserver();
installInvoke(async (command) => {
if (command === 'get_local_game_project_revision') {
return { revision: 7, hasCommittedEdit: true };
}
if (command === 'rename_local_project_asset') {
throw '新文件名非法:扩展名必须与原文件一致';
}
throw new Error(`unexpected command: ${command}`);
});
renderWorkbench(createManifestWithHero('assets/hero.png'));
const toolbar = await openHeroCard();
fireEvent.click(within(toolbar).getByRole('button', { name: '重命名' }));
const field = (await screen.findByLabelText(
'新文件名',
)) as HTMLInputElement;
fireEvent.change(field, { target: { value: 'hero.jpg' } });
fireEvent.click(screen.getByRole('button', { name: '确认重命名素材' }));
const alert = await screen.findByRole('alert');
expect(alert.textContent).toContain('扩展名必须与原文件一致');
expect(screen.getByLabelText('新文件名')).not.toBeNull();
});
});