Setup more robust @replayio/playwright tests

package.json

@@ -32,8 +32,7 @@
     "@types/ws": "^8",
     "prettier": "^2.7.1",
     "replayio": "workspace:^",
-    "typescript": "^5.4.5",
-    "ws": "^8.17.0"
+    "typescript": "^5.4.5"
   },
   "dependencies": {
     "node-fetch": "^3.3.1"

packages/playwright/jest.config.js

@@ -0,0 +1,8 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  testTimeout: 20000,
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["**/(*.)+(spec|test).[jt]s?(x)", "!**/fixtures-app/**"],
+  // TODO: implement dependencyExtractor: the whole src directory and the whole fixture app should be added here
+};

packages/playwright/package.json

@@ -17,8 +17,9 @@
   "scripts": {
     "prepare": "yarn run build",
     "build": "rm -rf dist/ tsconfig.tsbuildinfo && tsc",
-    "test": "echo \"Error: no test specified\"",
-    "typecheck": "tsc --noEmit"
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "fixtures-app": "next dev tests/fixtures-app"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
@@ -28,6 +29,12 @@
     "@types/stack-utils": "^2.0.3",
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.5.10",
+    "jest": "^28.1.3",
+    "msw": "2.3.0-ws.rc-6",
+    "next": "^14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^28.0.6",
     "typescript": "^5.4.5"
   },
   "repository": {
@@ -45,6 +52,7 @@
     "@replayio/test-utils": "workspace:^",
     "debug": "^4.3.4",
     "stack-utils": "^2.0.6",
+    "undici": "^5.28.4",
     "uuid": "^8.3.2",
     "ws": "^8.13.0"
   },

packages/playwright/tests/fixtures-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/playwright/tests/fixtures-app/app/_pw-utils/network-mock-global-setup.ts

@@ -0,0 +1,121 @@
+import type { FullConfig } from "@playwright/test";
+import type {
+  addOriginalSourceResult,
+  addSourceMapResult,
+  beginRecordingUploadParameters,
+  beginRecordingUploadResult,
+  endRecordingUploadResult,
+  existsResult,
+  setAccessTokenResult,
+  setRecordingMetadataResult,
+} from "@replayio/protocol";
+import { WebSocket } from "undici";
+
+async function globalSetup(_config: FullConfig) {
+  (globalThis as any).WebSocket = WebSocket;
+
+  const { http, ws, HttpResponse } = await import("msw");
+  const { setupServer } = await import("msw/node");
+
+  const server = setupServer(
+    http.get("*", async ({ request }) => {
+      switch (request.url) {
+        case "https://dispatch.replay.io/": {
+          return new HttpResponse("", {
+            status: 200,
+          });
+        }
+        default:
+          throw new Error(`Unexpected GET to: ${request.url}`);
+      }
+    }),
+    http.post("*", async ({ request }) => {
+      switch (request.url) {
+        case "https://api.replay.io/v1/graphql": {
+          const body = JSON.parse(await request.text());
+
+          switch (body.name) {
+            case "AddTestsToShard":
+              // TODO: we are interested in the data that we sent out here
+              return new HttpResponse(JSON.stringify({}));
+            case "CompleteTestRunShard":
+              return new HttpResponse(JSON.stringify({}));
+            case "CreateTestRunShard":
+              return new HttpResponse(
+                JSON.stringify({
+                  data: {
+                    startTestRunShard: {
+                      testRunShardId: "test-run-shard-id",
+                    },
+                  },
+                })
+              );
+            default:
+              throw new Error(`Unexpected graphql operation name: ${body.name}`);
+          }
+        }
+        case "https://webhooks.replay.io/api/metrics":
+          return new HttpResponse(JSON.stringify({}));
+        default:
+          throw new Error(`Unexpected POST to: ${request.url}`);
+      }
+    }),
+    http.put("*", async ({ request }) => {
+      if (request.url.startsWith("https://app.replay.io/recording/")) {
+        return new HttpResponse(JSON.stringify({}));
+      }
+      throw new Error(`Unexpected PUT to: ${request.url}`);
+    })
+  );
+
+  const wsHandler = ws.link("wss://dispatch.replay.io").on("connection", ({ client, server }) => {
+    server.connect();
+
+    client.addEventListener("message", event => {
+      event.preventDefault();
+      const data = JSON.parse(String(event.data));
+      switch (data.method) {
+        case "Authentication.setAccessToken":
+        case "Internal.endRecordingUpload":
+        case "Internal.setRecordingMetadata":
+        case "Recording.addOriginalSource":
+        case "Recording.addSourceMap":
+        case "Resource.exists":
+          client.send(
+            JSON.stringify({
+              id: data.id,
+              result: {} satisfies
+                | addOriginalSourceResult
+                | addSourceMapResult
+                | endRecordingUploadResult
+                | existsResult
+                | setAccessTokenResult
+                | setRecordingMetadataResult,
+            })
+          );
+          return;
+        case "Internal.beginRecordingUpload": {
+          const params: beginRecordingUploadParameters = data.params;
+          client.send(
+            JSON.stringify({
+              id: data.id,
+              result: {
+                recordingId: params.recordingId!,
+                uploadLink: `https://app.replay.io/recording/${params.recordingId}`,
+              } satisfies beginRecordingUploadResult,
+            })
+          );
+          return;
+        }
+        default:
+          throw new Error(`Unexpected protocol method: ${data.method}`);
+      }
+    });
+  });
+
+  server.use(wsHandler);
+
+  server.listen();
+}
+
+export default globalSetup;