chore: enable api mocking for e2e tests (#74)

Author: manoldonev

cypress/integration/App.spec.ts

@@ -8,7 +8,6 @@ const terminalLog = (violations: Result[]): void => {
     } detected`,
   );
 
-  // pluck specific keys to keep the table readable
   const violationData = violations.map(({ id, impact, description, nodes }) => ({
     id,
     impact,
@@ -76,7 +75,8 @@ describe('Todo App', () => {
           cy.findByText(/save/i).click();
         });
 
-      cy.findByText(testValue).should('be.visible').deleteTask(testValue);
+      cy.findByText(testValue).should('be.visible');
+      cy.deleteTask(testValue);
     });
 
     it('creates todo item requires validation', () => {
@@ -112,32 +112,7 @@ describe('Todo App', () => {
     it('deletes todo item', () => {
       const testValue = `cy ${Date.now()}`;
       cy.createTask(testValue);
-      cy.findByText(/todo app/i).should('be.visible');
-
-      cy.findAllByRole('listitem')
-        .first()
-        .trigger('touchstart', {
-          touches: [{ clientY: 40, clientX: 0 }],
-          waitForAnimations: false,
-        })
-        .trigger('touchmove', {
-          touches: [{ clientY: 40, clientX: -50 }],
-          waitForAnimations: false,
-        })
-        .trigger('touchmove', {
-          touches: [{ clientY: 40, clientX: -100 }],
-          waitForAnimations: false,
-        })
-        .trigger('touchmove', {
-          touches: [{ clientY: 40, clientX: -150 }],
-          waitForAnimations: false,
-        })
-        .trigger('touchend', {
-          touches: [{ clientY: 40, clientX: -160 }],
-          waitForAnimations: false,
-        });
-
-      cy.findByText(testValue).should('not.be.visible');
+      cy.deleteTask(testValue).should('not.exist');
     });
   });
 

cypress/support/commands.ts

@@ -58,7 +58,6 @@ Cypress.Commands.add('deleteTask', (task: string) => {
     .trigger('touchend', {
       touches: [{ clientY: 40, clientX: -160 }],
       waitForAnimations: false,
-    });
-
-  cy.findByText(task).should('not.be.visible');
+    })
+    .should('not.exist');
 });

cypress/support/index.ts

@@ -15,16 +15,3 @@
 
 import './commands';
 import 'cypress-axe';
-
-// TODO: msw & cypress combo triggers test runner endless loop
-// https://github.com/mswjs/msw/issues/744
-// https://github.com/cypress-io/cypress/issues/16742
-// import { worker } from '../../src/mocks/msw/browser';
-
-// before(async () => {
-//   return worker.start({
-//     serviceWorker: {
-//       url: `/react-todo-app-ts/mockServiceWorker.js`,
-//     },
-//   });
-// });

package.json

@@ -91,9 +91,9 @@
     "prettier": "prettier --check src",
     "graphql:codegen": "graphql-codegen --config .graphqlrc.yml",
     "cy:open": "npx cypress open",
-    "cypress": "start-server-and-test start http://localhost:3000 cy:open",
+    "cypress": "REACT_APP_API_MOCKING=enabled start-server-and-test start http://localhost:3000 cy:open",
     "cy:run": "npx cypress run",
-    "cypress:ci": "start-server-and-test start http://localhost:3000 cy:run"
+    "cypress:ci": "REACT_APP_API_MOCKING=enabled start-server-and-test start http://localhost:3000 cy:run"
   },
   "eslintConfig": {
     "extends": [

src/index.tsx

@@ -11,14 +11,21 @@ import { queryClient } from './queryClient';
 import { reportWebVitals } from './reportWebVitals';
 
 const main = async (): Promise<void> => {
-  // if (process.env.NODE_ENV === 'development') {
-  //   const { worker } = await import('./mocks/msw/browser');
-  //   await worker.start({
-  //     serviceWorker: {
-  //       url: `${process.env.PUBLIC_URL}/mockServiceWorker.js`,
-  //     },
-  //   });
-  // }
+  if (process.env.REACT_APP_API_MOCKING === 'enabled') {
+    const { worker } = await import('./mocks/msw/browser');
+    await worker.start({
+      serviceWorker: {
+        url: `${process.env.PUBLIC_URL}/mockServiceWorker.js`,
+      },
+      onUnhandledRequest: ({ url }, print) => {
+        if (!url.pathname.startsWith('/graphql')) {
+          return;
+        }
+
+        print.error();
+      },
+    });
+  }
 
   ReactDOM.render(
     <React.StrictMode>