fix cypress issues (#944)

- removes global testId variable - makes createTest method return the testId - fix promises issue with cypress that was passing failed tests - start intecepting API requests - remove a couple of unnecessary wait calls
kubeshop · Jul 27, 2022 · 942d184 · 942d184
1 parent 213c3da
commit 942d184
Show file tree

Hide file tree

Showing 17 changed files with 540 additions and 452 deletions.
diff --git a/web/cypress.json b/web/cypress.json
@@ -4,5 +4,6 @@
   "viewportWidth": 1440,
   "viewportHeight": 1080,
   "responseTimeout": 30000,
+  "pageLoadTimeout": 20000,
   "projectId": "6dm1if"
 }
diff --git a/web/cypress/integration/Home/CreateTest.spec.ts b/web/cypress/integration/Home/CreateTest.spec.ts
@@ -1,6 +1,7 @@
 import {camelCase} from 'lodash';
 import {Plugins} from '../../../src/constants/Plugins.constants';
-import {deleteTest, navigateToTestCreationPage} from '../utils/Common';
+import {navigateToTestCreationPage} from '../utils/Common';
+import {getIdFromTracePageAndDeleteTest} from './createTestWithAuth';
 import {fillCreateFormBasicStep} from './fillCreateFormBasicStep';
 
 const DemoTestExampleList = Plugins.REST.demoList;
