chore(e2e): extend add/replace/remove node in canvas

lordrip · Nov 16, 2023 · 95933c3 · 95933c3
1 parent 6d8e084
commit 95933c3
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 23 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/stepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/stepAddition.cy.ts
@@ -0,0 +1,56 @@
+describe('Tests for Design page', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Design - add steps to CamelRoute', () => {
+    cy.uploadFixture('flows/CamelRoute.yaml');
+    cy.openDesignPage();
+
+    cy.selectAppendNode('setHeader');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('as2');
+    cy.get('#as2').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('as2', 1);
+
+    cy.selectPrependNode('setHeader');
+    cy.get('[data-testid="model-catalog-tab"]').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('log');
+    cy.get('#log').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('log', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: as2', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+
+  it('Design - add steps to Pipe/KB', () => {
+    cy.uploadFixture('flows/KafkaSourceSinkKB.yaml');
+    cy.openDesignPage();
+
+    cy.selectAppendNode('json-deserialize-action');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('log-action');
+    cy.get('#log-action').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('log-action', 1);
+
+    cy.selectPrependNode('json-deserialize-action');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('string-template-action');
+    cy.get('#string-template-action').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('string-template-action', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('log-action', 1);
+    cy.checkCodeSpanLine('string-template-action', 1);
+  });
+});
diff --git a/packages/ui-tests/cypress/e2e/designer.cy.ts → ...ress/e2e/designer/stepConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer.cy.ts → ...ress/e2e/designer/stepConfiguration.cy.ts
@@ -30,23 +30,4 @@ describe('Tests for Design page', () => {
     cy.checkCodeSpanLine('user: user');
     cy.checkCodeSpanLine('password: password');
   });
-
-  it('Design - remove steps from CamelRoute', () => {
-    cy.uploadFixture('flows/CamelRoute.yaml');
-    cy.openDesignPage();
-    cy.removeNodeByName('setHeader');
-    cy.removeNodeByName('log');
-    cy.removeNodeByName('timer');
-    cy.openSourceCode();
-    cy.checkCodeSpanLine('uri: timer:test', 0);
-    cy.checkCodeSpanLine('setHeader', 0);
-    cy.checkCodeSpanLine('constant: test', 0);
-    cy.checkCodeSpanLine('name: test', 0);
-    cy.checkCodeSpanLine('uri: log:test', 0);
-  });
-
-  //   Blocked by - https://github.com/KaotoIO/kaoto-next/issues/253
-  // it('Design - remove steps from Pipe/KB', () => {
-  //   cy.uploadFixture('flows/TimerKafkaKB.yaml');
-  // });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/stepRemoval.cy.ts b/packages/ui-tests/cypress/e2e/designer/stepRemoval.cy.ts
@@ -0,0 +1,38 @@
+describe('Tests for Design page', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Design - remove steps from CamelRoute', () => {
+    cy.uploadFixture('flows/CamelRoute.yaml');
+    cy.openDesignPage();
+    cy.removeNodeByName('setHeader');
+    cy.removeNodeByName('log');
+    cy.removeNodeByName('timer');
+    cy.checkNodeExist('from: Unknown', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: timer:test', 0);
+    cy.checkCodeSpanLine('setHeader', 0);
+    cy.checkCodeSpanLine('constant: test', 0);
+    cy.checkCodeSpanLine('name: test', 0);
+    cy.checkCodeSpanLine('uri: log:test', 0);
+  });
+
+  it('Design - remove steps from Pipe/KB', () => {
+    cy.uploadFixture('flows/KafkaSourceSinkKB.yaml');
+    cy.openDesignPage();
+    cy.removeNodeByName('json-deserialize-action');
+    cy.removeNodeByName('kafka-source');
+    cy.removeNodeByName('kafka-sink');
+    cy.checkNodeExist('source: Unknown', 1);
+    cy.checkNodeExist('sink: Unknown', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('json-deserialize-action', 0);
+    cy.checkCodeSpanLine('kafka-source', 0);
+    cy.checkCodeSpanLine('kafka-sink', 0);
+    cy.checkCodeSpanLine('source: {}', 1);
+    cy.checkCodeSpanLine('sink: {}', 1);
+  });
+});
diff --git a/packages/ui-tests/cypress/e2e/designer/stepReplacement.cy.ts b/packages/ui-tests/cypress/e2e/designer/stepReplacement.cy.ts
@@ -0,0 +1,87 @@
+describe('Tests for Design page', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Design - remove steps from CamelRoute', () => {
+    cy.uploadFixture('flows/CamelRoute.yaml');
+    cy.openDesignPage();
+
+    cy.selectReplaceNode('timer');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('aws s3 storage service');
+    cy.get('#aws2-s3').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('aws2-s3', 1);
+    cy.checkNodeExist('timer', 0);
+
+    cy.selectReplaceNode('setHeader');
+    cy.get('[data-testid="model-catalog-tab"]').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('setBody');
+    cy.get('#setBody').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('setBody', 1);
+    cy.checkNodeExist('setHeader', 0);
+
+    cy.selectReplaceNode('log');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('dropbox');
+    cy.get('#dropbox').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('dropbox', 1);
+    cy.checkNodeExist('log', 0);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: timer', 0);
+    cy.checkCodeSpanLine('setHeader', 0);
+    cy.checkCodeSpanLine('constant: test', 0);
+    cy.checkCodeSpanLine('name: test', 0);
+    cy.checkCodeSpanLine('uri: aws2-s3', 1);
+    cy.checkCodeSpanLine('setBody', 1);
+    cy.checkCodeSpanLine('uri: dropbox', 1);
+  });
+
+  it('Design - remove steps from Pipe/KB', () => {
+    cy.uploadFixture('flows/KafkaSourceSinkKB.yaml');
+    cy.openDesignPage();
+
+    cy.selectReplaceNode('kafka-source');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('aws-s3-cdc-source');
+    cy.get('#aws-s3-cdc-source').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('aws-s3-cdc-source', 1);
+    cy.checkNodeExist('kafka-source', 0);
+
+    cy.selectReplaceNode('json-deserialize-action');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('log action');
+    cy.get('#log-action').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('log-action', 1);
+    cy.checkNodeExist('json-deserialize-action', 0);
+
+    cy.selectReplaceNode('kafka-sink');
+    cy.get('.pf-v5-c-text-input-group__text-input').click();
+    cy.get('.pf-v5-c-text-input-group__text-input').type('dropbox sink');
+    cy.get('#dropbox-sink').should('be.visible').click();
+    // wait for the canvas rerender
+    cy.wait(1000);
+    cy.checkNodeExist('dropbox-sink', 1);
+    cy.checkNodeExist('kafka-sink', 0);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('json-deserialize-action', 0);
+    cy.checkCodeSpanLine('kafka-source', 0);
+    cy.checkCodeSpanLine('kafka-sink', 0);
+    cy.checkCodeSpanLine('aws-s3-cdc-source', 1);
+    cy.checkCodeSpanLine('log-action', 1);
+    cy.checkCodeSpanLine('dropbox-sink', 1);
+  });
+});
diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -22,6 +22,11 @@ declare global {
       fitToScreen(): Chainable<JQuery<Element>>;
       closeStepConfigurationTab(): Chainable<JQuery<Element>>;
       removeNodeByName(inputName: string): Chainable<JQuery<Element>>;
+      selectReplaceNode(inputName: string): Chainable<JQuery<Element>>;
+      selectAppendNode(inputName: string): Chainable<JQuery<Element>>;
+      selectPrependNode(inputName: string): Chainable<JQuery<Element>>;
+      performNodeAction(nodeName: string, action: string): Chainable<JQuery<Element>>;
+      checkNodeExist(inputName: string, nodesCount: number): Chainable<JQuery<Element>>;
       // metadata
       expandWrappedSection(sectionName: string): Chainable<JQuery<Element>>;
       closeWrappedSection(sectionName: string): Chainable<JQuery<Element>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -20,12 +20,34 @@ Cypress.Commands.add('interactWithConfigInputObject', (inputName, value) => {
   }
 });
 
