Update e2e - show toolbar on hover bar

KaotoIO · Nov 15, 2024 · f1648e0 · f1648e0
1 parent 6f88c46
commit f1648e0
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 70 deletions.
diff --git a/packages/ui-tests/cypress/e2e/codeEditor/multiFlowEditor.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/multiFlowEditor.cy.ts
@@ -37,7 +37,7 @@ describe('Test for Multi route actions from the code editor', () => {
 
     // CHECK the new empty route was added
     cy.get('[data-testid="flows-list-route-count"]').should('have.text', '3/3');
-    cy.get('g[data-layer-id="default"] text').should('exist').contains('from: Unknown');
+    cy.get('g[data-layer-id="default"]').should('exist').contains('from: Unknown');
   });
 
   it('User deletes second route from multi-route using code editor', () => {
@@ -57,7 +57,7 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
     cy.showAllRoutes();
     /** We check how many nodes are remaining */
-    cy.get('[data-id^="log"][data-kind="node"]').should('have.length', 1);
+    cy.checkNodeExist('log', 1);
     cy.get('[data-testid="flows-list-route-count"]').should('have.text', '2/2');
   });
 
@@ -69,7 +69,7 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
 
     // CHECK the set-header step was added
-    cy.get('[data-type="node"][data-id^="setHeader"]').should('have.length', 1);
+    cy.checkNodeExist('setHeader', 1);
   });
 
   it('User adds step to the second route using code editor', () => {
@@ -81,6 +81,6 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
     cy.showAllRoutes();
     // CHECK the insert-field-action step was added
-    cy.get('[data-type="node"][data-id^="setBody"]').should('have.length', 1);
+    cy.checkNodeExist('setBody', 1);
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
@@ -12,7 +12,7 @@ describe('Test source code editor', () => {
 
     // CHECK that the code editor contains the new timer source step
     cy.openDesignPage();
-    cy.get('[data-id^="json-deserialize-action"]').should('not.exist');
+    cy.checkNodeExist('json-deserialize-action', 0);
   });
 
   it('User adds step to the YAML', () => {
@@ -27,7 +27,7 @@ describe('Test source code editor', () => {
     cy.openDesignPage();
 
     // CHECK the insert-field-action step was added
-    cy.get('[data-type="node"][data-id^="insert-field-action"]').should('have.length', 1);
+    cy.checkNodeExist('insert-field-action', 1);
   });
 
   it('User removes step from the YAML', () => {
@@ -36,7 +36,7 @@ describe('Test source code editor', () => {
     cy.editorDeleteLine(12, 6);
     cy.openDesignPage();
     // CHECK the kafka-sink step was removed
-    cy.get('[data-type="node"][data-id^="sink-"]').should('have.length', 1);
+    cy.checkNodeExist('kafka-sink', 0);
   });
 
   it('User edits step in the YAML', () => {
@@ -48,8 +48,8 @@ describe('Test source code editor', () => {
     cy.openDesignPage();
 
     // CHECK the kafka-sink step was replaced by the aws s3 sink step
-    cy.get('[data-type="node"][data-id^="kafka-sink"]').should('not.exist');
-    cy.get('[data-type="node"][data-id^="aws-s3-sink"]').should('have.length', 1);
+    cy.checkNodeExist('kafka-sink', 0);
+    cy.checkNodeExist('aws-s3-sink', 1);
   });
 
   it('User Deletes branch in the YAML', () => {
@@ -59,8 +59,8 @@ describe('Test source code editor', () => {
     cy.openDesignPage();
 
     // CHECK branch with digitalocean and set header step was deleted
-    cy.get('[data-type="node"][data-id^="digitalocean"]').should('not.exist');
-    cy.get('[data-type="node"][data-id^="setHeader"]').should('not.exist');
+    cy.checkNodeExist('digitalocean', 0);
+    cy.checkNodeExist('setHeader', 0);
   });
 
   it('User Add a new branch in the YAML', () => {
@@ -73,7 +73,7 @@ describe('Test source code editor', () => {
     cy.openDesignPage();
 
     // CHECK branch with atlasmap was created
-    cy.get('[data-type="node"][data-id^="atlasmap"]').should('have.length', 1);
+    cy.checkNodeExist('atlasmap', 1);
   });
 
   it('User undoes a change and redoes a change', () => {
@@ -102,7 +102,7 @@ describe('Test source code editor', () => {
     cy.openDesignPage();
 
     // CHECK the kafka-sink and timer-source were imported
-    cy.get('[data-type="node"][data-id^="kafka-sink"]').should('have.length', 1);
-    cy.get('[data-type="node"][data-id^="timer-source"]').should('have.length', 1);
+    cy.checkNodeExist('kafka-sink', 1);
+    cy.checkNodeExist('timer-source', 1);
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts b/packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts
@@ -0,0 +1,92 @@
+describe('Test toolbar on hover actions', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Replace steps in using hover toolbar', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.openStepConfigurationTab('timer');
+
+    cy.get('[data-testid="step-toolbar-button-replace"]').click();
+    cy.chooseFromCatalog('component', 'quartz');
+
+    cy.checkNodeExist('quartz', 1);
+  });
+
+  it('Delete steps using hover toolbar', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.openStepConfigurationTab('setHeader');
+
+    cy.get('[data-testid="step-toolbar-button-delete"]').click();
+
+    cy.checkNodeExist('setHeader', 0);
+  });
+
+  it('Disable and Enable steps using hover toolbar', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.openStepConfigurationTab('setHeader');
+    cy.get('[data-testid="step-toolbar-button-disable"]').click();
+
+    cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
+    cy.checkConfigCheckboxObject('disabled', true);
+
+    cy.openStepConfigurationTab('setHeader');
+    cy.get('[data-testid="step-toolbar-button-disable"]').click();
+
+    cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
+    cy.checkConfigCheckboxObject('disabled', false);
+  });
+
+  it('Delete route using hover toolbar', () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.openRootConfigurationTab('camel-route');
+
+    cy.get('[data-testid="step-toolbar-button-delete-group"]').click();
+    cy.get('[data-testid="action-confirmation-modal-btn-confirm"]').click();
+
+    cy.get('[data-testid^="rf__node-node_0"]').should('have.length', 0);
+
+    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '0/0');
+    cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
+  });
+
+  it('Add branch using hover toolbar', () => {
+    cy.uploadFixture('flows/kamelet/complex.yaml');
+    cy.openDesignPage();
+
+    cy.openRootConfigurationTab('choice');
+
+    cy.get('[data-testid="step-toolbar-button-add-special"]').click();
+
+    cy.chooseFromCatalog('processor', 'when');
+    cy.checkNodeExist('when', 4);
+    cy.checkNodeExist('log', 2);
+  });
+
+  it('Collapse and unwrap container using hover toolbar', () => {
+    cy.uploadFixture('flows/kamelet/complex.yaml');
+    cy.openDesignPage();
+
+    cy.openRootConfigurationTab('choice');
+
+    cy.get(`[data-testid="step-toolbar-button-collapse"]`).click({ force: true });
+    cy.checkNodeExist('when', 0);
+    cy.checkNodeExist('otherwise', 0);
+    cy.checkNodeExist('log', 0);
+
+    cy.get(`[data-testid="step-toolbar-button-collapse"]`).click({ force: true });
+    cy.checkNodeExist('when', 3);
+    cy.checkNodeExist('otherwise', 1);
+    cy.checkNodeExist('log', 1);
+  });
+});
diff --git a/packages/ui-tests/cypress/e2e/designer/multiflow/multiFlowDesigner.cy.ts b/packages/ui-tests/cypress/e2e/designer/multiflow/multiFlowDesigner.cy.ts
@@ -102,7 +102,7 @@ describe('Test for Multi route actions from the canvas', () => {
 
     cy.showAllRoutes();
     /** We check how many nodes are remaining */
-    cy.get('[data-id^="log"][data-kind="node"]').should('have.length', 3);
+    cy.checkNodeExist('log', 3);
     cy.get('[data-testid="flows-list-route-count"]').should('have.text', '3/3');
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts
@@ -11,37 +11,33 @@ describe('Test for missing config props canvas warnings', () => {
 
     cy.checkNodeExist('github', 1);
 
-    cy.get('[data-id^="github"] g').find('.pf-topology__node__decorator__bg').click();
-    cy.get('.pf-v5-c-tooltip__content').should(
-      'have.text',
-      '3 required parameters are not yet configured: [ type,repoName,repoOwner ]',
-    );
+    cy.get('[data-id^="github"] g')
+      .find('span.pf-v5-c-icon')
+      .should('have.attr', 'title', '3 required parameters are not yet configured: [ type,repoName,repoOwner ]');
 
     cy.openStepConfigurationTab('github');
+
     cy.interactWithConfigInputObject('parameters.repoName', 'test');
     cy.closeStepConfigurationTab();
 
-    cy.get('[data-id^="github"] g').find('.pf-topology__node__decorator__bg').click();
-    cy.get('.pf-v5-c-tooltip__content').should(
-      'have.text',
-      '2 required parameters are not yet configured: [ type,repoOwner ]',
-    );
+    cy.get('[data-id^="github"] g')
+      .find('span.pf-v5-c-icon')
+      .should('have.attr', 'title', '2 required parameters are not yet configured: [ type,repoOwner ]');
   });
 
   it('Check the canvas node warnings in Pipe', () => {
     cy.uploadFixture('flows/pipe/errorHandler.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="delay-action"] g').find('.pf-topology__node__decorator__bg').click();
-    cy.get('.pf-v5-c-tooltip__content').should(
-      'have.text',
-      '1 required parameter is not yet configured: [ milliseconds ]',
-    );
+    cy.get('[data-id^="delay-action"] g')
+      .find('span.pf-v5-c-icon')
+      .should('have.attr', 'title', '1 required parameter is not yet configured: [ milliseconds ]');
 
     cy.openStepConfigurationTab('delay-action');
+
     cy.interactWithConfigInputObject('milliseconds', '1000');
     cy.closeStepConfigurationTab();
 
-    cy.get('[data-id^="delay-action"] g').find('.pf-topology__node__decorator__bg').should('not.exist');
+    cy.get('[data-id^="delay-action"] g').find('span.pf-v5-c-icon').should('not.exist');
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts b/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts
@@ -37,7 +37,7 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
 
-    cy.openStepConfigurationTab('camel-route');
+    cy.openRootConfigurationTab('camel-route');
 
     cy.selectFormTab('All');
     cy.interactWithConfigInputObject('description', 'test.description');
@@ -90,7 +90,7 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/kamelet/basic.yaml');
     cy.openDesignPage();
 
-    cy.openStepConfigurationTab('eip-action');
+    cy.openRootConfigurationTab('eip-action');
 
     cy.selectFormTab('All');
     cy.interactWithConfigInputObject('name', 'test.name');
@@ -130,7 +130,7 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/pipe/basic.yaml');
     cy.openDesignPage();
 
-    cy.openStepConfigurationTab('pipe');
+    cy.openRootConfigurationTab('pipe');
 
     cy.selectFormTab('All');
     cy.get(`input[name="name"]`).clear();

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/errorHandler.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/errorHandler.cy.ts
@@ -6,10 +6,7 @@ describe('Test for errorHandler configuration container', () => {
   it('ErrorHandler types check', () => {
     cy.selectCamelRouteType('Error Handling', 'errorHandler');
 
-    cy.get('[data-id^="errorHandler"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('errorHandler');
     cy.selectFormTab('All');
 
     cy.get('#-oneof-toggle').click();
@@ -30,10 +27,7 @@ describe('Test for errorHandler configuration container', () => {
   it('Root Default error handler configuration', () => {
     cy.selectCamelRouteType('Error Handling', 'errorHandler');
 
-    cy.get('[data-id^="errorHandler"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('errorHandler');
     cy.selectFormTab('All');
 
     cy.get('#-oneof-toggle').click();

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/interceptSendToEndpoint.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/interceptSendToEndpoint.cy.ts
@@ -6,10 +6,8 @@ describe('Test for interceptSendToEndpoint configuration container', () => {
   it('Root interceptSendToEndpoint configuration', () => {
     cy.selectCamelRouteType('Configuration', 'interceptSendToEndpoint');
 
-    cy.get('[data-id^="interceptSendToEndpoint"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.get(`[data-testid^="custom-node__interceptSendToEndpoint"]`).click({ force: true });
+
     cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onCompletion.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onCompletion.cy.ts
@@ -6,10 +6,7 @@ describe('Test for onCompletion configuration container', () => {
   it('Root onCompletion configuration', () => {
     cy.selectCamelRouteType('Configuration', 'onCompletion');
 
-    cy.get('[data-id^="onCompletion"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.get(`[data-testid^="custom-node__onCompletion"]`).click({ force: true });
     cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts
@@ -29,10 +29,8 @@ describe('Test for root on exception container', () => {
     cy.uploadFixture('flows/camelRoute/onException.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="onException"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.get(`[data-testid^="custom-node__onException"]`).click({ force: true });
+
     cy.selectFormTab('All');
     cy.selectInTypeaheadField('redeliveryPolicy.retriesExhaustedLogLevel', 'INFO');
     cy.selectInTypeaheadField('redeliveryPolicy.retryAttemptedLogLevel', 'INFO');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/restConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/restConfiguration.cy.ts
@@ -6,10 +6,8 @@ describe('Test for root on rest configuration container', () => {
   it('Root rest configuration', () => {
     cy.selectCamelRouteType('Rest', 'restConfiguration');
 
-    cy.get('[data-id^="restConfiguration"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('restConfiguration');
+
     cy.selectFormTab('All');
 
     cy.selectInTypeaheadField('component', 'coap');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/routeConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/routeConfiguration.cy.ts
@@ -6,10 +6,8 @@ describe('Test for root route configuration container', () => {
   it('Root route configuration', () => {
     cy.selectCamelRouteType('Configuration', 'routeConfiguration');
 
-    cy.get('[data-id^="routeConfiguration"]')
-      .find('.pf-topology__node__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('routeConfiguration');
+
     cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');

diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -42,8 +42,9 @@ declare global {
       hideAllRoutes(): Chainable<JQuery<Element>>;
       showAllRoutes(): Chainable<JQuery<Element>>;
       // design
+      openRootConfigurationTab(step: string): Chainable<JQuery<Element>>;
       openStepConfigurationTab(step: string, stepIndex?: number): Chainable<JQuery<Element>>;
-      toggleExpandGroup(groupName: string, groupIndex?: number): Chainable<JQuery<Element>>;
+      toggleExpandGroup(groupName: string): Chainable<JQuery<Element>>;
       fitToScreen(): Chainable<JQuery<Element>>;
       closeStepConfigurationTab(): Chainable<JQuery<Element>>;
       closeCatalogModal(): Chainable<JQuery<Element>>;