@@ -11,83 +12,91 @@ describe('Create test', () => {
   });
 
   it('should create a basic GET test from scratch', () => {
-    const $form = navigateToTestCreationPage();
-    const name = `Test - Pokemon - #${String(Date.now()).slice(-4)}`;
+    (async () => {
+      const $form = navigateToTestCreationPage();
+      const name = `Test - Pokemon - #${String(Date.now()).slice(-4)}`;
 
-    fillCreateFormBasicStep($form, name);
+      fillCreateFormBasicStep($form, name);
 
-    $form.get('[data-cy=method-select]').click();
-    $form.get('[data-cy=method-select-option-GET]').click();
-    $form.get('[data-cy=url]').type('http://demo-pokemon-api.demo.svc.cluster.local/pokemon');
+      $form.get('[data-cy=method-select]').click();
+      $form.get('[data-cy=method-select-option-GET]').click();
+      $form.get('[data-cy=url]').type('http://demo-pokemon-api.demo.svc.cluster.local/pokemon');
 
-    $form.get('[data-cy=create-test-create-button]').last().click();
+      $form.get('[data-cy=create-test-create-button]').last().click();
 
-    cy.location('pathname').should('match', /\/test\/.*/i);
-    cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-    deleteTest();
+      cy.location('pathname').should('match', /\/test\/.*/i);
+      cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
+      await getIdFromTracePageAndDeleteTest();
+    })();
   });
 
   it('should create a basic POST test from scratch', () => {
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').last().click();
-
-    const name = `Test - Pokemon - #${String(Date.now()).slice(-4)}`;
-
-    $form.get('[data-cy=create-test-name-input').type(name);
-    $form.get('[data-cy=create-test-description-input').type(name);
-
-    $form.get('[data-cy=create-test-next-button]').last().click();
-
-    $form.get('[data-cy=method-select]').click();
-    $form.get('[data-cy=method-select-option-POST]').click();
-    $form.get('[data-cy=url]').type('http://demo-pokemon-api.demo.svc.cluster.local/pokemon');
-    $form
-      .get('[data-cy=body]')
-      .type(
-        '{"name":"meowth","type":"normal","imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/052.png","isFeatured":true}',
-        {
-          parseSpecialCharSequences: false,
-        }
-      );
-
-    $form.get('[data-cy=create-test-create-button]').last().click();
-
-    cy.location('pathname').should('match', /\/test\/.*/i);
-    cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-    deleteTest();
+    (async () => {
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').last().click();
+
+      const name = `Test - Pokemon - #${String(Date.now()).slice(-4)}`;
+
+      $form.get('[data-cy=create-test-name-input').type(name);
+      $form.get('[data-cy=create-test-description-input').type(name);
+
+      $form.get('[data-cy=create-test-next-button]').last().click();
+
+      $form.get('[data-cy=method-select]').click();
+      $form.get('[data-cy=method-select-option-POST]').click();
+      $form.get('[data-cy=url]').type('http://demo-pokemon-api.demo.svc.cluster.local/pokemon');
+      $form
+        .get('[data-cy=body]')
+        .type(
+          '{"name":"meowth","type":"normal","imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/052.png","isFeatured":true}',
+          {
+            parseSpecialCharSequences: false,
+          }
+        );
+
+      $form.get('[data-cy=create-test-create-button]').last().click();
+
+      cy.location('pathname').should('match', /\/test\/.*/i);
+      cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
+      await getIdFromTracePageAndDeleteTest();
+    })();
   });
 
   it('should create a GET test from an example', () => {
-    const [{name}] = DemoTestExampleList;
+    (async () => {
+      const [{name}] = DemoTestExampleList;
 
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').last().click();
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').last().click();
 
-    $form.get('[data-cy=example-button]').click();
-    $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
+      $form.get('[data-cy=example-button]').click();
+      $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
 
-    $form.get('[data-cy=create-test-next-button]').last().click();
-    $form.get('[data-cy=create-test-create-button]').last().click();
+      $form.get('[data-cy=create-test-next-button]').last().click();
+      $form.get('[data-cy=create-test-create-button]').last().click();
 
-    cy.location('pathname').should('match', /\/test\/.*/i);
-    cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-    deleteTest();
+      cy.location('pathname').should('match', /\/test\/.*/i);
+      cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
+      await getIdFromTracePageAndDeleteTest();
+    })();
   });
 
   it('should create a POST test from an example', () => {
-    const [, {name}] = DemoTestExampleList;
+    (async () => {
+      const [, {name}] = DemoTestExampleList;
 
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').last().click();
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').last().click();
 
-    $form.get('[data-cy=example-button]').click();
-    $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
+      $form.get('[data-cy=example-button]').click();
+      $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
 
-    $form.get('[data-cy=create-test-next-button]').last().click();
-    $form.get('[data-cy=create-test-create-button]').last().click();
+      $form.get('[data-cy=create-test-next-button]').last().click();
+      $form.get('[data-cy=create-test-create-button]').last().click();
 
-    cy.location('pathname').should('match', /\/test\/.*/i);
-    cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-    deleteTest();
+      cy.location('pathname').should('match', /\/test\/.*/i);
+      cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
+      await getIdFromTracePageAndDeleteTest();
+    })();
   });
 });
diff --git a/web/cypress/integration/Home/CreateTestFromPostman.spec.ts b/web/cypress/integration/Home/CreateTestFromPostman.spec.ts
@@ -1,4 +1,4 @@
-import {deleteTest, navigateToTestCreationPage} from '../utils/Common';
+import {navigateToTestCreationPage} from '../utils/Common';
 import {fillCreateFormBasicStep} from './fillCreateFormBasicStep';
 
 describe('Create test from Postman Collection', () => {
@@ -15,12 +15,11 @@ describe('Create test from Postman Collection', () => {
     cy.get('[data-cy="collectionFile"]').attachFile('collection.json');
 
     $form.get('[data-cy=collectionTest-select]').click();
-    $form.get('[data-cy=collectionTest-1]').click();
+    $form.get('[data-cy=collectionTest-1]').click({force: true});
 
     $form.get('[data-cy=create-test-create-button]').last().click();
 
     cy.location('pathname').should('match', /\/test\/.*/i);
     cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-    deleteTest();
   });
 });
