Refactor e2e tests 4/5/6/8, fix autoScrolling issue

cypress.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     viewportWidth: 1920,
     viewportHeight: 1080,
+    scrollBehavior: false,
   },
 
   component: {

cypress/e2e/04-source_code/source_code.cy.js

@@ -1,51 +1,18 @@
 describe('source code and drag and drop', () => {
-  before(() => {
-    let url = Cypress.config().baseUrl;
-
+  beforeEach(() => {
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
     cy.intercept('/v1/integrations*').as('getIntegration');
 
-    cy.visit(url);
+    cy.openHomePage();
+    cy.uploadFixture('KafkaSourceSink.yaml');
   });
 
   it('loads the YAML editor and synchronizes steps with visualization', () => {
-    const dataTransfer = new DataTransfer();
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
-
-    // LOAD FIXTURE
-    // attaches the file as an input, NOT drag-and-drop, as that will
-    // create a dropzone overlay that then prevents you from typing
-    cy.get('.pf-c-code-editor__main').should('be.visible');
-    cy.get('.pf-c-code-editor__main > input').attachFile('KafkaSourceSink.yaml');
-
-    // trigger the visualization to update
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
-
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
+    cy.dragAndDropFromCatalog('timer-source', 'kafka-source', 'start');
 
-    // open catalog, search for timer step
-    cy.get('[data-testid="toolbar-step-catalog-btn"]').click();
-    cy.get('#stepSearch').type('timer-source');
-
-    cy.get('[data-testid="catalog-step-timer-source"]').trigger('dragstart', {
-      dataTransfer,
-    });
-
-    // drag timer source from catalog over existing kafka step
-    cy.get('[data-testid="viz-step-kafka-source"]').trigger('drop', {
-      dataTransfer,
-    });
-
-    // wait for API to sync code editor & visualization
-    cy.wait('@getIntegration');
-
-    // verify that the code editor contains the new timer source step
+    // CHECK that the code editor contains the new timer source step
     cy.get('[data-testid="toolbar-show-code-btn"]').click();
-
     cy.get('.pf-c-code-editor__code').contains('timer-source').should('exist');
   });
 });

cypress/e2e/05-deleting_steps/deleting_steps.cy.js

@@ -1,65 +1,30 @@
 describe('Test for deleting steps', () => {
-  before(() => {
-    let url = Cypress.config().baseUrl;
-
+  beforeEach(() => {
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
     cy.intercept('/v1/integrations*').as('getIntegration');
-    cy.intercept('/v1/deployments*').as('getDeployments');
 
-    cy.visit(url);
+    cy.openHomePage();
+    cy.uploadFixture('ChuckNorris.yaml');
   });
 
   it('verifies that deleting a step gets updated in the code editor', () => {
-    // show the code editor
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
-
-    // LOAD FIXTURE
-    // wait for the editor to be visible and attaches the file as an
-    // input, NOT drag-and-drop, as that will create a dropzone overlay
-    // that then prevents you from typing
-    cy.get('.pf-c-code-editor__main').should('be.visible');
-    cy.get('.pf-c-code-editor__main > input').attachFile('ChuckNorris.yaml');
-
-    // trigger the visualization to update
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
-
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
-
-    // delete step
-    cy.get('[data-testid="viz-step-chuck-norris-source"]').trigger('mouseover');
-    cy.get(
-      '[data-testid="viz-step-chuck-norris-source"] > [data-testid="configurationTab__deleteBtn"]'
-    ).click({ force: true });
-
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-
+    cy.deleteStep('chuck-norris-source');
+    // Check that YAML was updated
     cy.get('.code-editor').contains('chuck-norris-source').should('not.exist');
 
-    // delete step
-    cy.get('[data-testid="viz-step-chunk-template-action"]').trigger('mouseover');
-    cy.get(
-      '[data-testid="viz-step-chunk-template-action"] > [data-testid="configurationTab__deleteBtn"]'
-    ).click({ force: true });
-
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-
+    cy.deleteStep('chunk-template-action');
+    // Check that YAML was updated
     cy.get('.code-editor').contains('chunk-template-action').should('not.exist');
 
-    // delete step
-    cy.get('[data-testid="viz-step-kafka-sink"]').trigger('mouseover');
-    cy.get(
-      '[data-testid="viz-step-kafka-sink"] > [data-testid="configurationTab__deleteBtn"]'
-    ).click({ force: true });
-
-    cy.wait('@getIntegration');
+    cy.deleteStep('kafka-sink');
+    // Check that YAML was updated
     cy.get('.code-editor').contains('viz-step-kafka-sink').should('not.exist');
 
-    cy.get('[data-testid="react-flow-wrapper"]').contains('ADD A STEP').should('exist');
+    // Check that the canvas is empty
+    cy.get('[data-testid="react-flow-wrapper"]').contains('ADD A STEP').should('be.visible');
+    // Check init state hint arrow and text were shown
+    cy.get('[data-testid="nodeHintArrow"]').contains('⤹').should('be.visible');
+    cy.get('[data-testid="nodeHintText"]').contains('click on a node to add a step.').should('be.visible');
   });
 });

cypress/e2e/06-undo_redo_actions/undo_redo_actions.cy.js

@@ -1,56 +1,36 @@
 describe('Test for undo/redo actions on code-editor', () => {
   before(() => {
-    let url = Cypress.config().baseUrl;
-
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
     cy.intercept('/v1/integrations*').as('getIntegration');
-    cy.intercept('/v1/deployments*').as('getDeployments');
-
-    cy.visit(url);
-  });
-
-  it("undoes and redoes the user's changes, updating the visualization respectively", () => {
-    // open the source code editor
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
-    cy.get('[data-testid="sourceCode--clearButton"]').should('be.visible').click({ force: true });
-    // LOAD FIRST FIXTURE
-    // attaches the file as an input, NOT drag-and-drop, as that will
-    // create a dropzone overlay that then prevents you from typing
-    cy.get('.pf-c-code-editor__main').should('be.visible');
-    cy.get('.pf-c-code-editor__main > input').attachFile('KafkaSourceSink.yaml');
-
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
 
-    cy.wait('@getIntegration');
-    // trigger the visualization to update
-    cy.get('.pf-c-file-upload').click().type('{end} ');
+    cy.openHomePage();
 
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
+    cy.uploadFixture('KafkaSourceSink.yaml');
+  });
 
+  // Blocked by https://github.com/KaotoIO/kaoto-ui/issues/1275
+  it.skip("undoes and redoes the user's changes, updating the visualization respectively", () => {
     // CHECK THE VISUALIZATION CANVAS HAS UPDATED ACCORDINGLY
     cy.get('[data-testid="viz-step-kafka-sink"]').should('be.visible');
     cy.get('[data-testid="viz-step-kafka-source"]').should('be.visible');
 
-    // Blocked by https://github.com/KaotoIO/kaoto-ui/issues/1275
-
     // LOAD SECOND FIXTURE
-    // now we will try to upload a different YAML spec
-    // cy.get('[data-testid="sourceCode--clearButton"]').click({force: true});
-    // cy.get('.pf-c-code-editor__main > input').attachFile('ChuckNorris.yaml');
-    // cy.get('.pf-c-file-upload').click().type('{end} ');
+    cy.uploadFixture('ChuckNorris.yaml', false);
 
-    // cy.wait('@getIntegration');
+    // CHECK THE VISUALIZATION CANVAS HAS UPDATED ACCORDINGLY
+    cy.get('[data-testid="viz-step-chuck-norris-source"]').should('be.visible');
+    cy.get('[data-testid="viz-step-chunk-template-action"]').should('be.visible');
+    cy.get('[data-testid="viz-step-kafka-sink"]').should('be.visible');
 
     // ...and revert to the previous one
     // note: must click three times:
     // 1. to undo the previous 'enter',
     // 2. to undo the file upload, and
     // 3. to undo the first 'enter', reverting it to the original kafka-source-sink spec)
-    // cy.get('[data-testid="sourceCode--undoButton"]').click();
-    // cy.get('.pf-c-code-editor__code').contains('kafka-source');
+    // cy.editorClickUndoXTimes(3);
+    // CHECK THE INITIAL STATE
+    // cy.get('[data-testid="viz-step-kafka-sink"]').should('be.visible');
+    // cy.get('[data-testid="viz-step-kafka-source"]').should('be.visible');
   });
 });

cypress/e2e/07-catalog_actions/catalog_actions.cy.js

@@ -1,12 +1,11 @@
 describe('Test for catalog actions', () => {
-
     beforeEach(() => {
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
         cy.intercept('/v1/integrations*').as('getIntegration');
 
         cy.openHomePage();
-        cy.uploadInitialState('EipAction.yaml');
+        cy.uploadFixture('EipAction.yaml');
 
         cy.zoomOutXTimes(3)
     });

cypress/e2e/08-code-editor-actions/code_editor_actions.cy.js

@@ -1,17 +1,16 @@
 describe('editing properties', () => {
   beforeEach(() => {
-    let url = Cypress.config().baseUrl;
+    cy.intercept('/v1/integrations/dsls').as('getDSLs');
+    cy.intercept('/v1/view-definitions').as('getViewDefinitions');
+    cy.intercept('/v1/integrations*').as('getIntegration');
 
-    cy.visit(url);
+    cy.openHomePage();
 
-    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.zoomOutXTimes(3)
   });
 
   it('User adds step to the YAML', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('TimerKafka.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('TimerKafka.yaml');
 
     const stepToInsert = `  steps:
   - ref:
@@ -20,49 +19,48 @@ describe('editing properties', () => {
       kind: Kamelet`;
     const insertLine = 10;
     cy.editorAddText(insertLine, stepToInsert);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK the insert-field-action step was added
     cy.get('[data-testid="viz-step-insert-field-action"]').should('be.visible');
   });
 
   it('User removes step from the YAML', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('TimerKafka.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('TimerKafka.yaml');
+
     cy.editorDeleteLine(10, 5);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK the kafka-sink step was removed
     cy.get('[data-testid="viz-step-kafka-sink"]').should('not.exist');
   });
 
   it('User edits step in the YAML', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('TimerKafka.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('TimerKafka.yaml');
+
     cy.editorDeleteLine(14);
     const name = `      name: aws-s3-sink`;
     cy.editorAddText(14, name);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK the kafka-sink step was replaced by the aws s3 sink step
     cy.get('[data-testid="viz-step-kafka-sink"]').should('not.exist');
     cy.get('[data-testid="viz-step-aws-s3-sink"]').should('be.visible');
   });
 
   it('User Deletes branch in the YAML', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('EipAction.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('EipAction.yaml');
+
     cy.editorDeleteLine(31, 7);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK branch with digitalocean and set header step was deleted
     cy.get('[data-testid="viz-step-digitalocean"]').should('not.exist');
     cy.get('[data-testid="viz-step-set-header"]').should('not.exist');
   });
 
   it('User Add a new branch in the YAML', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('EipAction.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('EipAction.yaml');
 
     // CHECK atlasmap step is not
     cy.get('[data-testid="viz-step-atlasmap"]').should('not.exist');
@@ -73,35 +71,39 @@ describe('editing properties', () => {
               uri: atlasmap:null`;
     const insertLine = 30;
     cy.editorAddText(insertLine, stepToInsert);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK branch with atlasmap was created
     cy.get('[data-testid="viz-step-atlasmap"]').should('be.visible');
   });
 
   it('User undoes a change they saved, syncs with canvas', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('EipAction.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('EipAction.yaml');
+
     cy.editorDeleteLine(31, 7);
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.syncUpCodeChanges();
 
     // CHECK branch with digitalocean and set header step was deleted
     cy.get('[data-testid="viz-step-digitalocean"]').should('not.exist');
     cy.get('[data-testid="viz-step-set-header"]').should('not.exist');
 
-    // Undo and apply the reverted changes - has to click twice, as there is an alert displayed
-    cy.get('[data-testid="sourceCode--undoButton"]').click();
-    cy.get('[data-testid="sourceCode--undoButton"]').click();
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    // First click undo button => alert is displayed
+    cy.editorClickUndoXTimes();
+
+    // CHECK alert is displayed
+    cy.get('.pf-c-alert__title').contains('Any invalid code will be replaced after sync. If you don\'t want to lose your changes please make a backup.');
+
+    // Second click undo button => changes reverted
+    cy.editorClickUndoXTimes();
+    cy.syncUpCodeChanges();
 
     // CHECK branch with digitalocean and set header step was deleted
     cy.get('[data-testid="viz-step-digitalocean"]').should('be.visible');
     cy.get('[data-testid="viz-step-set-header"]').should('be.visible');
   });
 
   it('User uploads YAML file, syncs with canvas', () => {
-    cy.get('.pf-c-code-editor__main > input').attachFile('TimerKafka.yaml');
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
+    cy.uploadFixture('TimerKafka.yaml');
 
     // CHECK the kafka-sink and timer-source were imported
     cy.get('[data-testid="viz-step-timer-source"]').should('be.visible');

cypress/e2e/09-step_actions_from_canvas/step_actions_from_canvas.cy.js

@@ -5,7 +5,7 @@ describe('Test for Step actions from the canvas', () => {
         cy.intercept('/v1/integrations*').as('getIntegration');
 
         cy.openHomePage();
-        cy.uploadInitialState('TimerLogCamelRoute.yaml');
+        cy.uploadFixture('TimerLogCamelRoute.yaml');
 
         cy.zoomOutXTimes(3)
     });

cypress/e2e/09-step_actions_from_canvas/step_extension_actions_from_canvas.cy.js

@@ -5,7 +5,7 @@ describe('Test for Step extensions', () => {
         cy.intercept('/v1/integrations*').as('getIntegration');
 
         cy.openHomePage();
-        cy.uploadInitialState('TimerLogCamelRoute.yaml');
+        cy.uploadFixture('TimerLogCamelRoute.yaml');
 
         cy.zoomOutXTimes(3)
     });

cypress/e2e/10-branching_actions_from_canvas/branches_from_canvas.cy.js

@@ -5,7 +5,7 @@ describe('Test for Branching actions from the canvas', () => {
         cy.intercept('/v1/integrations*').as('getIntegration');
 
         cy.openHomePage();
-        cy.uploadInitialState('EipAction.yaml');
+        cy.uploadFixture('EipAction.yaml');
 
         cy.zoomOutXTimes(3)
     });