730 lines
36 KiB
TypeScript
730 lines
36 KiB
TypeScript
import { closeElectronApp, expect, getStableWindow, test } from './fixtures/electron';
|
|
|
|
test.describe('AI Design V2 workspace', () => {
|
|
test('removes the inspiration entry and redirects its retired route to Canvas', async ({ launchElectronApp }) => {
|
|
test.setTimeout(90_000);
|
|
const app = await launchElectronApp({ skipSetup: true });
|
|
|
|
try {
|
|
const page = await getStableWindow(app);
|
|
await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
|
|
|
|
await app.evaluate(({ ipcMain }) => {
|
|
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-workspace') {
|
|
return respond({
|
|
success: true,
|
|
data: {
|
|
capabilities: {
|
|
conversation: true,
|
|
generation: true,
|
|
image: true,
|
|
video: true,
|
|
generationOptions: {
|
|
image: {
|
|
available: true,
|
|
supportedAspectRatios: ['1:1', '3:4', '9:16', '4:3', '16:9'],
|
|
supportedDurationSeconds: [],
|
|
maxOutputCount: 4,
|
|
requiresFirstFrame: false,
|
|
supportedReferenceRoles: ['inspiration'],
|
|
},
|
|
video: {
|
|
available: true,
|
|
supportedAspectRatios: ['1:1', '3:4', '9:16', '4:3', '16:9'],
|
|
supportedDurationSeconds: [1, 6, 12],
|
|
maxOutputCount: 1,
|
|
requiresFirstFrame: true,
|
|
supportedReferenceRoles: ['first_frame'],
|
|
},
|
|
},
|
|
},
|
|
workspaces: [],
|
|
},
|
|
});
|
|
}
|
|
return { ok: false, error: { message: `Unexpected E2E Host API request: ${path}` } };
|
|
});
|
|
});
|
|
|
|
await page.getByTestId('ai-module-option-painting').click();
|
|
await expect(page.getByLabel('正在加载 AI 设计')).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /获取.*灵感/u })).toHaveCount(0);
|
|
|
|
await page.evaluate(() => {
|
|
window.location.hash = '#/image-prompts';
|
|
});
|
|
await expect.poll(() => page.evaluate(() => window.location.hash)).toBe('#/image-canvas');
|
|
await expect(page.getByLabel('正在加载 AI 设计')).toBeVisible();
|
|
} finally {
|
|
await closeElectronApp(app);
|
|
}
|
|
});
|
|
|
|
test('keeps split-panel drafts, direct edits and production results on one canonical design', async ({ launchElectronApp }, testInfo) => {
|
|
test.setTimeout(150_000);
|
|
const app = await launchElectronApp({ skipSetup: true });
|
|
|
|
try {
|
|
const page = await getStableWindow(app);
|
|
await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
|
|
|
|
await app.evaluate(({ ipcMain }) => {
|
|
const summary = {
|
|
workspaceId: 'workspace-1',
|
|
clientWorkspaceId: 'client-workspace-1',
|
|
title: '咖啡机新品主视觉',
|
|
directionId: 'direction-1',
|
|
sessionId: 'session-1',
|
|
directionRevision: 4,
|
|
specificationRevision: 3,
|
|
workspaceViewRevision: 6,
|
|
updatedAt: '2026-08-30T10:00:00.000Z',
|
|
};
|
|
const workspace = {
|
|
workspace: summary,
|
|
form: {
|
|
schemaVersion: 1,
|
|
workspaceId: 'workspace-1',
|
|
directionId: 'direction-1',
|
|
directionRevision: 4,
|
|
rawTurnSequence: 1,
|
|
specificationRevision: 3,
|
|
workspaceViewRevision: 6,
|
|
specificationRevisionId: 'specification-revision-3',
|
|
specificationDigest: 'a'.repeat(64),
|
|
specification: {
|
|
schema_version: 1,
|
|
values: {
|
|
intent: {
|
|
media: 'image',
|
|
creation_intent: 'create',
|
|
purpose: '新品发布主视觉',
|
|
channel: '小红书首图',
|
|
audience: '年轻消费者',
|
|
},
|
|
content: {
|
|
concept: '把便携咖啡机呈现为城市通勤中的精密工具',
|
|
subjects: [],
|
|
exact_content: [],
|
|
},
|
|
visual: {},
|
|
layout: { regions: [] },
|
|
references: [],
|
|
image: {
|
|
operation_intent: 'new_generation',
|
|
preserve_instructions: [],
|
|
change_instructions: [],
|
|
},
|
|
video: { shots: [], total_duration_seconds: null as number | null },
|
|
output: {
|
|
aspect_ratio: '3:4',
|
|
orientation: 'portrait',
|
|
delivery_format: 'PNG',
|
|
variant_count: 1,
|
|
variant_purposes: [],
|
|
},
|
|
constraints: {
|
|
must_include: [],
|
|
must_preserve: [],
|
|
must_avoid: [],
|
|
legal_notes: [],
|
|
safety_notes: [],
|
|
acceptance_criteria: [],
|
|
},
|
|
},
|
|
field_decisions: {
|
|
'intent.media': {
|
|
resolution: 'resolved',
|
|
provenance: 'user',
|
|
locked: true,
|
|
changed_by: 'interaction-1',
|
|
origin_turn_id: 'turn-1',
|
|
},
|
|
'output.aspect_ratio': {
|
|
resolution: 'resolved',
|
|
provenance: 'user',
|
|
locked: false,
|
|
changed_by: 'interaction-1',
|
|
origin_turn_id: 'turn-1',
|
|
},
|
|
},
|
|
},
|
|
decisionPrompts: [],
|
|
activeQuotes: [] as Array<Record<string, unknown>>,
|
|
recentChangeSet: { interaction_id: 'interaction-1', changes: [] },
|
|
},
|
|
turns: [{
|
|
turnId: 'turn-1',
|
|
rawTurnSequence: 1,
|
|
userMessage: '做一张便携咖啡机的小红书主视觉',
|
|
assistantMessage: '明白了：你想做一张适合小红书的便携咖啡机图片。',
|
|
}],
|
|
tasks: [] as Array<Record<string, unknown>>,
|
|
assets: [] as Array<Record<string, unknown>>,
|
|
};
|
|
const respond = (json: unknown) => ({
|
|
ok: true,
|
|
data: { status: 200, ok: true, json },
|
|
});
|
|
const envelope = (data: unknown) => respond({ success: true, data });
|
|
const e2eSession = {
|
|
accessToken: 'e2e-design-access-token',
|
|
tokenType: 'Bearer',
|
|
expiresAt: Date.now() + 60 * 60 * 1000,
|
|
lastActiveAt: Date.now(),
|
|
canRefresh: false,
|
|
};
|
|
const e2eGlobal = globalThis as typeof globalThis & {
|
|
__designE2eAuthReady?: boolean;
|
|
__designE2eProfileReady?: boolean;
|
|
__designE2eCompleteTask?: () => void;
|
|
__designE2eOpenIncompleteVideo?: () => void;
|
|
__designE2eDownloadCount?: number;
|
|
};
|
|
e2eGlobal.__designE2eAuthReady = false;
|
|
e2eGlobal.__designE2eProfileReady = false;
|
|
e2eGlobal.__designE2eDownloadCount = 0;
|
|
e2eGlobal.__designE2eOpenIncompleteVideo = () => {
|
|
workspace.form.specification.values.intent.media = 'video';
|
|
workspace.form.specification.values.video.total_duration_seconds = null;
|
|
workspace.form.directionRevision += 1;
|
|
workspace.form.specificationRevision += 1;
|
|
workspace.workspace.specificationRevision = workspace.form.specificationRevision;
|
|
};
|
|
e2eGlobal.__designE2eCompleteTask = () => {
|
|
workspace.tasks[0] = {
|
|
...workspace.tasks[0],
|
|
status: 'succeeded',
|
|
taskRevision: 2,
|
|
progress: { stage: 'completed', completedRequiredSteps: 1, totalRequiredSteps: 1 },
|
|
resultAssetIds: ['result-1'],
|
|
nextActions: ['view_result'],
|
|
};
|
|
workspace.assets = [{
|
|
assetId: 'result-1', workspaceId: 'workspace-1', role: 'generated',
|
|
mediaType: 'image', mimeType: 'image/svg+xml', width: 1600, height: 2400,
|
|
durationMilliseconds: null, generationTaskId: 'task-1',
|
|
createdAt: '2026-08-30T10:02:00.000Z',
|
|
contentPath: '/api/works/image-workspace/workspaces/workspace-1/assets/result-1/content',
|
|
}];
|
|
};
|
|
|
|
ipcMain.removeHandler('hostapi:fetch');
|
|
ipcMain.handle('hostapi:fetch', async (_event, request: {
|
|
path?: string;
|
|
method?: string;
|
|
body?: string | null;
|
|
}) => {
|
|
const path = request.path ?? '';
|
|
if (path.endsWith('/assets/result-1/download')) {
|
|
e2eGlobal.__designE2eDownloadCount! += 1;
|
|
return envelope({ status: 'saved' });
|
|
}
|
|
if (path === '/api/auth/session/sync') {
|
|
return respond({ success: true, session: e2eSession });
|
|
}
|
|
if (path === '/api/auth/me') {
|
|
e2eGlobal.__designE2eAuthReady = true;
|
|
return respond({
|
|
success: true,
|
|
moduleAccess: { programming: true, design: true, robot: true },
|
|
});
|
|
}
|
|
if (path === '/api/works/user/agent-profile') {
|
|
e2eGlobal.__designE2eProfileReady = true;
|
|
return respond({
|
|
success: true,
|
|
profile: {
|
|
display_name: 'E2E 设计用户',
|
|
age: null,
|
|
gender: null,
|
|
avatar_url: null,
|
|
share_age_with_agents: false,
|
|
share_gender_with_agents: false,
|
|
analysis_enabled: true,
|
|
completed: true,
|
|
version: 1,
|
|
updated_at: '2026-08-30T10:00:00.000Z',
|
|
},
|
|
});
|
|
}
|
|
if (path === '/api/works/image-workspace') {
|
|
return envelope({
|
|
capabilities: {
|
|
conversation: true,
|
|
generation: true,
|
|
image: true,
|
|
video: true,
|
|
generationOptions: {
|
|
image: {
|
|
available: true,
|
|
supportedAspectRatios: ['1:1', '3:4', '9:16', '4:3', '16:9'],
|
|
supportedDurationSeconds: [],
|
|
maxOutputCount: 4,
|
|
requiresFirstFrame: false,
|
|
supportedReferenceRoles: ['inspiration'],
|
|
},
|
|
video: {
|
|
available: true,
|
|
supportedAspectRatios: ['1:1', '3:4', '9:16', '4:3', '16:9'],
|
|
supportedDurationSeconds: [1, 6, 12],
|
|
maxOutputCount: 1,
|
|
requiresFirstFrame: true,
|
|
supportedReferenceRoles: ['first_frame'],
|
|
},
|
|
},
|
|
},
|
|
workspaces: [workspace.workspace],
|
|
});
|
|
}
|
|
if (path === '/api/works/image-workspace/workspaces/workspace-1' && request.method === 'GET') {
|
|
return envelope(workspace);
|
|
}
|
|
if (path === '/api/works/image-workspace/workspaces/workspace-1/commands') {
|
|
const command = JSON.parse(request.body ?? '{}') as {
|
|
kind?: string;
|
|
clientOperationId?: string;
|
|
input?: {
|
|
kind?: string;
|
|
message?: string;
|
|
operations?: Array<{ kind?: string; path?: string; value?: unknown }>;
|
|
};
|
|
};
|
|
|
|
if (command.kind === 'apply_input') {
|
|
if (command.input?.kind === 'prepare_generation') {
|
|
(globalThis as typeof globalThis & { __designPreparedRevision?: number }).__designPreparedRevision = workspace.form.specificationRevision + 1;
|
|
}
|
|
if (command.input?.kind === 'direct_edit') {
|
|
for (const operation of command.input.operations ?? []) {
|
|
if (operation.kind === 'set' && operation.path === 'output.aspect_ratio') {
|
|
workspace.form.specification.values.output.aspect_ratio = String(operation.value ?? '');
|
|
}
|
|
if (operation.kind === 'set' && operation.path === 'output.orientation') {
|
|
workspace.form.specification.values.output.orientation = String(operation.value ?? '');
|
|
}
|
|
if (operation.kind === 'set' && operation.path === 'video.total_duration_seconds') {
|
|
workspace.form.specification.values.video.total_duration_seconds = Number(operation.value);
|
|
}
|
|
}
|
|
}
|
|
if (command.input?.kind === 'chat' && command.input.message) {
|
|
workspace.form.rawTurnSequence += 1;
|
|
workspace.turns.push({
|
|
turnId: `turn-${workspace.form.rawTurnSequence}`,
|
|
rawTurnSequence: workspace.form.rawTurnSequence,
|
|
userMessage: command.input.message,
|
|
assistantMessage: '记住了：主体更简洁，也会为标题留出空间。',
|
|
});
|
|
}
|
|
workspace.form.directionRevision += 1;
|
|
workspace.form.specificationRevision += 1;
|
|
workspace.form.workspaceViewRevision += 1;
|
|
workspace.form.specificationRevisionId = `specification-revision-${workspace.form.specificationRevision}`;
|
|
workspace.workspace.directionRevision = workspace.form.directionRevision;
|
|
workspace.workspace.specificationRevision = workspace.form.specificationRevision;
|
|
workspace.workspace.workspaceViewRevision = workspace.form.workspaceViewRevision;
|
|
}
|
|
|
|
if (command.kind === 'request_quote') {
|
|
if ((globalThis as typeof globalThis & { __designPreparedRevision?: number }).__designPreparedRevision !== workspace.form.specificationRevision) {
|
|
throw new Error('Quote must use the latest prepared revision');
|
|
}
|
|
workspace.form.activeQuotes = [{
|
|
quoteId: 'quote-1',
|
|
status: 'offered',
|
|
specificationRevision: workspace.form.specificationRevision,
|
|
specificationRevisionId: workspace.form.specificationRevisionId,
|
|
specificationDigest: workspace.form.specificationDigest,
|
|
medium: 'image',
|
|
compilerVersion: 'design-compiler-v2',
|
|
outputSummary: {
|
|
medium: 'image',
|
|
strategy: 'direct',
|
|
aspectRatio: workspace.form.specification.values.output.aspect_ratio,
|
|
outputCount: 1,
|
|
deliveryFormat: 'PNG',
|
|
durationSeconds: null,
|
|
requiredOutputRoles: ['primary'],
|
|
},
|
|
warnings: [],
|
|
quotedDesignPoints: 12,
|
|
maximumCustomerChargeAtoms: 1200,
|
|
expiresAt: '2030-01-02T03:04:05.000Z',
|
|
}];
|
|
}
|
|
|
|
if (command.kind === 'confirm_generation') {
|
|
const offeredQuote = workspace.form.activeQuotes[0] ?? {};
|
|
workspace.form.activeQuotes = [{ ...offeredQuote, status: 'consumed' }];
|
|
workspace.tasks = [{
|
|
taskId: 'task-1',
|
|
quoteId: 'quote-1',
|
|
status: 'queued',
|
|
taskRevision: 1,
|
|
specificationRevision: workspace.form.specificationRevision,
|
|
specificationRevisionId: workspace.form.specificationRevisionId,
|
|
specificationDigest: workspace.form.specificationDigest,
|
|
medium: 'image',
|
|
compilerVersion: 'design-compiler-v2',
|
|
outputSummary: offeredQuote.outputSummary,
|
|
maximumCustomerChargeAtoms: 1200,
|
|
customerBilling: {
|
|
quotedAtoms: 1200,
|
|
heldAtoms: 1200,
|
|
chargedAtoms: 0,
|
|
refundedAtoms: 0,
|
|
pendingResolutionAtoms: 0,
|
|
},
|
|
customerHoldExpiresAt: '2030-01-02T03:04:05.000Z',
|
|
resolutionDeadlineAt: '2030-01-02T03:09:05.000Z',
|
|
progress: { stage: 'queued', completedRequiredSteps: 0, totalRequiredSteps: 1 },
|
|
executionHealth: 'normal',
|
|
cancellation: { state: 'available', outcome: null },
|
|
issues: [],
|
|
resultAssetIds: [],
|
|
nextActions: ['cancel'],
|
|
createdAt: '2026-08-30T10:01:00.000Z',
|
|
}];
|
|
}
|
|
|
|
return envelope({
|
|
clientOperationId: command.clientOperationId ?? 'operation-e2e',
|
|
runId: `run-${command.clientOperationId ?? 'e2e'}`,
|
|
workspace,
|
|
});
|
|
}
|
|
return { ok: false, error: { message: `Unexpected E2E Host API request: ${path}` } };
|
|
});
|
|
});
|
|
|
|
await page.addInitScript(() => {
|
|
const now = Date.now();
|
|
localStorage.setItem('niancode-settings', JSON.stringify({
|
|
state: { sidebarCollapsed: true },
|
|
version: 0,
|
|
}));
|
|
localStorage.setItem('niancode-auth', JSON.stringify({
|
|
state: {
|
|
authBase: 'https://biz.nianxx.cn/auth/',
|
|
clientId: 'app',
|
|
accessToken: 'e2e-design-access-token',
|
|
tokenType: 'Bearer',
|
|
expiresAt: now + 60 * 60 * 1000,
|
|
lastActiveAt: now,
|
|
canRefresh: false,
|
|
legacyRefreshToken: null,
|
|
user: {
|
|
username: 'e2e-design-user',
|
|
userId: 'e2e-user-1',
|
|
tenantId: null,
|
|
deptId: null,
|
|
authorities: [],
|
|
},
|
|
moduleAccess: { programming: true, design: true, robot: true },
|
|
},
|
|
version: 2,
|
|
}));
|
|
});
|
|
await page.reload();
|
|
await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
|
|
await expect.poll(async () => await app.evaluate(() => Boolean(
|
|
(globalThis as typeof globalThis & { __designE2eAuthReady?: boolean }).__designE2eAuthReady,
|
|
))).toBe(true);
|
|
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await page.getByTestId('ai-module-option-painting').click();
|
|
await expect(page.getByTestId('image-workspace')).toBeVisible();
|
|
const conversation = page.getByTestId('image-workspace-conversation');
|
|
const split = page.getByTestId('canvas-workspace-split');
|
|
const conversationPane = split.getByRole('region', { name: '创作对话', exact: true });
|
|
const worksPane = split.getByRole('region', { name: '作品工作区', exact: true });
|
|
const separator = page.getByRole('separator', { name: '调整对话与作品宽度' });
|
|
const creationCard = page.getByTestId('youth-creation-card');
|
|
const composer = page.getByLabel('告诉 AI 你想创作什么');
|
|
const currentTab = worksPane.getByRole('button', { name: '当前作品', exact: true });
|
|
const historyTab = worksPane.getByRole('button', { name: /^历史作品/u });
|
|
|
|
await expect(conversation).toBeVisible();
|
|
await expect(page.getByTestId('design-message-composer')).toBeVisible();
|
|
await expect(page.getByTestId('sidebar-image-workspace')).toBeVisible();
|
|
await expect(page.getByTestId('image-workspace-history-rail')).toBeVisible();
|
|
await expect(page.getByTestId('image-workspace-works-rail')).toHaveCount(0);
|
|
await expect(page.getByTestId('titlebar-sidebar-toggle')).toHaveCount(0);
|
|
await expect(page.getByRole('heading', { name: '和 AI 一起完善创作' })).toHaveCount(0);
|
|
await expect(page.getByText('当前设计项目的制作记录')).toHaveCount(0);
|
|
await expect(page.getByText('实时同步')).toHaveCount(0);
|
|
await expect(page.getByRole('button', { name: '刷新作品' })).toHaveCount(0);
|
|
await expect(worksPane.getByRole('heading', { name: '制作方案' })).toBeVisible();
|
|
await expect(worksPane.getByTestId('youth-creation-card')).toHaveCount(1);
|
|
await expect(conversation.getByTestId('youth-creation-card')).toHaveCount(0);
|
|
await expect(page.getByRole('textbox', { name: '创作提示词' })).toHaveValue(
|
|
'把便携咖啡机呈现为城市通勤中的精密工具',
|
|
);
|
|
await expect(page.getByText('Living Form')).toHaveCount(0);
|
|
await expect(page.getByText('目标与用途')).toHaveCount(0);
|
|
await expect(page.locator('[data-testid^="sidebar-image-conversation-"]')).toHaveCount(0);
|
|
|
|
const splitBounds = (await split.boundingBox())!;
|
|
const conversationBounds = (await conversationPane.boundingBox())!;
|
|
const worksBounds = (await worksPane.boundingBox())!;
|
|
const separatorBounds = (await separator.boundingBox())!;
|
|
const headerBounds = (await page.getByTestId('image-workspace-header').boundingBox())!;
|
|
expect(headerBounds.height).toBe(64);
|
|
expect(conversationBounds.height).toBeGreaterThan(500);
|
|
expect(Math.abs(headerBounds.y + headerBounds.height - splitBounds.y)).toBeLessThanOrEqual(1);
|
|
expect(separatorBounds.width).toBe(8);
|
|
expect(Math.abs(conversationBounds.x + conversationBounds.width - separatorBounds.x)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(separatorBounds.x + separatorBounds.width - worksBounds.x)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(conversationBounds.y - worksBounds.y)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(conversationBounds.height - worksBounds.height)).toBeLessThanOrEqual(1);
|
|
expect(conversationBounds.width / (splitBounds.width - separatorBounds.width)).toBeCloseTo(0.42, 2);
|
|
expect(worksBounds.width).toBeGreaterThan(conversationBounds.width);
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '42');
|
|
await page.screenshot({ path: testInfo.outputPath('canvas-desktop-split.png'), animations: 'disabled' });
|
|
|
|
// Resize changes usable panel widths, and both keyboard and pointer reset work.
|
|
await separator.focus();
|
|
await separator.press('ArrowRight');
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '44');
|
|
expect((await conversationPane.boundingBox())!.width).toBeGreaterThan(conversationBounds.width + 15);
|
|
await separator.press('ArrowLeft');
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '42');
|
|
await page.mouse.move(separatorBounds.x + separatorBounds.width / 2, separatorBounds.y + 100);
|
|
await page.mouse.down();
|
|
await page.mouse.move(splitBounds.x + (splitBounds.width - 8) * 0.55, separatorBounds.y + 100, { steps: 8 });
|
|
await page.mouse.up();
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '55');
|
|
expect((await conversationPane.boundingBox())!.width).toBeGreaterThan((await worksPane.boundingBox())!.width);
|
|
await separator.dblclick();
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '42');
|
|
await separator.press('ArrowRight');
|
|
await separator.press('Home');
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '42');
|
|
|
|
const unsentDraft = '还没发送的想法：让咖啡机更有未来感';
|
|
await composer.fill(unsentDraft);
|
|
await composer.press('F6');
|
|
await expect(worksPane.getByRole('button', { name: '展开作品工作区' })).toBeFocused();
|
|
await page.keyboard.press('F6');
|
|
await expect(conversationPane.getByRole('button', { name: '展开创作对话' })).toBeFocused();
|
|
await conversationPane.getByRole('button', { name: '展开创作对话' }).click();
|
|
await expect(worksPane).toBeHidden();
|
|
await expect(creationCard).toHaveCount(1);
|
|
await expect(separator).toBeHidden();
|
|
expect((await conversationPane.boundingBox())!.width).toBeCloseTo(splitBounds.width, 0);
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await page.keyboard.press('Escape');
|
|
await expect(worksPane).toBeVisible();
|
|
await expect(separator).toBeVisible();
|
|
await worksPane.getByRole('button', { name: '展开作品工作区' }).click();
|
|
await expect(conversationPane).toBeHidden();
|
|
await expect(conversation).toHaveCount(1);
|
|
await expect(creationCard).toBeVisible();
|
|
await worksPane.getByRole('button', { name: '恢复分栏' }).click();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await expect(separator).toHaveAttribute('aria-valuenow', '42');
|
|
|
|
await historyTab.click();
|
|
await expect(historyTab).toHaveAttribute('aria-pressed', 'true');
|
|
await expect(worksPane.getByText('还没有历史作品', { exact: true })).toBeVisible();
|
|
await expect(creationCard).toBeHidden();
|
|
await expect(creationCard).toHaveCount(1);
|
|
await currentTab.click();
|
|
await expect(currentTab).toHaveAttribute('aria-pressed', 'true');
|
|
await expect(creationCard).toBeVisible();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
|
|
const desktopViewport = page.viewportSize();
|
|
await page.setViewportSize({ width: 375, height: 800 });
|
|
await expect(page.getByTestId('sidebar')).toBeHidden();
|
|
// The last explicitly expanded panel remains selected when the layout becomes compact.
|
|
await expect(worksPane).toBeVisible();
|
|
await page.getByRole('button', { name: '创作对话', exact: true }).click();
|
|
await expect(conversation).toBeVisible();
|
|
await expect(worksPane).toBeHidden();
|
|
await expect(separator).toBeHidden();
|
|
await expect(page.getByTestId('image-workspace-history-rail')).toHaveCount(1);
|
|
await expect(creationCard).toBeHidden();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
await expect(conversation).toBeHidden();
|
|
await expect(conversation).toHaveCount(1);
|
|
await expect(creationCard).toBeVisible();
|
|
await page.getByRole('combobox', { name: '画幅' }).selectOption('16:9');
|
|
await expect(page.getByRole('combobox', { name: '画幅' })).toHaveValue('16:9');
|
|
await historyTab.click();
|
|
await expect(worksPane.getByText('还没有历史作品', { exact: true })).toBeVisible();
|
|
await page.getByRole('button', { name: '创作对话', exact: true }).click();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await page.getByRole('button', { name: '项目', exact: true }).click();
|
|
await expect(page.getByTestId('image-workspace-works-rail')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(page.getByTestId('image-workspace-works-rail')).toHaveCount(0);
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
|
|
await page.setViewportSize({ width: 768, height: 800 });
|
|
await expect(conversation).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '作品与方案', exact: true })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '项目', exact: true })).toBeVisible();
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
await expect(historyTab).toHaveAttribute('aria-pressed', 'true');
|
|
await currentTab.click();
|
|
await expect(creationCard).toBeVisible();
|
|
await expect(page.getByRole('combobox', { name: '画幅' })).toHaveValue('16:9');
|
|
await page.getByRole('button', { name: '创作对话', exact: true }).click();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
|
|
// The usable Canvas container selects one panel through 899 px and splits from 900 px.
|
|
await page.setViewportSize({ width: 899, height: 800 });
|
|
await expect(conversation).toBeVisible();
|
|
await expect(worksPane).toBeHidden();
|
|
await expect(separator).toBeHidden();
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
await expect(creationCard).toBeVisible();
|
|
await expect(conversation).toBeHidden();
|
|
await page.getByRole('button', { name: '创作对话', exact: true }).click();
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await page.setViewportSize({ width: 900, height: 800 });
|
|
await expect(conversation).toBeVisible();
|
|
await expect(worksPane).toBeVisible();
|
|
await expect(separator).toBeVisible();
|
|
await expect(page.getByRole('button', { name: '作品与方案', exact: true })).toHaveCount(0);
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
const boundarySplit = (await split.boundingBox())!;
|
|
const boundaryWorks = (await worksPane.boundingBox())!;
|
|
expect(boundarySplit.width).toBe(900);
|
|
expect(boundaryWorks.x + boundaryWorks.width).toBeLessThanOrEqual(900);
|
|
|
|
await page.setViewportSize(desktopViewport ?? { width: 1440, height: 900 });
|
|
await expect(page.getByTestId('sidebar-image-workspace')).toBeVisible();
|
|
await expect(conversation).toBeVisible();
|
|
await expect(worksPane).toBeVisible();
|
|
await expect(separator).toBeVisible();
|
|
await expect(page.getByTestId('image-workspace-works-rail')).toHaveCount(0);
|
|
await expect(composer).toHaveValue(unsentDraft);
|
|
await expect(page.getByRole('combobox', { name: '画幅' })).toHaveValue('16:9');
|
|
|
|
const followUp = '主体更克制，留出品牌标题空间';
|
|
await page.getByLabel('告诉 AI 你想创作什么').fill(followUp);
|
|
await page.getByLabel('告诉 AI 你想创作什么').press('Enter');
|
|
await expect(page.getByTestId('image-workspace-conversation')).toContainText(followUp);
|
|
await expect(page.getByTestId('image-workspace-conversation'))
|
|
.toContainText('记住了：主体更简洁，也会为标题留出空间。');
|
|
|
|
await page.getByRole('button', { name: '准备制作方案', exact: true }).click();
|
|
await expect(page.getByRole('button', { name: '确认并开始制作' })).toBeVisible();
|
|
await expect(page.getByText(/预计使用/)).toContainText('12');
|
|
await expect(page.getByRole('textbox', { name: '创作提示词' })).toBeVisible();
|
|
await expect(page.getByText(/规格版本|编译器|生成方式|不可变/)).toHaveCount(0);
|
|
|
|
await page.getByRole('button', { name: '确认并开始制作' }).click();
|
|
await historyTab.click();
|
|
await expect(worksPane.getByTestId('design-plan-history-task-1')).toBeVisible();
|
|
await expect(conversation.getByTestId('design-plan-history-task-1')).toHaveCount(0);
|
|
await expect(worksPane.getByTestId('design-plan-history-task-1')).toContainText('等待制作');
|
|
await expect(page.getByTestId('image-workspace-header').getByRole('status')).toHaveText('等待制作');
|
|
await expect(page.getByTestId('youth-creation-card')).toHaveCount(0);
|
|
await expect(page.getByText('1200', { exact: true })).toHaveCount(0);
|
|
|
|
// Complete the existing task without a paid provider or native download.
|
|
await page.route('**/assets/result-1/content?*', (route) => route.fulfill({
|
|
contentType: 'image/svg+xml',
|
|
body: '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="2400"><rect width="1600" height="2400" fill="#f4efe5"/><rect x="80" y="80" width="1440" height="2240" rx="80" fill="#d6e5dc"/><circle cx="800" cy="1050" r="450" fill="#47665b"/><text x="800" y="1850" text-anchor="middle" font-size="120" fill="#203b30">DESIGN PREVIEW</text></svg>',
|
|
}));
|
|
await app.evaluate(() => {
|
|
(globalThis as typeof globalThis & { __designE2eCompleteTask?: () => void }).__designE2eCompleteTask?.();
|
|
});
|
|
await page.reload();
|
|
await expect(page.getByTestId('canvas-current-work')).toBeVisible();
|
|
await expect(page.getByTestId('canvas-current-work').getByRole('img', { name: '当前图片作品' })).toBeVisible();
|
|
await expect(page.getByTestId('canvas-current-work').getByRole('button', { name: '保存到电脑' })).toBeEnabled();
|
|
await expect(currentTab).toHaveAttribute('aria-pressed', 'true');
|
|
await page.screenshot({ path: testInfo.outputPath('canvas-desktop-current-work.png'), animations: 'disabled' });
|
|
await historyTab.click();
|
|
const historyTask = worksPane.getByTestId('design-plan-history-task-1');
|
|
await expect(historyTask).toContainText('已完成');
|
|
await historyTask.locator('summary').click();
|
|
const previewButton = historyTask.getByRole('button', { name: '放大查看图片' });
|
|
await previewButton.click();
|
|
const previewDialog = page.getByRole('dialog', { name: '图片预览' });
|
|
const previewImage = previewDialog.getByRole('img', { name: 'AI 作品大图' });
|
|
await expect(previewDialog).toBeVisible();
|
|
await expect(previewDialog.getByRole('button', { name: '原始尺寸' })).toBeEnabled();
|
|
expect(await previewImage.evaluate((image: HTMLImageElement) => image.naturalWidth)).toBe(1600);
|
|
await expect(previewImage).toHaveCSS('object-fit', 'contain');
|
|
const previewBounds = await previewDialog.boundingBox();
|
|
expect(previewBounds!.height).toBeGreaterThan(400);
|
|
expect(previewBounds!.width).toBeGreaterThan(800);
|
|
|
|
await previewDialog.getByRole('button', { name: '原始尺寸' }).click();
|
|
expect((await previewImage.boundingBox())!.width).toBe(1600);
|
|
expect((await previewImage.boundingBox())!.height).toBe(2400);
|
|
const scrollArea = previewDialog.getByTestId('design-image-preview-viewport');
|
|
expect(await scrollArea.evaluate((element) => element.scrollHeight > element.clientHeight)).toBe(true);
|
|
await previewDialog.getByRole('button', { name: '适应窗口' }).click();
|
|
await page.keyboard.press('Escape');
|
|
await expect(previewDialog).toHaveCount(0);
|
|
await expect(previewButton).toBeFocused();
|
|
|
|
// A historical result becomes the current large workspace preview without a download.
|
|
await historyTask.getByRole('button', { name: '在工作区查看' }).click();
|
|
await expect(currentTab).toHaveAttribute('aria-pressed', 'true');
|
|
await expect(historyTask).toBeHidden();
|
|
await expect(page.getByTestId('canvas-current-work')).toBeVisible();
|
|
const currentPreview = page.getByTestId('canvas-current-work').getByRole('button', { name: '放大查看图片' });
|
|
await currentPreview.click();
|
|
await expect(previewDialog).toBeVisible();
|
|
await previewDialog.getByRole('button', { name: '关闭图片预览' }).click();
|
|
await expect(currentPreview).toBeFocused();
|
|
|
|
await page.setViewportSize({ width: 375, height: 800 });
|
|
await expect(conversation).toBeVisible();
|
|
await expect(worksPane).toBeHidden();
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
await expect(page.getByTestId('canvas-current-work')).toBeVisible();
|
|
await page.screenshot({ path: testInfo.outputPath('canvas-compact-current-work.png'), animations: 'disabled' });
|
|
await historyTab.click();
|
|
const compactTask = worksPane.getByTestId('design-plan-history-task-1');
|
|
await expect(compactTask).toBeVisible();
|
|
await expect(conversation.getByTestId('design-plan-history-task-1')).toHaveCount(0);
|
|
await compactTask.getByRole('button', { name: '放大查看图片' }).click();
|
|
await expect(previewDialog.getByRole('button', { name: '原始尺寸' })).toBeEnabled();
|
|
const compactBounds = await previewDialog.boundingBox();
|
|
expect(compactBounds!.x).toBeGreaterThanOrEqual(0);
|
|
expect(compactBounds!.x + compactBounds!.width).toBeLessThanOrEqual(375);
|
|
await previewDialog.getByRole('button', { name: '关闭图片预览' }).click();
|
|
await expect(previewDialog).toHaveCount(0);
|
|
expect(await app.evaluate(() => (
|
|
globalThis as typeof globalThis & { __designE2eDownloadCount?: number }
|
|
).__designE2eDownloadCount)).toBe(0);
|
|
await app.evaluate(() => {
|
|
(globalThis as typeof globalThis & { __designE2eOpenIncompleteVideo?: () => void })
|
|
.__designE2eOpenIncompleteVideo?.();
|
|
});
|
|
await page.reload();
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
const duration = page.getByRole('combobox', { name: '时长' });
|
|
await expect(duration).toHaveValue('');
|
|
await expect(page.getByRole('button', { name: '增加时长' })).toHaveCount(0);
|
|
await expect(page.getByText('至少写一个视频画面。')).toHaveCount(0);
|
|
await duration.selectOption('6');
|
|
await expect(page.getByRole('button', { name: '增加时长' })).toBeEnabled();
|
|
await page.reload();
|
|
await page.getByRole('button', { name: '作品与方案', exact: true }).click();
|
|
await expect(page.getByRole('combobox', { name: '时长' })).toHaveCount(0);
|
|
await expect(page.getByText('6 秒', { exact: true })).toBeVisible();
|
|
} finally {
|
|
await closeElectronApp(app);
|
|
}
|
|
});
|
|
});
|