diff --git a/packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue b/packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue index 01e164f11bb..1ba65ba56be 100644 --- a/packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue +++ b/packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue @@ -3193,6 +3193,14 @@ useKeybindings({ max-width: 100%; z-index: 1; pointer-events: none; + + &:has([data-preview-layout='fullpage']) { + width: 100%; + + [data-dir='left'] { + display: none; + } + } } .previewResizeOpen { diff --git a/packages/quality/testing/playwright/pages/AgentBuilderPage.ts b/packages/quality/testing/playwright/pages/AgentBuilderPage.ts index c6f9c9b395d..2f538790102 100644 --- a/packages/quality/testing/playwright/pages/AgentBuilderPage.ts +++ b/packages/quality/testing/playwright/pages/AgentBuilderPage.ts @@ -7,8 +7,36 @@ export class AgentBuilderPage extends BasePage { super(page); } - async goto(projectId: string, agentId: string): Promise { - await this.page.goto(`/projects/${projectId}/agents/${agentId}`); + async goto( + projectId: string, + agentId: string, + options?: { openPreview?: boolean }, + ): Promise { + const query = options?.openPreview ? '?openPreview=true' : ''; + await this.page.goto(`/projects/${projectId}/agents/${agentId}${query}`); + } + + getBuilderContainer(): Locator { + return this.page.locator('[data-testid="agent-builder-container"]'); + } + + getPreviewDock(): Locator { + return this.page.locator('[data-testid="agent-preview-dock"]'); + } + + getPreviewMoreButton(): Locator { + return this.getPreviewDock().locator('[data-testid="agent-preview-more-btn"]'); + } + + getFullWidthMenuItem(): Locator { + return this.page.getByRole('menuitemcheckbox', { name: 'Full width' }); + } + + async getPreviewWidthDifference(): Promise { + const builderBounds = await this.getBuilderContainer().boundingBox(); + const dockBounds = await this.getPreviewDock().boundingBox(); + if (!builderBounds || !dockBounds) throw new Error('The preview layout is not visible'); + return Math.abs(builderBounds.width - dockBounds.width); } getHeader(): Locator { diff --git a/packages/quality/testing/playwright/tests/e2e/agents/agent-preview-layout.spec.ts b/packages/quality/testing/playwright/tests/e2e/agents/agent-preview-layout.spec.ts new file mode 100644 index 00000000000..a595c4f963d --- /dev/null +++ b/packages/quality/testing/playwright/tests/e2e/agents/agent-preview-layout.spec.ts @@ -0,0 +1,48 @@ +import { nanoid } from 'nanoid'; + +import { expect, test } from '../../../fixtures/base'; + +test.use({ + capability: { + env: { + N8N_ENABLED_MODULES: 'agents', + TEST_ISOLATION: 'agent-preview-layout', + }, + }, +}); + +test.describe( + 'Agent preview layout', + { annotation: [{ type: 'owner', description: 'AI' }] }, + () => { + test('fills the builder when full width is selected', async ({ n8n, api }) => { + const project = await api.projects.getMyPersonalProject(); + const { id: agentId } = await api.agents.create(project.id, `Preview layout ${nanoid(6)}`); + + await n8n.start.fromHome(); + await n8n.agentBuilder.goto(project.id, agentId, { openPreview: true }); + + const builder = n8n.agentBuilder.getBuilderContainer(); + const dock = n8n.agentBuilder.getPreviewDock(); + await expect(builder).toBeVisible(); + await expect(dock).toBeVisible(); + await expect(dock).toHaveAttribute('data-preview-layout', 'docked'); + + expect(await n8n.agentBuilder.getPreviewWidthDifference()).toBeGreaterThan(10); + + await n8n.agentBuilder.getPreviewMoreButton().click(); + await n8n.agentBuilder.getFullWidthMenuItem().click(); + await expect(dock).toHaveAttribute('data-preview-layout', 'fullpage'); + + await expect + .poll(async () => await n8n.agentBuilder.getPreviewWidthDifference()) + .toBeLessThan(2); + + await n8n.page.setViewportSize({ width: 375, height: 667 }); + await n8n.page.emulateMedia({ colorScheme: 'dark' }); + await expect + .poll(async () => await n8n.agentBuilder.getPreviewWidthDifference()) + .toBeLessThan(2); + }); + }, +);