diff --git a/web/cypress/integration/Home/CreateTestWithAuthentication.spec.ts b/web/cypress/integration/Home/CreateTestWithAuthentication.spec.ts
@@ -2,31 +2,35 @@ import {navigateToTestCreationPage} from '../utils/Common';
 import {createTestWithAuth} from './createTestWithAuth';
 
 describe('Create test with authentication', () => {
-  beforeEach(() => {
-    cy.visit('http://localhost:3000/');
-  });
+  beforeEach(() => cy.visit('http://localhost:3000/'));
 
   it('should create a basic GET test with api key authentication method', () => {
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').click();
+    (async () => {
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').click();
 
-    createTestWithAuth($form, 'apiKey', ['key', 'value'], () => {
-      $form.get('[data-cy=auth-apiKey-select]').click();
-      $form.get(`[data-cy=auth-apiKey-select-option-header]`).click();
-    });
+      createTestWithAuth($form, 'apiKey', ['key', 'value'], () => {
+        $form.get('[data-cy=auth-apiKey-select]').click();
+        $form.get(`[data-cy=auth-apiKey-select-option-header]`).click();
+      });
+    })();
   });
 
   it('should create a basic GET test with basic authentication method', () => {
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').click();
+    (async () => {
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').click();
 
-    createTestWithAuth($form, 'basic', ['username', 'password']);
+      createTestWithAuth($form, 'basic', ['username', 'password']);
+    })();
   });
 
   it('should create a basic GET test with bearer authentication method', () => {
-    const $form = navigateToTestCreationPage();
-    $form.get('[data-cy=create-test-next-button]').click();
+    (async () => {
+      const $form = navigateToTestCreationPage();
+      $form.get('[data-cy=create-test-next-button]').click();
 
-    createTestWithAuth($form, 'bearer', ['token']);
+      createTestWithAuth($form, 'bearer', ['token']);
+    })();
   });
 });
diff --git a/web/cypress/integration/Home/EditTest.spec.ts b/web/cypress/integration/Home/EditTest.spec.ts
@@ -1,43 +1,41 @@
-import {createTest, deleteTest, testId} from '../utils/Common';
+import {createTest, deleteTest, testRunPageRegex} from '../utils/Common';
 
 describe('Edit Test', () => {
-  before(() => {
-    createTest();
-  });
-
-  after(() => {
-    deleteTest();
-  });
-
-  beforeEach(() => {
-    cy.visit('http://localhost:3000/');
-  });
-
   it('should edit a test', () => {
-    cy.get(`[data-cy=test-actions-button-${testId}]`).click();
-    cy.get('[data-cy=test-card-edit]').click();
+    (async () => {
+      const testId = await createTest();
+      cy.visit(`http://localhost:3000`);
+
+      cy.get(`[data-cy=test-actions-button-${testId}]`).click();
+      cy.get('[data-cy=test-card-edit]').click();
 
-    cy.get('[data-cy=edit-test-form]').should('be.visible');
-    cy.get('[data-cy=create-test-name-input] input').clear().type('Edited Test');
+      cy.get('[data-cy=edit-test-form]').should('be.visible');
+      cy.get('[data-cy=create-test-name-input] input').clear().type('Edited Test');
 
-    cy.get('[data-cy=edit-test-submit]').click();
-    cy.get('[data-cy=test-details-name]').should('have.text', `Edited Test (v2)`);
+      cy.get('[data-cy=edit-test-submit]').click();
+      cy.get('[data-cy=test-details-name]').should('have.text', `Edited Test (v2)`);
 
-    cy.location('pathname').should('match', /\/test\/.*/i, {timeout: 10000});
+      cy.location('pathname').should('match', testRunPageRegex, {timeout: 20000});
+      deleteTest(testId);
+    })();
   });
 
   it('should edit a test from the test details', () => {
-    cy.visit(`http://localhost:3000/test/${testId}`);
+    (async () => {
+      const testId = await createTest();
+      cy.visit(`http://localhost:3000/test/${testId}`);
 
-    cy.get(`[data-cy=test-actions-button-${testId}]`).click();
-    cy.get('[data-cy=test-card-edit]').click();
+      cy.get(`[data-cy=test-actions-button-${testId}]`).click();
+      cy.get('[data-cy=test-card-edit]').click();
 
-    cy.get('[data-cy=edit-test-form]').should('be.visible');
-    cy.get('[data-cy=create-test-name-input] input').clear().type('Edited Test');
+      cy.get('[data-cy=edit-test-form]').should('be.visible');
+      cy.get('[data-cy=create-test-name-input] input').clear().type('Edited Test');
 
-    cy.get('[data-cy=edit-test-submit]').click();
-    cy.get('[data-cy=test-details-name]').should('have.text', `Edited Test (v2)`);
+      cy.get('[data-cy=edit-test-submit]').click();
+      cy.get('[data-cy=test-details-name]').should('have.text', `Edited Test (v2)`);
 
-    cy.location('pathname').should('match', /\/run\/.*/i, {timeout: 10000});
+      cy.location('pathname').should('match', /\/run\/.*/i, {timeout: 10000});
+      deleteTest(testId);
+    })();
   });
 });
