From a4a34a2745eda8189ad85d97e49297658b1bf075 Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Thu, 27 Mar 2025 11:59:04 +0200 Subject: [PATCH] fix(editor): Fix nodes and connection debouncing during execution (no-changelog) (#14208) --- cypress/constants.ts | 1 + ...ors-not-rendered-when-nodes-inserted.cy.ts | 46 ++++++++++++++ .../components/canvas/WorkflowCanvas.test.ts | 43 ++----------- .../src/components/canvas/WorkflowCanvas.vue | 63 +++---------------- 4 files changed, 60 insertions(+), 93 deletions(-) create mode 100644 cypress/e2e/726-CAT-canvas-node-connectors-not-rendered-when-nodes-inserted.cy.ts diff --git a/cypress/constants.ts b/cypress/constants.ts index 8186b23db0..6af27f08e8 100644 --- a/cypress/constants.ts +++ b/cypress/constants.ts @@ -42,6 +42,7 @@ export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger'; export const CODE_NODE_NAME = 'Code'; export const SET_NODE_NAME = 'Set'; export const EDIT_FIELDS_SET_NODE_NAME = 'Edit Fields'; +export const LOOP_OVER_ITEMS_NODE_NAME = 'Loop Over Items'; export const IF_NODE_NAME = 'If'; export const MERGE_NODE_NAME = 'Merge'; export const SWITCH_NODE_NAME = 'Switch'; diff --git a/cypress/e2e/726-CAT-canvas-node-connectors-not-rendered-when-nodes-inserted.cy.ts b/cypress/e2e/726-CAT-canvas-node-connectors-not-rendered-when-nodes-inserted.cy.ts new file mode 100644 index 0000000000..f0147187b7 --- /dev/null +++ b/cypress/e2e/726-CAT-canvas-node-connectors-not-rendered-when-nodes-inserted.cy.ts @@ -0,0 +1,46 @@ +import { EDIT_FIELDS_SET_NODE_NAME, LOOP_OVER_ITEMS_NODE_NAME } from '../constants'; +import { NodeCreator } from '../pages/features/node-creator'; +import { NDV } from '../pages/ndv'; +import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; + +const nodeCreatorFeature = new NodeCreator(); +const WorkflowPage = new WorkflowPageClass(); +const NDVModal = new NDV(); + +describe('CAT-726 Node connectors not rendered when nodes inserted on the canvas', () => { + beforeEach(() => { + WorkflowPage.actions.visit(); + }); + + it('should correctly append a No Op node when Loop Over Items node is added (from add button)', () => { + nodeCreatorFeature.actions.openNodeCreator(); + nodeCreatorFeature.getters.searchBar().find('input').type(EDIT_FIELDS_SET_NODE_NAME); + nodeCreatorFeature.getters.getCreatorItem(EDIT_FIELDS_SET_NODE_NAME).click(); + NDVModal.actions.close(); + + WorkflowPage.actions.executeWorkflow(); + + cy.getByTestId('edge-label').realHover(); + cy.getByTestId('add-connection-button').realClick(); + + nodeCreatorFeature.getters.searchBar().find('input').type(LOOP_OVER_ITEMS_NODE_NAME); + nodeCreatorFeature.getters.getCreatorItem(LOOP_OVER_ITEMS_NODE_NAME).click(); + NDVModal.actions.close(); + + WorkflowPage.getters.canvasNodes().should('have.length', 4); + WorkflowPage.getters.nodeConnections().should('have.length', 4); + + WorkflowPage.getters + .getConnectionBetweenNodes(LOOP_OVER_ITEMS_NODE_NAME, 'Replace Me') + .should('exist') + .should('be.visible'); + WorkflowPage.getters + .getConnectionBetweenNodes(LOOP_OVER_ITEMS_NODE_NAME, EDIT_FIELDS_SET_NODE_NAME) + .should('exist') + .should('be.visible'); + WorkflowPage.getters + .getConnectionBetweenNodes('Replace Me', LOOP_OVER_ITEMS_NODE_NAME) + .should('exist') + .should('be.visible'); + }); +}); diff --git a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts index bcf5452e1a..5eeffd8ea2 100644 --- a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts +++ b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts @@ -14,16 +14,13 @@ import { defaultNodeDescriptions, } from '@/__tests__/mocks'; import { useNodeTypesStore } from '@/stores/nodeTypes.store'; -import * as lodash from 'lodash-es'; +import * as vueuse from '@vueuse/core'; -vi.mock('lodash-es', async () => { - const actual = await vi.importActual('lodash-es'); +vi.mock('@vueuse/core', async () => { + const actual = await vi.importActual('@vueuse/core'); return { ...actual, - debounce: vi.fn((fn) => { - // Return a function that immediately calls the provided function - return (...args: unknown[]) => fn(...args); - }), + debouncedRef: vi.fn(actual.debouncedRef as typeof vueuse.debouncedRef), }; }); @@ -157,34 +154,6 @@ describe('WorkflowCanvas', () => { }); describe('debouncing behavior', () => { - beforeEach(() => { - vi.clearAllMocks(); - }); - - it('should initialize debounced watchers on component mount', async () => { - renderComponent(); - - expect(lodash.debounce).toHaveBeenCalledTimes(3); - }); - - it('should configure debouncing with no delay when not executing', async () => { - renderComponent({ - props: { - executing: false, - }, - }); - - expect(lodash.debounce).toHaveBeenCalledTimes(3); - - // Find calls related to our specific debouncing logic - const calls = vi.mocked(lodash.debounce).mock.calls; - const nonExecutingCalls = calls.filter((call) => call[1] === 0 && call[2]?.maxWait === 0); - - expect(nonExecutingCalls.length).toBeGreaterThanOrEqual(2); - expect(nonExecutingCalls[0][1]).toBe(0); - expect(nonExecutingCalls[0][2]).toEqual({ maxWait: 0 }); - }); - it('should configure debouncing with delay when executing', async () => { renderComponent({ props: { @@ -192,10 +161,10 @@ describe('WorkflowCanvas', () => { }, }); - expect(lodash.debounce).toHaveBeenCalledTimes(3); + expect(vueuse.debouncedRef).toHaveBeenCalledTimes(2); // Find calls related to our specific debouncing logic - const calls = vi.mocked(lodash.debounce).mock.calls; + const calls = vi.mocked(vueuse.debouncedRef).mock.calls; const executingCalls = calls.filter((call) => call[1] === 200 && call[2]?.maxWait === 50); expect(executingCalls.length).toBeGreaterThanOrEqual(2); diff --git a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue index 591b9d3174..c4a28527b9 100644 --- a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue +++ b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue @@ -1,15 +1,14 @@