From 95933c36caa3d583b36265ffcc9f0ca6a30ee3cb Mon Sep 17 00:00:00 2001 From: tplevko Date: Wed, 15 Nov 2023 16:10:12 +0100 Subject: [PATCH] chore(e2e): extend add/replace/remove node in canvas --- .../cypress/e2e/designer/stepAddition.cy.ts | 56 ++++++++++++ .../stepConfiguration.cy.ts} | 19 ---- .../cypress/e2e/designer/stepRemoval.cy.ts | 38 ++++++++ .../e2e/designer/stepReplacement.cy.ts | 87 +++++++++++++++++++ .../ui-tests/cypress/support/cypress.d.ts | 5 ++ .../cypress/support/next-commands/design.ts | 30 ++++++- 6 files changed, 212 insertions(+), 23 deletions(-) create mode 100644 packages/ui-tests/cypress/e2e/designer/stepAddition.cy.ts rename packages/ui-tests/cypress/e2e/{designer.cy.ts => designer/stepConfiguration.cy.ts} (65%) create mode 100644 packages/ui-tests/cypress/e2e/designer/stepRemoval.cy.ts create mode 100644 packages/ui-tests/cypress/e2e/designer/stepReplacement.cy.ts diff --git a/packages/ui-tests/cypress/e2e/designer/stepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/stepAddition.cy.ts new file mode 100644 index 000000000..b88079f9e --- /dev/null +++ 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 b/packages/ui-tests/cypress/e2e/designer/stepConfiguration.cy.ts similarity index 65% rename from packages/ui-tests/cypress/e2e/designer.cy.ts rename to packages/ui-tests/cypress/e2e/designer/stepConfiguration.cy.ts index f458192e5..5dcd9ec7c 100644 --- a/packages/ui-tests/cypress/e2e/designer.cy.ts +++ b/packages/ui-tests/cypress/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 new file mode 100644 index 000000000..ae4ffe45b --- /dev/null +++ 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 new file mode 100644 index 000000000..63b7f741d --- /dev/null +++ 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 index bee7907ee..21ac3de17 100644 --- 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>; closeStepConfigurationTab(): Chainable>; removeNodeByName(inputName: string): Chainable>; + selectReplaceNode(inputName: string): Chainable>; + selectAppendNode(inputName: string): Chainable>; + selectPrependNode(inputName: string): Chainable>; + performNodeAction(nodeName: string, action: string): Chainable>; + checkNodeExist(inputName: string, nodesCount: number): Chainable>; // metadata expandWrappedSection(sectionName: string): Chainable>; closeWrappedSection(sectionName: string): Chainable>; diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts index f73a2c9d4..b64d0b899 100644 --- 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); });