🌱 Use MockServiceWorker to provide mock data for questionnaires (ko…

…nveyor#1286)

Using MockServiceWorker (`msw`) [^1] allows us to provide stub/mock data
endpoints for rest services on hub that don't yet exist. In future, msw
can also be used to provide a completely stubbed out hub so the UI can
run statically.

The msw layer added in this change will intercept the network requests
and use mock data for the `/hub/questionnaires` endpoints. By providing
normal endpoints in this way, the rest fetch functions and the
react-query hooks can be built and tested as per normal.

Once the real hub endpoints are in place, the stub layer can be disabled
and any handling code can be adjusted to cover the differences between
the mocks and the real service.

Specifics of the implementation:
  - All of the `msw` code is held in `client/src/mocks`

- A small change in `client/src/index.tsx` will dynamically load and
start our `msw` layer if building/running in development mode.

- The `AssessmentSettings.tsx` page and the `questionnaires.ts` queries
have been modified to remove any reference to mock data.

- The `mockServiceWorker.js` file[^2] is created by the command `npx msw
init ./public`, and is recommended to keep in the repo so everyone uses
the same version. This file should be upgraded with any `msw` package
upgrade.

- Development build config `webpack.dev.ts` has been adjusted to provide
the file `mockServiceWorker.js`. The file is __not__ provided in a
production build.

- In the `stub-new-work/questionnaires.ts` handlers, no validation on
the content of the json/form data is done. Hub services may do field
validation on json binding. That is not done in the `msw` layer.

[^1]: https://mswjs.io/docs/
[^2]: https://mswjs.io/docs/getting-started/integrate/browser

Signed-off-by: Scott J Dickerson <[email protected]>

client/config/webpack.common.ts

@@ -186,9 +186,6 @@ const config: Configuration = {
         },
       ],
     }),
-    // new WatchIgnorePlugin({
-    //   paths: [/\.js$/, /\.d\.ts$/],
-    // }),
     new MonacoWebpackPlugin({
       filename: "monaco/[name].worker.js",
       languages: Object.values(LANGUAGES_BY_FILE_EXTENSION),

client/config/webpack.dev.ts

@@ -3,10 +3,11 @@ import { mergeWithRules } from "webpack-merge";
 import type { Configuration as WebpackConfiguration } from "webpack";
 import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
+import CopyPlugin from "copy-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
 import ReactRefreshTypeScript from "react-refresh-typescript";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
-import HtmlWebpackPlugin from "html-webpack-plugin";
 
 import { encodeEnv, KONVEYOR_ENV, proxyMap } from "@konveyor-ui/common";
 import { stylePaths } from "./stylePaths";
@@ -79,6 +80,13 @@ const config: Configuration = mergeWithRules({
         mode: "readonly",
       },
     }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: pathTo("../public/mockServiceWorker.js"),
+        },
+      ],
+    }),
     // index.html generated at compile time to inject `_env`
     new HtmlWebpackPlugin({
       filename: "index.html",

client/package.json

@@ -91,6 +91,7 @@
     "jest-watch-typeahead": "^1.0.0",
     "mini-css-extract-plugin": "^2.5.2",
     "monaco-editor-webpack-plugin": "^7.0.1",
+    "msw": "^1.2.3",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",
     "raw-loader": "^4.0.2",
@@ -130,5 +131,8 @@
   },
   "nyc": {
     "exclude": "client/src/reportWebVitals.ts"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

client/public/mockServiceWorker.js

@@ -0,0 +1,303 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.2.3).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = "3d6b9f06410d179a7f7404d4bf4c3c70";
+const activeClientIds = new Set();
+
+self.addEventListener("install", function () {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", function (event) {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("message", async function (event) {
+  const clientId = event.source.id;
+
+  if (!clientId || !self.clients) {
+    return;
+  }
+
+  const client = await self.clients.get(clientId);
+
+  if (!client) {
+    return;
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  });
+
+  switch (event.data) {
+    case "KEEPALIVE_REQUEST": {
+      sendToClient(client, {
+        type: "KEEPALIVE_RESPONSE",
+      });
+      break;
+    }
+
+    case "INTEGRITY_CHECK_REQUEST": {
+      sendToClient(client, {
+        type: "INTEGRITY_CHECK_RESPONSE",
+        payload: INTEGRITY_CHECKSUM,
+      });
+      break;
+    }
+
+    case "MOCK_ACTIVATE": {
+      activeClientIds.add(clientId);
+
+      sendToClient(client, {
+        type: "MOCKING_ENABLED",
+        payload: true,
+      });
+      break;
+    }
+
+    case "MOCK_DEACTIVATE": {
+      activeClientIds.delete(clientId);
+      break;
+    }
+
+    case "CLIENT_CLOSED": {
+      activeClientIds.delete(clientId);
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId;
+      });
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister();
+      }
+
+      break;
+    }
+  }
+});
+
+self.addEventListener("fetch", function (event) {
+  const { request } = event;
+  const accept = request.headers.get("accept") || "";
+
+  // Bypass server-sent events.
+  if (accept.includes("text/event-stream")) {
+    return;
+  }
+
+  // Bypass navigation requests.
+  if (request.mode === "navigate") {
+    return;
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+    return;
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return;
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2);
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === "NetworkError") {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url
+        );
+        return;
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`
+      );
+    })
+  );
+});
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event);
+  const response = await getResponse(event, client, requestId);
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    (async function () {
+      const clonedResponse = response.clone();
+      sendToClient(client, {
+        type: "RESPONSE",
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      });
+    })();
+  }
+
+  return response;
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId);
+
+  if (client?.frameType === "top-level") {
+    return client;
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  });
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === "visible";
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id);
+    });
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event;
+  const clonedRequest = request.clone();
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries());
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers["x-msw-bypass"];
+
+    return fetch(clonedRequest, { headers });
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough();
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough();
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get("x-msw-bypass") === "true") {
+    return passthrough();
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: "REQUEST",
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  });
+
+  switch (clientMessage.type) {
+    case "MOCK_RESPONSE": {
+      return respondWithMock(clientMessage.data);
+    }
+
+    case "MOCK_NOT_FOUND": {
+      return passthrough();
+    }
+
+    case "NETWORK_ERROR": {
+      const { name, message } = clientMessage.data;
+      const networkError = new Error(message);
+      networkError.name = name;
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError;
+    }
+  }
+
+  return passthrough();
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel();
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error);
+      }
+
+      resolve(event.data);
+    };
+
+    client.postMessage(message, [channel.port2]);
+  });
+}
+
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs);
+  });
+}
+
+async function respondWithMock(response) {
+  await sleep(response.delay);
+  return new Response(response.body, response);
+}

client/src/app/api/rest.ts

@@ -748,9 +748,13 @@ export const updateProxy = (obj: Proxy): Promise<Proxy> =>
 export const getQuestionnaires = (): Promise<Questionnaire[]> =>
   axios.get(QUESTIONNAIRES).then((response) => response.data);
 
+// TODO: The update handlers in hub don't return any content (success is a response code
+// TODO:  of 204 - NoContext) ... the return type does not make sense.
 export const updateQuestionnaire = (
   obj: Questionnaire
 ): Promise<Questionnaire> => axios.put(`${QUESTIONNAIRES}/${obj.id}`, obj);
 
+// TODO: The delete handlers in hub don't return any content (success is a response code
+// TODO:  of 204 - NoContext) ... the return type does not make sense.
 export const deleteQuestionnaire = (id: number): Promise<Questionnaire> =>
   axios.delete(`${QUESTIONNAIRES}/${id}`);