test intercept cypress

massalabs · Nov 2, 2023 · 4d8fdca · 4d8fdca
1 parent 1d991d9
commit 4d8fdca
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 19 deletions.
diff --git a/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx b/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx
@@ -161,25 +161,51 @@ describe('E2E | Acceptance | Home | Send', () => {
       cy.url().should('eq', `${baseUrl}/${account.nickname}/home`);
     });
 
-    it('should process any % as input', () => {
-      navigateToTransfercoins(2);
-
-      cy.wait(1000);
-
-      cy.get(`[data-testid="send-percent-25"]`).click();
-      cy.get('[data-testid="currency-field"').should('have.value', '250 MAS');
-
-      cy.get(`[data-testid="send-percent-50"]`).click();
-      cy.get('[data-testid="currency-field"').should('have.value', '500 MAS');
-
-      cy.get(`[data-testid="send-percent-75"]`).click();
-      cy.get('[data-testid="currency-field"').should('have.value', '750 MAS');
+    it('should process any % as input', async () => {
+      server.trackRequest = true;
+      const account = mockedAccounts.at(2);
 
-      cy.get(`[data-testid="send-percent-100"]`).click();
-      cy.get('[data-testid="currency-field"').should(
-        'have.value',
-        '999.999999 MAS',
-      );
+      cy.visit('/');
+      cy.get('[data-testid="account-2"]')
+        .click()
+        .then(() => {
+          cy.url().should('eq', `${baseUrl}/${account.nickname}/home`);
+          cy.waitForRequest(server, '/accounts/MarioX', 'GET').then(() => {
+            cy.get('[data-testid="send-button"]')
+              .click()
+              .then(() => {
+                cy.waitForRequest(server, '/accounts/MarioX', 'GET');
+                cy.url().should(
+                  'eq',
+                  `${baseUrl}/${account.nickname}/transfer-coins`,
+                );
+                cy.get(`[data-testid="send-percent-25"]`).click();
+                cy.get('[data-testid="currency-field"').should(
+                  'have.value',
+                  '250 MAS',
+                );
+
+                cy.get(`[data-testid="send-percent-50"]`).click();
+                cy.get('[data-testid="currency-field"').should(
+                  'have.value',
+                  '500 MAS',
+                );
+
+                cy.get(`[data-testid="send-percent-75"]`).click();
+                cy.get('[data-testid="currency-field"').should(
+                  'have.value',
+                  '750 MAS',
+                );
+
+                cy.get(`[data-testid="send-percent-100"]`).click();
+                cy.get('[data-testid="currency-field"').should(
+                  'have.value',
+                  '999.999999 MAS',
+                );
+              });
+          });
+        });
+      server.trackRequest = false;
     });
 
     it('should transfer to accounts', () => {

diff --git a/web-frontend/cypress/support/e2e.ts b/web-frontend/cypress/support/e2e.ts
@@ -42,3 +42,40 @@ Cypress.on('window:before:load', (win) => {
     });
   };
 });
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import 'cypress-wait-until';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+Cypress.Commands.add('waitForRequest', (server, urlPattern, method = '') => {
+  const wildcardRegex = /\*/g;
+  const questionMarkRegex = /\?/g;
+
+  const replacedWildCard = urlPattern
+    .replace(wildcardRegex, '[^ ]*')
+    .replace(questionMarkRegex, '\\?');
+  const regexUrl = new RegExp(replacedWildCard, 'g');
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const checkMatches = (r) => {
+    let isMatched = r.url.match(regexUrl);
+    if (method) {
+      isMatched = isMatched && r.method.toLowerCase() === method.toLowerCase();
+    }
+
+    return isMatched;
+  };
+
+  const requestFound = () =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    server.pretender.handledRequests.some(checkMatches);
+  const errorMsg = `[Request [${method}] to ${urlPattern} didn't happen`;
+
+  return cy
+    .waitUntil(requestFound, { errorMsg })
+    .should('be.true')
+    .log(`Request [${method}] to ${urlPattern} has been finished`);
+});
diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json
diff --git a/web-frontend/package.json b/web-frontend/package.json
@@ -63,6 +63,7 @@
     "babel-jest": "^29.5.0",
     "cypress": "^13.3.1",
     "cypress-image-diff-js": "^1.31.0",
+    "cypress-wait-until": "^2.0.1",
     "eslint": "^8.38.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.28.0",

diff --git a/web-frontend/src/mirage/config.ts b/web-frontend/src/mirage/config.ts
@@ -10,6 +10,7 @@ import { AccountObject } from '@/models/AccountModel';
 
 export function mockServer(environment = ENV.DEV) {
   const server = createServer({
+    trackRequests: true,
     environment,
     models,
     factories,

diff --git a/web-frontend/tsconfig.json b/web-frontend/tsconfig.json
@@ -21,6 +21,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "cypress"],
+  "include": ["src", "cypress", "cypress-wait-until"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }