265 lines
14 KiB
TypeScript
265 lines
14 KiB
TypeScript
import { closeElectronApp, expect, getStableWindow, test } from './fixtures/electron';
|
|
|
|
test.describe('AI Design workspace', () => {
|
|
test('keeps Prompt Museum cards usable when relative media fails', async ({ launchElectronApp }) => {
|
|
test.setTimeout(90_000);
|
|
const app = await launchElectronApp({
|
|
imageWorkspaceMode: 'local',
|
|
skipSetup: true,
|
|
});
|
|
|
|
try {
|
|
const page = await getStableWindow(app);
|
|
await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
|
|
await page.getByTestId('ai-module-option-painting').click();
|
|
const imageSidebar = page.getByTestId('sidebar-image-workspace');
|
|
await expect(imageSidebar.getByTestId('sidebar-open-image-prompt-museum')).toBeVisible();
|
|
|
|
await app.evaluate(({ ipcMain }) => {
|
|
const image = {
|
|
url: '/api/image-prompt-museum/e2e-entry/media/thumbnail',
|
|
width: 1200,
|
|
height: 900,
|
|
alt: 'E2E museum thumbnail',
|
|
};
|
|
const card = {
|
|
id: 'e2e-entry',
|
|
slug: 'e2e-entry',
|
|
title: '相对媒体 E2E',
|
|
summary: '验证图片失败不会阻断卡片。',
|
|
thumbnail: image,
|
|
categories: [],
|
|
model: { id: 'e2e-model', name: 'E2E Model' },
|
|
language: 'zh-CN',
|
|
attribution: {
|
|
author: { name: 'E2E 作者' },
|
|
source: { name: 'E2E 来源' },
|
|
license: { name: '测试许可', attributionText: 'E2E attribution' },
|
|
},
|
|
publishedAt: '2026-08-18T00:00:00.000Z',
|
|
updatedAt: '2026-08-18T00:00:00.000Z',
|
|
};
|
|
const respond = (json: unknown) => ({
|
|
ok: true,
|
|
data: { status: 200, ok: true, json },
|
|
});
|
|
|
|
ipcMain.removeHandler('hostapi:fetch');
|
|
ipcMain.handle('hostapi:fetch', async (_event, request: { path?: string }) => {
|
|
const path = request.path ?? '';
|
|
if (path === '/api/works/image-prompt-museum') {
|
|
return respond({
|
|
success: true,
|
|
data: {
|
|
items: [card],
|
|
facets: { useCases: [], styles: [], subjects: [] },
|
|
nextCursor: null,
|
|
total: 1,
|
|
},
|
|
});
|
|
}
|
|
if (path === '/api/works/image-prompt-museum/e2e-entry') {
|
|
return respond({
|
|
success: true,
|
|
data: {
|
|
...card,
|
|
prompt: 'Create a resilient image card.',
|
|
variables: [],
|
|
images: [image],
|
|
requiresReferenceImages: false,
|
|
},
|
|
});
|
|
}
|
|
if (path === '/api/works/image-prompt-museum/e2e-entry/media/thumbnail') {
|
|
return respond({ mimeType: 'text/html', dataBase64: 'PGgxPnVuc2FmZTwvaDE+' });
|
|
}
|
|
return { ok: false, error: { message: `Unexpected E2E Host API request: ${path}` } };
|
|
});
|
|
});
|
|
|
|
await imageSidebar.getByTestId('sidebar-open-image-prompt-museum').click();
|
|
const cardButton = page.getByRole('button', { name: '查看 相对媒体 E2E' });
|
|
await expect(cardButton).toBeVisible();
|
|
await expect(page.getByLabel('E2E museum thumbnail加载失败')).toBeVisible();
|
|
await expect(cardButton).toBeEnabled();
|
|
await cardButton.click();
|
|
await expect(page.getByRole('button', { name: '关闭详情' })).toBeVisible();
|
|
} finally {
|
|
await closeElectronApp(app);
|
|
}
|
|
});
|
|
|
|
test('keeps the conversation and generation task panes full height', async ({ launchElectronApp }) => {
|
|
test.setTimeout(150_000);
|
|
const app = await launchElectronApp({
|
|
imageWorkspaceMode: 'local',
|
|
skipSetup: true,
|
|
});
|
|
|
|
try {
|
|
const page = await getStableWindow(app);
|
|
await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
|
|
await page.getByTestId('ai-module-option-painting').click();
|
|
|
|
const imageSidebar = page.getByTestId('sidebar-image-workspace');
|
|
await expect(imageSidebar.getByTestId('sidebar-open-image-prompt-museum')).toBeVisible();
|
|
await expect(imageSidebar.getByTestId('sidebar-create-image-project')).toBeVisible();
|
|
|
|
await page.getByTestId('sidebar-create-image-project').click();
|
|
await page.getByLabel('项目名称').fill('多会话验收项目');
|
|
await page.getByRole('button', { name: '创建项目' }).click();
|
|
|
|
const projectCard = page.locator('[data-testid^="sidebar-image-project-"]').first();
|
|
await expect(projectCard).not.toContainText('1 个会话');
|
|
await expect(projectCard).not.toContainText('设计会话');
|
|
await expect(page.getByRole('button', { name: '收起 多会话验收项目 的会话' })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '重命名 多会话验收项目' })).toBeVisible();
|
|
await expect(page.locator('[data-testid^="sidebar-image-conversations-"]').first())
|
|
.not.toHaveClass(/border-t/);
|
|
await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
|
|
await expect(page.getByTestId('image-workspace-conversation-fade')).toBeVisible();
|
|
await expect(page.getByTestId('design-task-list')).toBeVisible();
|
|
await expect(page.getByTestId('design-task-fade')).toBeVisible();
|
|
await expect(page.getByTestId('image-canvas-conversation-select')).toHaveCount(0);
|
|
const emptyState = page.getByTestId('image-workspace-empty-state');
|
|
await expect(emptyState).toContainText('今天一起描绘什么？');
|
|
await expect(emptyState.getByRole('img', { name: 'Makelore' })).toHaveCount(1);
|
|
|
|
const fileChooserPromise = page.waitForEvent('filechooser');
|
|
await page.getByRole('button', { name: '上传参考图' }).click();
|
|
await fileChooserPromise;
|
|
await expect(page.getByRole('dialog', { name: '选择视频首帧' })).toHaveCount(0);
|
|
|
|
const layoutBounds = await page.evaluate(() => {
|
|
const readBounds = (testId: string) => {
|
|
const element = document.querySelector(`[data-testid="${testId}"]`);
|
|
if (!element) return null;
|
|
const rect = element.getBoundingClientRect();
|
|
const style = getComputedStyle(element);
|
|
return {
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
borderLeftWidth: style.borderLeftWidth,
|
|
overflowY: style.overflowY,
|
|
};
|
|
};
|
|
|
|
return {
|
|
shell: readBounds('main-layout'),
|
|
canvas: readBounds('image-canvas-page'),
|
|
conversation: readBounds('image-workspace-conversation-pane'),
|
|
tasks: readBounds('design-task-list'),
|
|
taskScroll: readBounds('design-task-scroll'),
|
|
};
|
|
});
|
|
|
|
expect(layoutBounds.shell).not.toBeNull();
|
|
expect(layoutBounds.canvas).not.toBeNull();
|
|
expect(layoutBounds.conversation).not.toBeNull();
|
|
expect(layoutBounds.tasks).not.toBeNull();
|
|
expect(layoutBounds.taskScroll).not.toBeNull();
|
|
expect(Math.abs(layoutBounds.canvas!.top - layoutBounds.shell!.top)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(layoutBounds.canvas!.bottom - layoutBounds.shell!.bottom)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(layoutBounds.conversation!.top - layoutBounds.canvas!.top)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(layoutBounds.conversation!.bottom - layoutBounds.canvas!.bottom)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(layoutBounds.tasks!.top - layoutBounds.canvas!.top)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(layoutBounds.tasks!.bottom - layoutBounds.canvas!.bottom)).toBeLessThanOrEqual(1);
|
|
expect(layoutBounds.tasks!.borderLeftWidth).toBe('1px');
|
|
expect(layoutBounds.taskScroll!.overflowY).toBe('auto');
|
|
|
|
const firstPrompt = '为项目设计一张蓝色星空海报';
|
|
await page.getByLabel('设计需求').fill(firstPrompt);
|
|
await page.getByLabel('设计需求').press('Enter');
|
|
await expect(page.getByTestId('image-workspace-conversation')).toContainText(firstPrompt);
|
|
await expect(page.getByText('设计 Agent', { exact: true })).toHaveCount(0);
|
|
await expect(page.getByText('你', { exact: true })).toHaveCount(0);
|
|
await expect(page.getByTestId('image-workspace-message').first()).toHaveClass(/w-full/);
|
|
const firstQuote = page.locator('[data-testid^="design-quote-"]').first();
|
|
await expect(firstQuote.getByRole('button', { name: '继续调整' })).toBeVisible();
|
|
await expect(firstQuote.getByTestId('design-quote-model')).toHaveCount(0);
|
|
await expect(firstQuote).not.toContainText('提示词模式');
|
|
await page.getByRole('button', { name: '确认并开始生成' }).click();
|
|
await expect(page.getByRole('button', { name: '确认生成' })).toHaveCount(0);
|
|
await expect(page.getByRole('button', { name: '继续调整' })).toHaveCount(0);
|
|
|
|
const task = page
|
|
.locator('[data-testid^="design-task-local-task-"]')
|
|
.filter({ hasText: firstPrompt })
|
|
.first();
|
|
await expect(task).toContainText(firstPrompt);
|
|
const firstConversation = page.locator('[data-testid^="sidebar-image-conversation-"]').first();
|
|
await expect(firstConversation).toContainText('图片任务已创建，可在右侧任务列表查看进度。');
|
|
await expect(firstConversation).not.toContainText('新会话');
|
|
|
|
const firstConversationTestId = await page
|
|
.locator('[data-testid^="sidebar-image-conversation-"]')
|
|
.first()
|
|
.getAttribute('data-testid');
|
|
expect(firstConversationTestId).toBeTruthy();
|
|
|
|
await projectCard.hover();
|
|
await page.getByRole('button', { name: '新建设计会话' }).click();
|
|
await expect(page.locator('[data-testid^="sidebar-image-conversation-"]')).toHaveCount(2);
|
|
|
|
const secondPrompt = '这一条会话只讨论红色角色动态视频';
|
|
await page.getByLabel('设计需求').fill(secondPrompt);
|
|
await page.getByRole('button', { name: '发送给设计 Agent' }).click();
|
|
await expect(page.getByTestId('image-workspace-conversation')).toContainText(secondPrompt);
|
|
await expect(page.getByTestId('design-quote-final-prompt')).toHaveValue(secondPrompt);
|
|
await page.getByTestId('design-quote-final-prompt').fill('用户编辑后的动态视频完整提示词');
|
|
await expect(page.getByTestId('design-quote-model')).toHaveCount(0);
|
|
await page.getByTestId('design-quote-resolution').selectOption('720P');
|
|
await page.getByTestId('design-quote-aspect-ratio').selectOption('9:16');
|
|
await page.getByTestId('design-quote-duration').selectOption('4');
|
|
await expect(page.getByRole('button', { name: '重新报价中' })).toBeDisabled();
|
|
await expect(page.getByRole('button', { name: '确认并开始生成' })).toBeEnabled({ timeout: 10_000 });
|
|
await page.getByRole('button', { name: '确认并开始生成' }).click();
|
|
await expect(page.getByRole('button', { name: '确认并开始生成' })).toHaveCount(0);
|
|
|
|
await page.getByTestId(firstConversationTestId!).click();
|
|
await expect(page.getByTestId('image-workspace-conversation')).toContainText(firstPrompt);
|
|
await expect(page.getByTestId('image-workspace-conversation')).not.toContainText(secondPrompt);
|
|
|
|
// The local adapter deterministically advances queued -> running -> succeeded as the
|
|
// task fallback reconciles. The delete confirmation also explains what happens to
|
|
// queued and running tasks on the server.
|
|
await task.getByRole('button', { name: '查看生图任务详情' }).click();
|
|
const taskDetails = page.getByRole('dialog', { name: '生成内容详情' });
|
|
await expect(taskDetails).toContainText('已完成', { timeout: 40_000 });
|
|
await taskDetails.getByRole('button', { name: '关闭生成内容详情' }).click();
|
|
|
|
await projectCard.hover();
|
|
await page.getByRole('button', { name: '删除 多会话验收项目' }).click();
|
|
const deleteDialog = page.getByRole('dialog', { name: '删除项目' });
|
|
await expect(deleteDialog).toContainText('未提交的任务会被取消并释放预留积分');
|
|
await expect(deleteDialog).toContainText('已提交或运行中的任务会继续后台结算');
|
|
await expect(deleteDialog.getByTestId('confirm-delete-image-project')).toBeDisabled();
|
|
await expect(projectCard).toBeVisible();
|
|
|
|
await deleteDialog.getByTestId('delete-image-project-name-input').fill('多会话验收');
|
|
await expect(deleteDialog.getByText('项目名称必须完全匹配。')).toBeVisible();
|
|
await expect(deleteDialog.getByTestId('confirm-delete-image-project')).toBeDisabled();
|
|
await expect(projectCard).toBeVisible();
|
|
|
|
await deleteDialog.getByTestId('delete-image-project-name-input').fill('多会话验收项目');
|
|
await expect(deleteDialog.getByTestId('confirm-delete-image-project')).toBeEnabled();
|
|
await deleteDialog.getByTestId('confirm-delete-image-project').click();
|
|
await expect(deleteDialog).toHaveCount(0);
|
|
await expect(page.locator('[data-testid^="sidebar-image-project-"]')).toHaveCount(0);
|
|
await expect(imageSidebar).toContainText('还没有设计项目');
|
|
await expect(page.getByRole('heading', { name: '创建第一个设计项目' })).toBeVisible();
|
|
|
|
await imageSidebar.getByTestId('sidebar-open-image-prompt-museum').click();
|
|
await expect(page.getByTestId('image-prompt-museum-page')).toBeVisible();
|
|
await expect(page.getByRole('heading', { name: '获取灵感' })).toBeVisible();
|
|
await expect(page.getByText('提示词博物馆', { exact: true })).toHaveCount(0);
|
|
await expect(page.getByTestId('titlebar-page-title')).toHaveText('获取灵感');
|
|
await expect(page.getByTestId('titlebar-logo')).toHaveCount(1);
|
|
await expect(page.getByTestId('image-prompt-museum-filters')).toHaveClass(/sticky/);
|
|
await expect(page.getByTestId('image-prompt-museum-filters')).toHaveClass(/top-0/);
|
|
} finally {
|
|
await closeElectronApp(app);
|
|
}
|
|
});
|
|
});
|