Skip to content
This repository has been archived by the owner on Nov 27, 2023. It is now read-only.

Commit

Permalink
chore(e2e): update E2E 10-branching_actions tests (#1516)
Browse files Browse the repository at this point in the history 
* Add/fix cypress commands,

* Rename 09-step test

* Update e2e test for 10-branching actions

---------

Co-authored-by: Rachel Yordán <[email protected]>
  • Loading branch information
@unsortedhashsets @kahboom
unsortedhashsets and kahboom authored Mar 21, 2023
1 parent b1c6b90 commit c93c6e1
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 404 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/09-step_actions_from_canvas/step_extension_actions_from_canvas.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('Test for Step extensions', () => {
cy.uploadInitialState('TimerLogCamelRoute.yaml');
});

it('User sees a step extension(http)', () => {
it('User sees a step extension(transform)', () => {
cy.insertStepMiniCatalog('transform');
cy.openStepConfigurationTab('transform');

Expand Down
193 changes: 51 additions & 142 deletions cypress/e2e/10-branching_actions_from_canvas/branches_from_canvas.cy.js
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,95 @@
describe('Test for Branching actions from the canvas', () => {
beforeEach(() => {
let url = Cypress.config().baseUrl;
cy.visit(url);

cy.intercept('/v1/integrations/dsls').as('getDSLs');
cy.intercept('/v1/view-definitions').as('getViewDefinitions');
cy.intercept('/v1/integrations*').as('getIntegration');

// Upload the initial state (TimerLogCamelRoute.yaml)
cy.get('[data-testid="toolbar-show-code-btn"]').click();
cy.get('[data-testid="sourceCode--clearButton"]').should('be.visible').click({ force: true });
cy.get('.pf-c-code-editor__main').should('be.visible');
cy.get('.pf-c-code-editor__main > input').attachFile('EipAction.yaml');
cy.get('[data-testid="sourceCode--applyButton"]').click();
cy.openHomePage();
cy.uploadInitialState('EipAction.yaml');

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
cy.zoomOutXTimes(3)
});

it(' User appends a branch from the canvas', () => {
// Add additional branch with Append button
cy.get('[data-testid="viz-step-choice"]').first().children('[data-testid="stepNode__appendStep-btn"]').click();
// Click on the add branch menu item
cy.get('[data-testid="miniCatalog__branches"]').click();
// Click on the add branch button to add first branch
cy.get('[data-testid="addBranch__button"]').click();
// Blocked due to:
// https://github.com/KaotoIO/kaoto-ui/issues/1381
// https://github.com/KaotoIO/kaoto-ui/issues/1473
// cy.appendBranch(0);

// Temporary Blocker check
cy.get('[data-testid="viz-step-choice"]').eq(0).children('[data-testid="stepNode__appendStep-btn"]').should('be.disabled');

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();
// Temporary solution with Choice extension
cy.openStepConfigurationTab('choice', 0);
cy.addBranchChoiceExtension();
cy.closeStepConfigurationTab();

// CHECK that new node with empty slot was created
cy.get('[data-testid="viz-step-choice"]').should('have.length', 2);
cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
cy.get('.stepNode').eq(12).should('have.attr', 'data-testid', 'viz-step-slot');

// Blocked due to: https://github.com/KaotoIO/kaoto-ui/issues/1381
// // wait until the API returns the updated visualization
// cy.wait('@getViewDefinitions')

// // Click Sync you code button to verify that generated code is equal to canvas
// cy.get('[data-testid="sourceCode--applyButton"]').click();
cy.get('.stepNode').eq(10).should('have.attr', 'data-testid', 'viz-step-slot');

// // wait until the API returns the updated visualization
// cy.wait('@getViewDefinitions')
cy.syncUpCodeChanges()

// // CHECK after Sync your code button click
// cy.get('[data-testid="viz-step-choice"]').should('have.length', 2);
// cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
// cy.get('.stepNode').eq(12).should('have.attr', 'data-testid', 'viz-step-slot');
// CHECK after Sync your code button click
cy.get('[data-testid="viz-step-choice"]').should('have.length', 2);
cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
cy.get('.stepNode').eq(10).should('have.attr', 'data-testid', 'viz-step-slot');
});

it('User deletes a branch from the canvas', () => {
// Delete the first branch with digitalocean step
cy.get('[data-testid="stepNode__deleteBranch-btn"]').eq(0).click();
// Confirm the deletion
cy.get('[data-testid="confirmDeleteBranchDialog__btn"]').click();

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();
cy.deleteBranch(1);

// CHECK that the branch was deleted and the node with index 11 contains the viz-step-kamelet:sink
cy.get('[data-testid="viz-step-digitalocean"]').should('not.exist');
cy.get('[data-testid="viz-step-marshal"]').should('not.exist');
cy.get('.stepNode').eq(11).should('have.attr', 'data-testid', 'viz-step-kamelet:sink');
cy.get('.code-editor').should('not.contain.text', '{{?bar}}')

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')

// Click Sync you code button to verify that generated code is equal to canvas
cy.get('[data-testid="sourceCode--applyButton"]').click();

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
cy.syncUpCodeChanges()

// CHECK after Sync your code button click
cy.get('[data-testid="viz-step-digitalocean"]').should('not.exist');
cy.get('[data-testid="viz-step-marshal"]').should('not.exist');
cy.get('.stepNode').eq(11).should('have.attr', 'data-testid', 'viz-step-kamelet:sink');
cy.get('.code-editor').should('not.contain.text', '{{?bar}}')
});

it('User inserts a branch from the canvas', () => {
// Insert additional choice step to show insert Button
cy.get('[data-testid="stepNode__insertStep-btn"]').first().click();
// Open the miniCatalog
cy.get('[data-testid="miniCatalog"]').should('be.visible');
// Search activemq step
cy.get('.pf-c-text-input-group__text-input').type('choice');
// Select activemq step
cy.get('[data-testid="miniCatalog__stepItem--choice"]').first().click();
cy.insertStepMiniCatalog('choice', 0);

// CHECK new choice step added
cy.get('.stepNode').eq(1).should('have.attr', 'data-testid', 'viz-step-choice');
// Blocked due to:
// https://github.com/KaotoIO/kaoto-ui/issues/1381
// https://github.com/KaotoIO/kaoto-ui/issues/1473
// cy.insertBranch(1);

// Insert branch after additional choice step
cy.get('[data-testid="stepNode__insertStep-btn"]').eq(1).click();
// Open the miniCatalog
cy.get('[data-testid="miniCatalog"]').should('be.visible');
// Click on the add branch menu item
cy.get('[data-testid="miniCatalog__branches"]').click();
// Click on the add branch button to add first branch
cy.get('[data-testid="addBranch__button"]').click();

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();

// CHECK that new node with empty slot was created
cy.get('[data-testid="viz-step-choice"]').should('have.length', 3);
cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
cy.get('.stepNode').eq(2).should('have.attr', 'data-testid', 'viz-step-slot');

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
// // CHECK that new node with empty slot was created
// cy.get('[data-testid="viz-step-choice"]').should('have.length', 3);
// cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
// cy.get('.stepNode').eq(2).should('have.attr', 'data-testid', 'viz-step-slot');

// Click Sync you code button to verify that generated code is equal to canvas
cy.get('[data-testid="sourceCode--applyButton"]').click();
// cy.syncUpCodeChanges()

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
// // CHECK after Sync your code button click
// cy.get('[data-testid="viz-step-choice"]').should('have.length', 3);
// cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
// cy.get('.stepNode').eq(2).should('have.attr', 'data-testid', 'viz-step-slot');

// CHECK after Sync your code button click
cy.get('[data-testid="viz-step-choice"]').should('have.length', 3);
cy.get('[data-testid="viz-step-slot"]').should('have.length', 1);
cy.get('.stepNode').eq(2).should('have.attr', 'data-testid', 'viz-step-slot');
// Temporary Blocker check
cy.get('[data-testid="stepNode__insertStep-btn"]').eq(1).click();
cy.get('[data-testid="miniCatalog__branches"]').should('have.attr', 'aria-disabled', 'true')
});

it('User appends a step in a branch from the canvas (last in the branch)', () => {
// Click append button after set-header step
cy.get('[data-testid="stepNode__appendStep-btn"]').eq(2).click();
// Open the miniCatalog
cy.get('[data-testid="miniCatalog"]').should('be.visible');
// Search activemq step
cy.get('.pf-c-text-input-group__text-input').type('activemq');
// Select activemq step
cy.get('[data-testid="miniCatalog__stepItem--activemq"]').first().click();

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();
cy.appendStepMiniCatalog('set-header', 'activemq');

// CHECK that the activemq step was inserted between digitalocean and set-header steps
cy.get('.stepNode').eq(4).should('have.attr', 'data-testid', 'viz-step-digitalocean');
cy.get('.stepNode').eq(5).should('have.attr', 'data-testid', 'viz-step-set-header');
cy.get('.stepNode').eq(6).should('have.attr', 'data-testid', 'viz-step-activemq');
cy.get('[data-testid="viz-step-activemq"]').should('be.visible');

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')

// Click Sync you code button to verify that generated code is equal to canvas
cy.get('[data-testid="sourceCode--applyButton"]').click();

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
cy.syncUpCodeChanges()

// CHECK after Sync your code button click
cy.get('.stepNode').eq(4).should('have.attr', 'data-testid', 'viz-step-digitalocean');
Expand All @@ -156,32 +99,15 @@ describe('Test for Branching actions from the canvas', () => {
});

it('User prepends a step in a branch from the canvas (first in the branch)', () => {
// Click prepend button before set-header step
cy.get('[data-testid="stepNode__prependStep-btn"]').eq(2).click();
// Open the miniCatalog
cy.get('[data-testid="miniCatalog"]').should('be.visible');
// Search activemq step
cy.get('.pf-c-text-input-group__text-input').type('activemq');
// Select activemq step
cy.get('[data-testid="miniCatalog__stepItem--activemq"]').first().click();

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();
cy.prependStepMiniCatalog('digitalocean', 'activemq');

// CHECK that the activemq step was inserted between digitalocean and set-header steps
cy.get('.stepNode').eq(4).should('have.attr', 'data-testid', 'viz-step-activemq');
cy.get('.stepNode').eq(5).should('have.attr', 'data-testid', 'viz-step-digitalocean');
cy.get('.stepNode').eq(6).should('have.attr', 'data-testid', 'viz-step-set-header');
cy.get('[data-testid="viz-step-activemq"]').should('be.visible');

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')

// Click Sync you code button to verify that generated code is equal to canvas
cy.get('[data-testid="sourceCode--applyButton"]').click();

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
cy.syncUpCodeChanges()

// CHECK after Sync your code button click
cy.get('.stepNode').eq(4).should('have.attr', 'data-testid', 'viz-step-activemq');
Expand All @@ -191,17 +117,7 @@ describe('Test for Branching actions from the canvas', () => {
});

it('User prepends a step to a step whose previous step contains branches', () => {
// Click prepend button before filter step
cy.get('[data-testid="stepNode__prependStep-btn"]').last().click();
// Open the miniCatalog
cy.get('[data-testid="miniCatalog"]').should('be.visible');
// Search activemq step
cy.get('.pf-c-text-input-group__text-input').type('activemq');
// Select activemq step
cy.get('[data-testid="miniCatalog__stepItem--activemq"]').first().click();

// Zoom out to see the whole scheme, 3x
cy.get('.react-flow__controls-button.react-flow__controls-zoomout').click().click().click();
cy.prependStepMiniCatalog('filter', 'activemq');

// CHECK that the activemq step was prepended before filter and after all the branches ends
cy.get('.stepNode').eq(5).should('have.attr', 'data-testid', 'viz-step-set-header');
Expand All @@ -212,14 +128,7 @@ describe('Test for Branching actions from the canvas', () => {
cy.get('.stepNode').eq(13).should('have.attr', 'data-testid', 'viz-step-filter');
cy.get('[data-testid="viz-step-activemq"]').should('be.visible');

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')

// Click Sync you code button to verify that generated code is equal to canvas
cy.get('[data-testid="sourceCode--applyButton"]').click();

// wait until the API returns the updated visualization
cy.wait('@getViewDefinitions')
cy.syncUpCodeChanges()

// CHECK after Sync your code button click
cy.get('.stepNode').eq(5).should('have.attr', 'data-testid', 'viz-step-set-header');
Expand Down
2 changes: 2 additions & 0 deletions cypress/e2e/10-branching_actions_from_canvas/branches_step_actions_from_canvas.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ describe('User completes normal actions on steps in a branch', () => {

cy.openHomePage();
cy.uploadInitialState('EipAction.yaml');

cy.zoomOutXTimes(3)
});

it('User configures a step in a branch', () => {
Expand Down
Loading

0 comments on commit c93c6e1

Please sign in to comment.