diff --git a/web/cypress/integration/Home/ShowTestList.spec.ts b/web/cypress/integration/Home/ShowTestList.spec.ts
@@ -1,18 +1,7 @@
 import {DOCUMENTATION_URL, GITHUB_URL} from '../../../src/constants/Common.constants';
-import {createTest, deleteTest} from '../utils/Common';
 
 describe('Home', () => {
-  before(() => {
-    createTest();
-  });
-
-  after(() => {
-    deleteTest();
-  });
-
-  beforeEach(() => {
-    cy.visit('http://localhost:3000/');
-  });
+  beforeEach(() => cy.visit('http://localhost:3000/'));
 
   it('should render the layout', () => {
     cy.get('[data-cy=documentation-link]').should('have.attr', 'href', DOCUMENTATION_URL);

diff --git a/web/cypress/integration/Home/createTestWithAuth.ts b/web/cypress/integration/Home/createTestWithAuth.ts
@@ -1,13 +1,26 @@
-import {deleteTest} from '../utils/Common';
+import {
+  deleteTest,
+  extractTestIdFromTracePage,
+  inteceptHomeApiCall,
+  interceptTracePageApiCalls,
+  makeSureUserisOnTracePage,
+  waitForTracePageApiCalls,
+} from '../utils/Common';
+
+export async function getIdFromTracePageAndDeleteTest() {
+  const testId = await extractTestIdFromTracePage();
+  inteceptHomeApiCall();
+  deleteTest(testId);
+}
 
-export function createTestWithAuth(
-  $form: Cypress.Chainable<JQuery<HTMLElement>>,
+export async function createTestWithAuth(
+  $form: Cypress.Chainable<JQuery>,
   method: string,
   keys: string[],
   callback?: () => void
-) {
+): Promise<void> {
   const name = `Test - Pokemon - #${String(Date.now()).slice(-4)}`;
-  
+
   $form.get('[data-cy=create-test-name-input').type(name);
   $form.get('[data-cy=create-test-description-input').type(name);
 
@@ -28,8 +41,9 @@ export function createTestWithAuth(
 
   $form.get('[data-cy=create-test-create-button]').last().click();
 
-  cy.location('pathname').should('match', /\/test\/.*/i);
+  interceptTracePageApiCalls();
+  makeSureUserisOnTracePage();
+  waitForTracePageApiCalls();
   cy.get('[data-cy=test-details-name]').should('have.text', `${name} (v1)`);
-  deleteTest();
-  return name;
+  await getIdFromTracePageAndDeleteTest();
 }
diff --git a/web/cypress/integration/Home/fillCreateFormBasicStep.ts b/web/cypress/integration/Home/fillCreateFormBasicStep.ts
@@ -1,5 +1,5 @@
 export function fillCreateFormBasicStep(
-  $form: Cypress.Chainable<JQuery<HTMLElement>>,
+  $form: Cypress.Chainable<JQuery>,
   name: string,
   description?: string
 ) {