mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

test: Update node creator e2e tests to work with new canvas (no-changelog) (#12530)

Browse source
This commit is contained in:
Alex Grozav 2025-01-09 18:06:55 +02:00 committed by GitHub
parent ecf83c629f
commit 980d0bcb5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 102 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
cypress/composables/workflow.ts
View file

@ -7,6 +7,7 @@ import { ROUTES } from '../constants';
*/
export type EndpointType =
| 'main'
| 'ai_chain'
| 'ai_document'
| 'ai_embedding'
@ -24,8 +25,15 @@ export type EndpointType =
*/
export function getAddInputEndpointByType(nodeName: string, endpointType: EndpointType) {
return cy.get(
`.add-input-endpoint[data-jtk-scope-${endpointType}][data-endpoint-name="${nodeName}"]`,
return cy.ifCanvasVersion(
() =>
cy.get(
`.add-input-endpoint[data-jtk-scope-${endpointType}][data-endpoint-name="${nodeName}"]`,
),
() =>
cy.get(
`[data-test-id="canvas-node-input-handle"][data-connection-type="${endpointType}"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"]`,
),
);
}
@ -63,10 +71,18 @@ export function disableNode(name: string) {
}
export function getConnectionBySourceAndTarget(source: string, target: string) {
return cy
.get('.jtk-connector')
.filter(`[data-source-node="${source}"][data-target-node="${target}"]`)
.eq(0);
return cy.ifCanvasVersion(
() =>
cy
.get('.jtk-connector')
.filter(`[data-source-node="${source}"][data-target-node="${target}"]`)
.eq(0),
() =>
cy
.getByTestId('edge')
.filter(`[data-source-node-name="${source}"][data-target-node-name="${target}"]`)
.eq(0),
);
}
export function getNodeCreatorSearchBar() {
@ -158,7 +174,19 @@ export function addSupplementalNodeToParent(
exactMatch = false,
) {
connectNodeToParent(nodeName, endpointType, parentNodeName, exactMatch);
getConnectionBySourceAndTarget(parentNodeName, nodeName).should('exist');
cy.ifCanvasVersion(
() => {
getConnectionBySourceAndTarget(parentNodeName, nodeName).should('exist');
},
() => {
if (endpointType === 'main') {
getConnectionBySourceAndTarget(parentNodeName, nodeName).should('exist');
} else {
getConnectionBySourceAndTarget(nodeName, parentNodeName).should('exist');
}
},
);
}
export function addLanguageModelNodeToParent(

30
cypress/e2e/4-node-creator.cy.ts
View file

@ -76,11 +76,21 @@ describe('Node Creator', () => {
nodeCreatorFeature.getters.canvasAddButton().click();
WorkflowPage.actions.addNodeToCanvas('Manual', false);
nodeCreatorFeature.getters.canvasAddButton().should('not.be.visible');
nodeCreatorFeature.getters.nodeCreator().should('not.exist');
cy.ifCanvasVersion(
() => {
nodeCreatorFeature.getters.canvasAddButton().should('not.be.visible');
nodeCreatorFeature.getters.nodeCreator().should('not.exist');
// TODO: Replace once we have canvas feature utils
cy.get('div').contains('Add first step').should('be.hidden');
},
() => {
nodeCreatorFeature.getters.canvasAddButton().should('not.exist');
nodeCreatorFeature.getters.nodeCreator().should('not.exist');
// TODO: Replace once we have canvas feature utils
cy.get('div').contains('Add first step').should('not.exist');
},
);
// TODO: Replace once we have canvas feature utils
cy.get('div').contains('Add first step').should('be.hidden');
nodeCreatorFeature.actions.openNodeCreator();
nodeCreatorFeature.getters.nodeCreator().contains('What happens next?').should('be.visible');
@ -346,7 +356,15 @@ describe('Node Creator', () => {
it('should correctly append a No Op node when Loop Over Items node is added (from connection)', () => {
WorkflowPage.actions.addNodeToCanvas('Manual');
cy.get('.plus-endpoint').should('be.visible').click();
cy.ifCanvasVersion(
() => {
cy.get('.plus-endpoint').click();
},
() => {
cy.getByTestId('canvas-handle-plus').click();
},
);
nodeCreatorFeature.getters.searchBar().find('input').type('Loop Over Items');
nodeCreatorFeature.getters.getCreatorItem('Loop Over Items').click();
@ -531,7 +549,7 @@ describe('Node Creator', () => {
vectorStores.each((_i, vectorStore) => {
nodeCreatorFeature.getters.getCreatorItem(vectorStore).click();
actions.forEach((action) => {
nodeCreatorFeature.getters.getCreatorItem(action).should('be.visible');
nodeCreatorFeature.getters.getCreatorItem(action).should('be.visible').realHover();
});
cy.realPress('ArrowLeft');
});

14
cypress/pages/workflow.ts
View file

@ -58,13 +58,13 @@ export class WorkflowPage extends BasePage {
getEndpointSelector: (type: 'input' | 'output' | 'plus', nodeName: string, index = 0) => {
if (isCanvasV2()) {
if (type === 'input') {
return `[data-test-id="canvas-node-input-handle"][data-node-name="${nodeName}"][data-handle-index="${index}"]`;
return `[data-test-id="canvas-node-input-handle"][data-node-name="${nodeName}"][data-index="${index}"]`;
}
if (type === 'output') {
return `[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"][data-handle-index="${index}"]`;
return `[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"][data-index="${index}"]`;
}
if (type === 'plus') {
return `[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"][data-handle-index="${index}"] [data-test-id="canvas-handle-plus"] .clickable`;
return `[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"][data-index="${index}"] [data-test-id="canvas-handle-plus"]`;
}
}
return `[data-endpoint-name='${nodeName}'][data-endpoint-type='${type}'][data-input-index='${index}']`;
@ -81,7 +81,7 @@ export class WorkflowPage extends BasePage {
() =>
cy
.get(
`[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"] .clickable`,
`[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"]`,
)
.eq(index),
);
@ -103,7 +103,7 @@ export class WorkflowPage extends BasePage {
nodeConnections: () =>
cy.ifCanvasVersion(
() => cy.get('.jtk-connector'),
() => cy.getByTestId('edge-label-wrapper'),
() => cy.getByTestId('edge-label'),
),
zoomToFitButton: () => cy.getByTestId('zoom-to-fit'),
nodeEndpoints: () => cy.get('.jtk-endpoint-connected'),
@ -189,7 +189,7 @@ export class WorkflowPage extends BasePage {
),
() =>
cy.get(
`[data-test-id="edge-label-wrapper"][data-source-node-name="${sourceNodeName}"][data-target-node-name="${targetNodeName}"]`,
`[data-test-id="edge-label"][data-source-node-name="${sourceNodeName}"][data-target-node-name="${targetNodeName}"]`,
),
),
getConnectionActionsBetweenNodes: (sourceNodeName: string, targetNodeName: string) =>
@ -200,7 +200,7 @@ export class WorkflowPage extends BasePage {
),
() =>
cy.get(
`[data-test-id="edge-label-wrapper"][data-source-node-name="${sourceNodeName}"][data-target-node-name="${targetNodeName}"] [data-test-id="canvas-edge-toolbar"]`,
`[data-test-id="edge-label"][data-source-node-name="${sourceNodeName}"][data-target-node-name="${targetNodeName}"] [data-test-id="canvas-edge-toolbar"]`,
),
),
addStickyButton: () => cy.getByTestId('add-sticky-button'),

6
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts
View file

@ -35,7 +35,7 @@ describe('CanvasEdge', () => {
hovered: true,
},
});
await userEvent.hover(getByTestId('edge-label-wrapper'));
await userEvent.hover(getByTestId('edge-label'));
const deleteButton = getByTestId('delete-connection-button');
await userEvent.click(deleteButton);
@ -49,7 +49,7 @@ describe('CanvasEdge', () => {
hovered: true,
},
});
await userEvent.hover(getByTestId('edge-label-wrapper'));
await userEvent.hover(getByTestId('edge-label'));
const addButton = getByTestId('add-connection-button');
@ -65,7 +65,7 @@ describe('CanvasEdge', () => {
},
});
await userEvent.hover(getByTestId('edge-label-wrapper'));
await userEvent.hover(getByTestId('edge-label'));
expect(() => getByTestId('add-connection-button')).toThrow();
expect(() => getByTestId('delete-connection-button')).toThrow();

32
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
View file

@ -118,22 +118,28 @@ function onEdgeLabelMouseLeave() {
</script>
<template>
<BaseEdge
v-for="(segment, index) in segments"
:id="`${id}-${index}`"
:key="segment[0]"
:class="edgeClasses"
:style="edgeStyle"
:path="segment[0]"
:marker-end="markerEnd"
:interaction-width="40"
/>
<g
data-test-id="edge"
:data-source-node-name="data.source?.node"
:data-target-node-name="data.target?.node"
>
<BaseEdge
v-for="(segment, index) in segments"
:id="`${id}-${index}`"
:key="segment[0]"
:class="edgeClasses"
:style="edgeStyle"
:path="segment[0]"
:marker-end="markerEnd"
:interaction-width="40"
/>
</g>
<EdgeLabelRenderer>
<div
data-test-id="edge-label-wrapper"
:data-source-node-name="sourceNode?.label"
:data-target-node-name="targetNode?.label"
data-test-id="edge-label"
:data-source-node-name="data.source?.node"
:data-target-node-name="data.target?.node"
:data-edge-status="status"
:style="edgeToolbarStyle"
:class="edgeToolbarClasses"

2
packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.test.ts
View file

@ -46,7 +46,7 @@ describe('CanvasHandleMainOutput', () => {
},
});
expect(queryByTestId('canvas-handle-plus')).toHaveClass('success');
expect(queryByTestId('canvas-handle-plus-wrapper')).toHaveClass('success');
});
it('should render run data label', async () => {

1
packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
View file

@ -83,7 +83,6 @@ function onClickAdd() {
<CanvasHandlePlus
v-if="!isConnected && !isReadOnly"
v-show="isHandlePlusVisible"
data-test-id="canvas-handle-plus"
:data-plus-type="plusType"
:line-size="plusLineSize"
:handle-classes="handleClasses"

8
packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
View file

@ -96,7 +96,12 @@ function onClick(event: MouseEvent) {
</script>
<template>
<svg :class="classes" :viewBox="`0 0 ${viewBox.width} ${viewBox.height}`" :style="styles">
<svg
data-test-id="canvas-handle-plus-wrapper"
:class="classes"
:viewBox="`0 0 ${viewBox.width} ${viewBox.height}`"
:style="styles"
>
<line
:class="[handleClasses, $style.line]"
:x1="linePosition[0][0]"
@ -107,6 +112,7 @@ function onClick(event: MouseEvent) {
stroke-width="2"
/>
<g
data-test-id="canvas-handle-plus"
:class="[$style.plus, handleClasses, 'clickable']"
:transform="`translate(${plusPosition[0]}, ${plusPosition[1]})`"
@click="onClick"

4
packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.test.ts.snap
View file

@ -1,9 +1,9 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasHandlePlus > should render with default props 1`] = `
"<svg class="wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
"<svg data-test-id="canvas-handle-plus-wrapper" class="wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
<line class="line" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
<g class="plus clickable" transform="translate(46, 0)">
<g data-test-id="canvas-handle-plus" class="plus clickable" transform="translate(46, 0)">
<rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="var(--color-foreground-xlight)"></rect>
<path class="clickable" fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>
</g>

6
packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
View file

@ -345,7 +345,8 @@ onBeforeUnmount(() => {
:is-valid-connection="isValidConnection"
:data-node-name="data.name"
data-test-id="canvas-node-output-handle"
:data-handle-index="source.index"
:data-index="source.index"
:data-connection-type="source.type"
@add="onAdd"
/>
</template>
@ -360,7 +361,8 @@ onBeforeUnmount(() => {
:is-read-only="readOnly"
:is-valid-connection="isValidConnection"
data-test-id="canvas-node-input-handle"
:data-handle-index="target.index"
:data-index="target.index"
:data-connection-type="target.type"
:data-node-name="data.name"
@add="onAdd"
/>