refactor: ♻️ setup test server for mirage and msw to be used in test …

…cases

.testing.env

@@ -0,0 +1,3 @@
+REACT_APP_NODE_ENV="test"
+REACT_APP_PUBLIC_URL = "http://localhost"
+REACT_APP_API_URL = "http://localhost/api/v1/"

package.json

@@ -54,7 +54,7 @@
     "build:msw": "msw init ./build --no-save",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "TEST": "------------------------------------------------------------------------",
-    "test": "npm run test:unit",
+    "test": "env-cmd -f ./.testing.env npm run test:unit",
     "test:unit": "npm run tsc:check && node scripts/test.js --watchAll=false",
     "test:unit:coverage": "npm run test:unit -- --coverage",
     "LINT": "------------------------------------------------------------------------",

src/hooks/useOnClickOutside.spec.ts

@@ -27,7 +27,9 @@ describe("useOnClickOutside", () => {
 
     return {
       result: renderHook(() => useOutsideClick({ ref, handler }), {
-        config: {},
+        config: {
+          withToaster: false,
+        },
       }),
       handler,
       ref,
@@ -85,7 +87,7 @@ describe("useOnClickOutside", () => {
 
     setup();
 
-    expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
     expect(addEventListenerSpy).toHaveBeenCalledWith("mousedown", expect.any(Function));
 
     addEventListenerSpy.mockRestore();

src/services/mocker/mirage/index.ts

@@ -1 +1,4 @@
 export * from "./server";
+export * from "./scenarios";
+export * from "./utils";
+export * from "./routes";

src/services/mocker/mirage/routes/reminder.ts

@@ -2,7 +2,7 @@ import { REMINDER_STATE, TReminder } from "types";
 
 import { TAppMockServer } from "../types";
 
-import { urlPrefix, resourceNotFoundResponse } from "./utils";
+import { urlPrefix, resourceNotFoundResponse } from "../utils";
 
 export function reminderRoutes(this: TAppMockServer) {
   this.get(urlPrefix("/reminders"), (schema, request) => {

src/services/mocker/mirage/routes/reminderGroup.ts

@@ -2,7 +2,7 @@ import { TReminderGroup } from "types";
 
 import { TAppMockServer } from "../types";
 
-import { urlPrefix, resourceNotFoundResponse } from "./utils";
+import { urlPrefix, resourceNotFoundResponse } from "../utils";
 
 export function reminderGroupRoutes(this: TAppMockServer) {
   this.get(urlPrefix("/reminder-groups"), (schema) => {

src/services/mocker/mirage/scenarios/index.ts

@@ -1,22 +1,16 @@
-import { TNonEmptyArray } from "types";
-
 import { TAppMockServer } from "../types";
 
+import { TScenariosBuilder } from "../../types";
+
 export function buildScenarios(server: TAppMockServer) {
-  const builder = {
+  const builder: TScenariosBuilder = {
     // create reminders without any group
-    withReminders: (n: number = 10) => {
+    withReminders: (n = 10) => {
       server.createList("reminder", n);
       return builder;
     },
     // create reminders with groups
-    withReminderGroups: ({
-      reminderGroups = ["Work", "Home", "Personal"],
-      remindersPerGroup = 10,
-    }: {
-      reminderGroups?: TNonEmptyArray<string>;
-      remindersPerGroup?: number;
-    }) => {
+    withReminderGroups: ({ reminderGroups = ["Work", "Home", "Personal"], remindersPerGroup = 10 }) => {
       reminderGroups.forEach((groupName) => {
         const group = server.create("reminderGroup", { name: groupName });
         server.createList("reminder", remindersPerGroup, { group });

src/services/mocker/mirage/server.ts

@@ -3,20 +3,23 @@ import { createServer } from "miragejs";
 import { createRoutes } from "./routes";
 import * as models from "./models";
 import * as factories from "./factories";
-import { buildScenarios } from "./scenarios";
 
 import { TAppMockServer } from "./types";
 import { IdentityManager } from "./identityManager";
+import { buildScenarios } from "./scenarios";
 
 export type TRunMirageServerConfig = {
   environment?: string;
   logging?: boolean;
   timing?: number;
+  trackRequests?: boolean;
+  withDefaultScenario?: boolean;
 };
 
 export function runServer(config: TRunMirageServerConfig = {}): TAppMockServer {
-  return createServer({
+  const server = createServer({
     logging: config.logging || true,
+    trackRequests: config?.trackRequests || false,
     environment: config?.environment || "development",
     models,
     factories,
@@ -25,7 +28,9 @@ export function runServer(config: TRunMirageServerConfig = {}): TAppMockServer {
     },
     // mirage's seeds are loaded on initialization
     seeds(server) {
-      buildScenarios(server).withReminders(5).withReminderGroups({ remindersPerGroup: 2 });
+      if (config?.withDefaultScenario) {
+        buildScenarios(server).withReminders(5).withReminderGroups({ remindersPerGroup: 2 });
+      }
     },
 
     routes() {
@@ -36,4 +41,8 @@ export function runServer(config: TRunMirageServerConfig = {}): TAppMockServer {
       this.passthrough();
     },
   });
+
+  return server;
 }
+
+export type TServer = ReturnType<typeof runServer>;

src/services/mocker/msw/db.ts

@@ -29,36 +29,6 @@ export const db = factory({
 
 export type TDb = typeof db;
 
-export const buildScenarios = (db: TDb) => {
-  const builder = {
-    withReminders: (n: number = 10) => {
-      for (let i = 0; i < n; i++) {
-        db.reminder.create();
-      }
-
-      return builder;
-    },
-    withReminderGroups: ({
-      reminderGroups = ["Work", "Home", "Personal"],
-      remindersPerGroup = 10,
-    }: {
-      reminderGroups?: string[];
-      remindersPerGroup?: number;
-    }) => {
-      reminderGroups.forEach((groupName) => {
-        const group = db.reminderGroup.create({ name: groupName });
-
-        for (let i = 0; i < remindersPerGroup; i++) {
-          db.reminder.create({ group });
-        }
-      });
-
-      return builder;
-    },
-  };
-  return builder;
-};
-
 export const dropDb = (db: TDb) => {
   drop(db);
 };

src/services/mocker/msw/server.ts

@@ -1,14 +1,19 @@
 import { setupWorker } from "msw/browser";
 
-import { db, buildScenarios } from "./db";
+import { TScenariosBuilder } from "../types";
+
+import { db, TDb } from "./db";
 
 import { setupHandlers } from "./handlers";
 
 const PUBLIC_URL = process.env.REACT_APP_PUBLIC_URL;
 
-export const runServer = () => {
-  // NOTE: seed data
-  buildScenarios(db).withReminders(5).withReminderGroups({ remindersPerGroup: 2 });
+export const runServer = (config?: { withDefaultScenario?: boolean }) => {
+  if (config?.withDefaultScenario) {
+    buildScenarios(db)
+      .withReminders(5)
+      .withReminderGroups({ reminderGroups: ["Work", "Home", "Personal"], remindersPerGroup: 2 });
+  }
 
   const handlers = setupHandlers(db);
 
@@ -21,3 +26,27 @@ export const runServer = () => {
     },
   });
 };
+
+export const buildScenarios = (db: TDb) => {
+  const builder: TScenariosBuilder = {
+    withReminders: (n = 10) => {
+      for (let i = 0; i < n; i++) {
+        db.reminder.create();
+      }
+
+      return builder;
+    },
+    withReminderGroups: ({ reminderGroups = ["Work", "Home", "Personal"], remindersPerGroup = 10 }) => {
+      reminderGroups.forEach((groupName) => {
+        const group = db.reminderGroup.create({ name: groupName });
+
+        for (let i = 0; i < remindersPerGroup; i++) {
+          db.reminder.create({ group });
+        }
+      });
+
+      return builder;
+    },
+  };
+  return builder;
+};

src/services/mocker/setupMocker.ts

@@ -5,16 +5,13 @@ export const MOCKER_TYPE = {
 
 export type TMocker = (typeof MOCKER_TYPE)[keyof typeof MOCKER_TYPE] | undefined;
 
-const initServer = (module: { runServer: () => void }) => {
-  const { runServer } = module;
-  const server = runServer();
-
-  return server;
-};
-
 export const setupMocker = async ({ type = undefined }: { type: TMocker }) => {
   if (MOCKER_TYPE[type!]) {
-    return import(`./${type}`).then(initServer);
+    const { runServer } = await import(`./${type}/server.ts`);
+
+    return runServer({
+      withDefaultScenario: true,
+    });
   }
 
   return Promise.resolve();

src/services/mocker/types.ts

@@ -0,0 +1,6 @@
+import { TNonEmptyArray } from "types";
+
+export type TScenariosBuilder = {
+  withReminders: (n: number) => any;
+  withReminderGroups: (options: { reminderGroups: TNonEmptyArray<string>; remindersPerGroup: number }) => any;
+};

src/tests/jest.setupBeforeEnv.ts

@@ -1,7 +1,8 @@
 import "./jest.polyfills";
 
-//  mocking the environment variables
+// NOTE: alternative to .testing.env file
+// mocking the environment variables
 // @ts-ignore
-process.env.REACT_APP_PUBLIC_URL = "http://localhost";
+// process.env.REACT_APP_PUBLIC_URL = "http://localhost";
 // @ts-ignore
-process.env.REACT_APP_API_URL = "http://localhost/api/v1/";
+// process.env.REACT_APP_API_URL = "http://localhost/api/v1/";

src/tests/utils/Wrapper.tsx

@@ -42,6 +42,7 @@ export const Wrapper: FC<PropsWithChildren<TWrapperProps>> = ({
   config = {
     withI18n: true,
     withStore: true,
+    preloadedState: undefined,
     withRouter: true,
     withToaster: true,
   },

src/tests/utils/render.tsx

@@ -12,7 +12,7 @@ export const render = (ui: ReactNode, options: TRenderProps = {}) => {
   const OuterWrapper = () => {
     const InnerWrapper = renderOptions?.wrapper;
 
-    return <Wrapper {...config}>{InnerWrapper ? <InnerWrapper>{ui}</InnerWrapper> : ui}</Wrapper>;
+    return <Wrapper config={config}>{InnerWrapper ? <InnerWrapper>{ui}</InnerWrapper> : ui}</Wrapper>;
   };
 
   return _render(ui, { wrapper: OuterWrapper, ...renderOptions });

src/tests/utils/renderHook.tsx

@@ -15,7 +15,7 @@ export const renderHook = <Props, Result>(
 
     const InnerWrapper = options?.wrapper;
 
-    return <Wrapper {...config}>{InnerWrapper ? <InnerWrapper {...props} /> : children}</Wrapper>;
+    return <Wrapper config={config}>{InnerWrapper ? <InnerWrapper {...props} /> : children}</Wrapper>;
   };
 
   return _renderHook(render, { ...options, wrapper: OuterWrapper });

src/tests/utils/testServer.ts

@@ -2,32 +2,72 @@ import { setupServer } from "msw/node";
 
 import { beforeAll, afterEach, afterAll } from "@jest/globals";
 
+import { runServer, createRoutes } from "services/mocker/mirage";
+
 import { setupHandlers, db, dropDb } from "services/mocker/msw";
 
-export const testServer = setupServer(...setupHandlers(db));
+export const createTestMswServer = (logging: boolean = false) => {
+  const testMswServer = setupServer(...setupHandlers(db));
+
+  beforeAll(() => {
+    testMswServer.listen({
+      onUnhandledRequest(request) {
+        // eslint-disable-next-line no-console
+        console.log("Unhandled %s %s", request.method, request.url);
+      },
+    });
+  });
+
+  afterEach(() => {
+    testMswServer.resetHandlers();
+    dropDb(db);
+  });
 
-beforeAll(() =>
-  testServer.listen({
-    onUnhandledRequest(request) {
+  afterAll(() => {
+    testMswServer.close();
+  });
+
+  if (logging) {
+    // NOTE: simple outgoing request listener logger
+    testMswServer.events.on("request:start", ({ request }) => {
       // eslint-disable-next-line no-console
-      console.log("Unhandled %s %s", request.method, request.url);
-    },
-  })
-);
-
-afterEach(() => {
-  testServer.resetHandlers();
-  dropDb(db);
-});
-
-afterAll(() => {
-  testServer.close();
-});
-
-// NOTE: simple outgoing request listener logger
-testServer.events.on("request:start", ({ request }) => {
-  // eslint-disable-next-line no-console
-  console.log("MSW intercepted:", request.method, request.url);
-});
+      console.log("MSW intercepted:", request.method, request.url);
+    });
+  }
+
+  return testMswServer;
+};
+
+export const createTestMirageServer = () => {
+  const testMirageServer = runServer({
+    environment: "test",
+    trackRequests: true,
+    logging: false,
+  });
+
+  afterEach(() => {
+    createRoutes.call(testMirageServer);
+    testMirageServer.db.emptyData();
+  });
+
+  afterAll(() => {
+    testMirageServer.shutdown();
+  });
+
+  return testMirageServer;
+};
 
 export { HttpResponse, http } from "msw";
+
+// NOTE: Alternative
+// let testMirageServer: TAppMockServer;
+
+// beforeEach(() => {
+//   testMirageServer = runServer({
+//     environment: "test",
+//   });
+// });
+
+// afterEach(() => {
+//   testMirageServer.shutdown();
+// });