diff --git a/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts index b0b64d889..d95cc8f3d 100644 --- a/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts +++ b/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts @@ -43,7 +43,7 @@ describe('Test for Multi route actions from the code editor', () => { cy.openDesignPage(); cy.checkNodeExist('id', 1); cy.openStepConfigurationTab('id'); - cy.get('[data-ouia-component-id^="OUIA-Generated-Title"]').should('have.text', 'id'); + cy.get('[data-ouia-component-id^="OUIA-Generated-Title"]').should('have.text', 'route.from.steps.1.id'); cy.closeStepConfigurationTab(); // Related issue to provide more info https://github.com/KaotoIO/kaoto/issues/309 // verify the route wasn't removed and left for the user to repair diff --git a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts index 9b4f815ea..a2c2b80c4 100644 --- a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts +++ b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts @@ -61,7 +61,10 @@ describe('Test for Branching actions from the canvas', () => { cy.chooseFromCatalog('component', 'activemq'); cy.checkNodeExist('activemq', 1); - cy.checkEdgeExists('setHeader', 'activemq'); + cy.checkEdgeExists( + 'template.from.steps.1.choice.when.0.steps.1.setHeader', + 'template.from.steps.1.choice.when.0.steps.2.to', + ); }); it('User prepends a step in a branch from the canvas (first in the branch)', () => { @@ -73,7 +76,10 @@ describe('Test for Branching actions from the canvas', () => { cy.chooseFromCatalog('component', 'activemq'); cy.checkNodeExist('activemq', 1); - cy.checkEdgeExists('activemq', 'digitalocean'); + cy.checkEdgeExists( + 'template.from.steps.1.choice.when.0.steps.0.to', + 'template.from.steps.1.choice.when.0.steps.1.to', + ); }); it('User prepends a step to a step whose previous step contains branches', () => { @@ -85,6 +91,6 @@ describe('Test for Branching actions from the canvas', () => { cy.chooseFromCatalog('component', 'activemq'); cy.checkNodeExist('activemq', 1); - cy.checkEdgeExists('activemq', 'filter'); + cy.checkEdgeExists('template.from.steps.2.to', 'template.from.steps.3.filter'); }); }); diff --git a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts index 4cf9548f1..72289b7ba 100644 --- a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts +++ b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts @@ -12,7 +12,7 @@ describe('Test for missing config props canvas warnings', () => { cy.checkNodeExist('github', 1); - cy.get('[data-id^="github"] g') + cy.get('[data-id^="camel-route|route.from.steps.1.to"] g') .find('span[data-warning="true"].pf-v5-c-icon') .should('have.attr', 'title', '3 required parameters are not yet configured: [ type,repoName,repoOwner ]'); @@ -21,7 +21,7 @@ describe('Test for missing config props canvas warnings', () => { cy.interactWithConfigInputObject('parameters.repoName', 'test'); cy.closeStepConfigurationTab(); - cy.get('[data-id^="github"] g') + cy.get('[data-id^="camel-route|route.from.steps.1.to"] g') .find('span[data-warning="true"].pf-v5-c-icon') .should('have.attr', 'title', '2 required parameters are not yet configured: [ type,repoOwner ]'); }); @@ -30,7 +30,7 @@ describe('Test for missing config props canvas warnings', () => { cy.uploadFixture('flows/pipe/errorHandler.yaml'); cy.openDesignPage(); - cy.get('[data-id^="delay-action"] g') + cy.get('[data-id^="webhook-binding|delay-action"] g') .find('span[data-warning="true"].pf-v5-c-icon') .should('have.attr', 'title', '1 required parameter is not yet configured: [ milliseconds ]'); @@ -39,6 +39,8 @@ describe('Test for missing config props canvas warnings', () => { cy.interactWithConfigInputObject('milliseconds', '1000'); cy.closeStepConfigurationTab(); - cy.get('[data-id^="delay-action"] g').find('span[data-warning="true"].pf-v5-c-icon').should('not.exist'); + cy.get('[data-id^="webhook-binding|delay-action"] g') + .find('span[data-warning="true"].pf-v5-c-icon') + .should('not.exist'); }); }); diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts index b061a7d43..ed39aea91 100644 --- a/packages/ui-tests/cypress/support/next-commands/design.ts +++ b/packages/ui-tests/cypress/support/next-commands/design.ts @@ -106,13 +106,13 @@ Cypress.Commands.add('checkNodeExist', (inputName, nodesCount) => { }); Cypress.Commands.add('checkEdgeExists', (sourceName: string, targetName: string) => { - const idPattern = sourceName + '-\\d+-to-' + targetName + '-\\d+'; + const idPattern = `${sourceName} >>> ${targetName}`; // Check if an element with the matching id exists cy.get('g').should(($elements) => { // Use Cypress commands to check if any element matches the id pattern const matchingElementExists = $elements.toArray().some((element) => { const dataId = Cypress.$(element).attr('data-id'); - return dataId && dataId.match(idPattern); + return dataId === idPattern; }); // Assert that at least one matching element exists expect(matchingElementExists).to.be.true; diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx index 1f6c261ad..6f6af11b7 100644 --- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx +++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx @@ -74,7 +74,7 @@ export const Canvas: FunctionComponent> = ({ enti entities.forEach((entity) => { if (visibleFlows[entity.id]) { - const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.toVizNode()); + const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.id, entity.toVizNode()); nodes.push(...childNodes); edges.push(...childEdges); } diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx index 105c3f3f6..a019ede7c 100644 --- a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx +++ b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx @@ -16,7 +16,7 @@ describe('CanvasSideBar', () => { const camelResource = new CamelRouteResource(); camelResource.addNewEntity(EntityType.Route); const visualEntity = camelResource.getVisualEntities()[0]; - selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0]; + selectedNode = FlowService.getFlowDiagram('test', visualEntity.toVizNode()).nodes[0]; Provider = TestProvidersWrapper({ camelResource }).Provider; }); diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx index 81f73fcc2..b2280ac38 100644 --- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx +++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx @@ -53,7 +53,7 @@ describe('CanvasForm', () => { beforeEach(() => { camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[2]; // choice }); @@ -146,7 +146,7 @@ describe('CanvasForm', () => { const flowId = camelRouteVisualEntity.id; const dispatchSpy = jest.fn(); const visualFlowsApi = new VisualFlowsApi(dispatchSpy); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[nodes.length - 1]; render( @@ -183,7 +183,7 @@ describe('CanvasForm', () => { const flowId = camelRouteVisualEntity.id; const dispatchSpy = jest.fn(); const visualFlowsApi = new VisualFlowsApi(dispatchSpy); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[nodes.length - 1]; render( @@ -221,7 +221,7 @@ describe('CanvasForm', () => { const newName = 'MyNewId'; const dispatchSpy = jest.fn(); const visualFlowsApi = new VisualFlowsApi(dispatchSpy); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[nodes.length - 1]; render( @@ -261,7 +261,7 @@ describe('CanvasForm', () => { const newName = 'MyNewName'; const dispatchSpy = jest.fn(); const visualFlowsApi = new VisualFlowsApi(dispatchSpy); - const { nodes } = FlowService.getFlowDiagram(kameletVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', kameletVisualEntity.toVizNode()); selectedNode = nodes[nodes.length - 1]; render( @@ -293,7 +293,7 @@ describe('CanvasForm', () => { describe('should show the User-updated field under the modified tab', () => { beforeEach(() => { camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[0]; // timer }); @@ -630,7 +630,7 @@ describe('CanvasForm', () => { describe('should show the Required field under the required tab', () => { beforeEach(() => { camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson); - const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode()); + const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode()); selectedNode = nodes[0]; // timer }); diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap index 03cfcc1df..6c6f4c108 100644 --- a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap +++ b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap @@ -23,7 +23,7 @@ exports[`CanvasForm should render 1`] = ` > icon

- log + route.from.steps.1.choice.when.0.steps.0.log