-Cypress.Commands.add('removeNodeByName', (inputName: string) => {
+Cypress.Commands.add('removeNodeByName', (nodeName: string) => {
+  cy.performNodeAction(nodeName, 'remove');
+  cy.get(nodeName).should('not.exist');
+});
+
+Cypress.Commands.add('selectReplaceNode', (nodeName: string) => {
+  cy.performNodeAction(nodeName, 'replace');
+});
+
+Cypress.Commands.add('selectAppendNode', (nodeName: string) => {
+  cy.performNodeAction(nodeName, 'append');
+});
+
+Cypress.Commands.add('selectPrependNode', (nodeName: string) => {
+  cy.performNodeAction(nodeName, 'prepend');
+});
+
+// allowed actions - append, prepend, replace, remove
+Cypress.Commands.add('performNodeAction', (nodeName: string, action: string) => {
   cy.get('g.pf-topology__node__label')
-    .contains('text', inputName)
+    .contains('text', nodeName)
     .parent()
     .find('g.pf-topology__node__action-icon > rect')
     .click({ force: true });
-  cy.get('[data-testid="context-menu-item-remove"]').click();
-  cy.get(inputName).should('not.exist');
+  cy.get(`[data-testid="context-menu-item-${action}"]`).click();
+});
+
+Cypress.Commands.add('checkNodeExist', (inputName, nodesCount) => {
+  nodesCount = nodesCount ?? 1;
+  cy.get('g.pf-topology__node__label').contains('text', inputName).should('have.length', nodesCount);
 });