Initial stringify extension implementation

Author: nickserv

src/fixtures/Example.json

@@ -22,20 +22,11 @@
       ]
     },
     {
-      "type": "click",
-      "target": "main",
+      "type": "waitForElement",
+      "frame": [],
       "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.test.js

@@ -2,10 +2,11 @@
  * @jest-environment url
  * @jest-environment-options { "url": "https://example.com/" }
  */
-const { screen } = require("@testing-library/dom")
+const { screen, waitFor } = require("@testing-library/dom")
 require("@testing-library/jest-dom")
 
-test("Example", () => {
+test("Example", async () => {
   expect(location.href).toBe("https://example.com/")
-  expect(screen.getByText("Example Domain")).toBeInTheDocument()
+  expect(document.title).toBe("Example Domain")
+  await waitFor(() => screen.getByText("More information..."))
 })

src/index.ts

@@ -1,6 +1,98 @@
-import { stringify, StringifyExtension, type UserFlow } from "@puppeteer/replay"
+import {
+  Selector,
+  stringify,
+  StringifyExtension,
+  type LineWriter,
+  type NavigateStep,
+  type Step,
+  type UserFlow,
+} from "@puppeteer/replay"
 
-export class Extension extends StringifyExtension {}
+export class Extension extends StringifyExtension {
+  async beforeAllSteps(out: LineWriter, flow: UserFlow) {
+    // Jest docblock
+    out.appendLine("/**")
+    const step = flow.steps.find((step) => step.type === "navigate") as
+      | NavigateStep
+      | undefined
+    if (step) {
+      out.appendLine(" * @jest-environment url")
+      out.appendLine(` * @jest-environment-options { "url": "${step.url}" }`)
+    } else {
+      out.appendLine(" * @jest-environment jsdom")
+    }
+    out.appendLine(" */")
+
+    // Imports
+    out.appendLine(
+      'const { screen, waitFor } = require("@testing-library/dom")',
+    )
+    out.appendLine('require("@testing-library/jest-dom")')
+
+    out.appendLine("")
+
+    // Test
+    out.appendLine(`test(${JSON.stringify(flow.title)}, async () => {`)
+    out.startBlock()
+  }
+
+  async afterAllSteps(out: LineWriter) {
+    // Test
+    out.endBlock()
+    out.appendLine("})")
+  }
+
+  stringifySelector(selector: Selector) {
+    const selectorString = Array.isArray(selector) ? selector[0] : selector
+
+    if (selectorString.startsWith("aria/")) {
+      return `screen.getByText("${selectorString.slice(5)}")`
+    } else {
+      return `document.querySelector("${selectorString}")`
+    }
+  }
+
+  async stringifyStep(out: LineWriter, step: Step, flow: UserFlow) {
+    // Events
+    switch (step.type) {
+      case "click":
+        out.appendLine(
+          `userEvent.click(${this.stringifySelector(step.selectors[0])}")`,
+        )
+        break
+      case "waitForElement":
+        out.appendLine(
+          `await waitFor(() => ${this.stringifySelector(step.selectors[0])})`,
+        )
+        break
+      case "navigate":
+      case "setViewport":
+        break
+      default:
+        console.log(
+          `Warning: Testing Library does not currently handle migrating steps of type: ${step.type}. Please check the output to see how this might affect your test.`,
+        )
+    }
+
+    // Assertions
+    if (step.type === "navigate") {
+      if (step === flow.steps.find((step) => step.type === "navigate")) {
+        for (const { url, title } of step.assertedEvents ?? []) {
+          if (url) {
+            out.appendLine(`expect(location.href).toBe("${url}")`)
+          }
+          if (title) {
+            out.appendLine(`expect(document.title).toBe("${title}")`)
+          }
+        }
+      } else {
+        console.log(
+          "Warning: Testing Library does not currently handle more than one navigation step per test.",
+        )
+      }
+    }
+  }
+}
 
 if (process.env.NODE_ENV !== "test") {
   class RecorderPlugin {