diff --git a/cypress/composables/workflow.ts b/cypress/composables/workflow.ts index e8e402dd5f..66782f02cf 100644 --- a/cypress/composables/workflow.ts +++ b/cypress/composables/workflow.ts @@ -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( diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts index 5e32d5568c..b70e121fd0 100644 --- a/cypress/e2e/4-node-creator.cy.ts +++ b/cypress/e2e/4-node-creator.cy.ts @@ -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'); }); diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 4d6702b082..69a1becc02 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -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'), diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts index 3a2defc6a0..0e0ac01dfa 100644 --- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts +++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts @@ -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(); diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue index feb15a8cbf..e688c32c9f 100644 --- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue +++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue @@ -118,22 +118,28 @@ function onEdgeLabelMouseLeave() {