refactor: ♻️ Update notes about cypress and setup api mocker

cypress/specs/reminders_mirage.cy.ts

@@ -11,17 +11,20 @@ import { remindersElements } from "../pages";
 
 describe("Reminders Page", () => {
   before(function () {
+    // skip test if not using mirage
     cy.skipIf(Cypress.env("REACT_APP_MOCKER") !== MOCKER_TYPE.mirage, this);
     cy.setupMirageApiProxy();
   });
 
   let server: TServer;
 
   beforeEach(() => {
+    // start the mock server before each test
     server = runServer({ logging: true });
   });
 
   afterEach(() => {
+    // stop the mock server after each test
     server.shutdown();
   });
 
@@ -72,12 +75,14 @@ describe("Reminders Page", () => {
 
     remindersElements.createReminder("Learn Cypress");
 
+    // NOTE: override/intercept the request and return a 500 status code to simulate a server error when creating a reminder,
     server.post(urlPrefix("/reminders"), () => {
       return new MirageResponse(500, {});
     });
 
     cy.contains("Error creating reminder");
 
+    // NOTE: reset the request handlers
     cy.resetMirageApiHandlers(server);
 
     remindersElements.createReminder("Learn Cypress");

cypress/specs/reminders_msw.cy.ts

@@ -10,6 +10,7 @@ import { remindersElements } from "../pages";
 
 describe("Reminders Page", () => {
   before(function () {
+    // skip test if not using msw
     cy.skipIf(Cypress.env("REACT_APP_MOCKER") !== MOCKER_TYPE.msw, this);
   });
 
@@ -48,6 +49,7 @@ describe("Reminders Page", () => {
   });
 
   it("should handle negative scenario for create reminder", () => {
+    // NOTE: intercept the request and return a 500 status code to simulate a server error when creating a reminder only once
     cy.interceptMswRequest(
       http.post(
         urlPrefix("/reminders"),

cypress/support/mirage.ts

@@ -16,9 +16,11 @@ declare global {
   }
 }
 
+// NOTE: custom command to setup mirage api proxy
 Cypress.Commands.add("setupMirageApiProxy", () => {
+  // NOTE: listen for window:before:load events and modify the window before any of your application code runs between page transitions
   Cypress.on("window:before:load", (window: TCypressWindow) => {
-    // NOTE: defines a `handleProxyMirageServerRequest` function on your application's window object
+    // NOTE: define a `handleProxyMirageServerRequest` function on your application's window object
     window.handleProxyMirageServerRequest = function (request) {
       return fetch(request.url, {
         method: request.method,
@@ -48,6 +50,7 @@ Cypress.Commands.add("setupMirageApiProxy", () => {
   });
 });
 
+// NOTE: custom command to reset mirage api handlers
 Cypress.Commands.add("resetMirageApiHandlers", (server) => {
   createRoutes.call(server);
 });

cypress/support/msw.ts

@@ -18,6 +18,7 @@ declare global {
 let mswWorker: SetupWorker;
 
 before(() => {
+  // NOTE: if using msw, setup the msw worker
   if (Cypress.env("REACT_APP_MOCKER") === MOCKER_TYPE.msw) {
     mswWorker = setupWorker(...setupHandlers({ db }));
 
@@ -34,17 +35,21 @@ before(() => {
   }
 });
 
+// NOTE: before each test, reset the handlers, if using msw
+// Fires before the test and all before and beforeEach hooks run.
 Cypress.on("test:before:run", () => {
   if (mswWorker) {
     mswWorker.resetHandlers();
   }
 });
 
+// NOTE: custom commands to explicitly intercept the request
 Cypress.Commands.add("interceptMswRequest", (...handlers: RequestHandler[]) => {
   if (!mswWorker) throw new Error("MSW worker is not initialized");
   mswWorker.use(...handlers);
 });
 
+// NOTE: custom command to get the msw db
 Cypress.Commands.add("getMswDb", () => {
   if (!mswWorker) throw new Error("MSW worker is not initialized");
   return Promise.resolve(db);

src/index.tsx

@@ -15,8 +15,11 @@ async function setupApp() {
 
   const mockerType = process.env.REACT_APP_MOCKER;
   const isDemoMode = Boolean(process.env.REACT_APP_IS_DEMO_MODE);
+  const isMockerEnabled = !!mockerType;
 
-  if (isDemoMode && !!mockerType && !window.Cypress) {
+  // NOTE: start the application mock server if demo mode enabled, mocker is enabled and not in cypress environment.
+  const shouldStartMockServer = isDemoMode && isMockerEnabled && !window.Cypress;
+  if (shouldStartMockServer) {
     const mocker = await import("services/mocker");
 
     const { setupMocker } = mocker;
@@ -26,6 +29,8 @@ async function setupApp() {
     console.log(`%c API is being mocked using ${mockerType}!`, "color: #bada55; font-weight: bold;");
   }
 
+  // NOTE: extra configuration to support mirage in cypress
+  // with window.Cypress.env we can access are the environment variables from Cypress configuration
   if (window.Cypress && window.Cypress.env("REACT_APP_MOCKER") === MOCKER_TYPE.mirage) {
     await import("services/mocker/mirage/proxyServer").then(({ startProxyMirageServer }) => {
       startProxyMirageServer();