Set up an integration test

Author: nickserv

package-lock.json

@@ -3,13 +3,16 @@
   "scripts": {
     "start": "webpack --mode=development --watch",
     "build": "webpack --mode=production",
-    "test": "tsc"
+    "type": "tsc",
+    "test": "jest"
   },
   "dependencies": {
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-typescript": "^7.18.6",
     "@puppeteer/replay": "^0.6.1",
+    "@types/jest": "^28.1.6",
+    "jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
@@ -27,5 +30,10 @@
     ]
   },
   "browserslist": "chrome 104",
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/fixtures/"
+    ]
+  },
   "prettier": "prettier-config-nick"
 }

package.json

@@ -0,0 +1,42 @@
+{
+  "title": "Example",
+  "steps": [
+    {
+      "type": "setViewport",
+      "width": 0,
+      "height": 0,
+      "deviceScaleFactor": 1,
+      "isMobile": false,
+      "hasTouch": false,
+      "isLandscape": false
+    },
+    {
+      "type": "navigate",
+      "url": "https://example.com/",
+      "assertedEvents": [
+        {
+          "type": "navigation",
+          "url": "https://example.com/",
+          "title": "Example Domain"
+        }
+      ]
+    },
+    {
+      "type": "click",
+      "target": "main",
+      "selectors": [
+        ["aria/More information..."],
+        ["body > div > p:nth-child(3) > a"]
+      ],
+      "offsetY": 0,
+      "offsetX": 0,
+      "assertedEvents": [
+        {
+          "type": "navigation",
+          "url": "https://www.iana.org/domains/reserved",
+          "title": ""
+        }
+      ]
+    }
+  ]
+}

src/fixtures/Example.json

@@ -0,0 +1,11 @@
+/**
+ * @jest-environment url
+ * @jest-environment-options { "url": "https://example.com/" }
+ */
+const { screen } = require("@testing-library/dom")
+require("@testing-library/jest-dom")
+
+test("Example", () => {
+  expect(location.href).toBe("https://example.com/")
+  expect(screen.getByText("Example Domain")).toBeInTheDocument()
+})

src/fixtures/example.test.js

@@ -1,13 +1,17 @@
-import { stringify, type UserFlow } from "@puppeteer/replay"
+import { stringify, StringifyExtension, type UserFlow } from "@puppeteer/replay"
 
-class RecorderPlugin {
-  stringify(recording: UserFlow) {
-    return stringify(recording)
+export class Extension extends StringifyExtension {}
+
+if (process.env.NODE_ENV !== "test") {
+  class RecorderPlugin {
+    stringify(recording: UserFlow) {
+      return stringify(recording, { extension: new Extension() })
+    }
   }
-}
 
-chrome.devtools.recorder.registerRecorderExtensionPlugin(
-  new RecorderPlugin(),
-  "Testing Library",
-  "application/javascript",
-)
+  chrome.devtools.recorder.registerRecorderExtensionPlugin(
+    new RecorderPlugin(),
+    "Testing Library",
+    "application/javascript",
+  )
+}

src/index.ts

@@ -0,0 +1,11 @@
+import { readFile } from "fs/promises"
+import { join } from "path"
+import { stringify, UserFlow } from "@puppeteer/replay"
+import { Extension } from "."
+import flow from "./fixtures/Example.json"
+
+test("Extension", async () => {
+  expect(
+    await stringify(flow as UserFlow, { extension: new Extension() }),
+  ).toBe(await readFile(join(__dirname, "fixtures/example.test.js"), "utf8"))
+})

src/test.ts

@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "strict": true,
     "moduleResolution": "Node",
+    "resolveJsonModule": true,
     "noEmit": true,
     "checkJs": true,
     "esModuleInterop": true,
     "target": "ES2015"
   },
-  "exclude": ["dist"]
+  "exclude": ["src/fixtures/*.test.*", "dist"]
 }