Implement change, hover, doubleClick, and waitForExpression

Author: nickserv

src/index.ts

@@ -44,13 +44,32 @@ export class Extension implements StringifyExtension {
 
   async stringifyStep(out: LineWriter, step: Step, flow: UserFlow) {
     switch (step.type) {
+      case "change":
+        out.appendLine(
+          `await userEvent.type(${stringifySelector(
+            step.selectors[0],
+          )}, ${JSON.stringify(step.value)})`,
+        )
+        break
       case "click":
         out.appendLine(
           `await userEvent.click(${stringifySelector(step.selectors[0])}${
             step.button === "secondary" ? ", { buttons: 2 }" : ""
           })`,
         )
         break
+      case "hover":
+        out.appendLine(
+          `await userEvent.hover(${stringifySelector(step.selectors[0])})`,
+        )
+        break
+      case "doubleClick":
+        out.appendLine(
+          `await userEvent.dblClick(${stringifySelector(step.selectors[0])}${
+            step.button === "secondary" ? ", { buttons: 2 }" : ""
+          })`,
+        )
+        break
       case "navigate":
         if (step === flow.steps.find((step) => step.type === "navigate")) {
           for (const { url, title } of step.assertedEvents ?? []) {
@@ -74,6 +93,9 @@ export class Extension implements StringifyExtension {
           `await waitFor(() => ${stringifySelector(step.selectors[0])})`,
         )
         break
+      case "waitForExpression":
+        out.appendLine(`await waitFor(() => ${step.expression})`)
+        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.`,

src/test.ts

@@ -22,6 +22,14 @@ describe("Extension", () => {
 
   describe("stringifyStep", () => {
     test.each<[Step, string]>([
+      [
+        {
+          type: "change",
+          selectors,
+          value: "value",
+        },
+        'await userEvent.type(screen.getByText("Test"), "value")',
+      ],
       [
         {
           type: "click",
@@ -41,6 +49,22 @@ describe("Extension", () => {
         },
         'await userEvent.click(screen.getByText("Test"), { buttons: 2 })',
       ],
+      [
+        {
+          type: "hover",
+          selectors,
+        },
+        'await userEvent.hover(screen.getByText("Test"))',
+      ],
+      [
+        {
+          type: "doubleClick",
+          selectors,
+          offsetX: 0,
+          offsetY: 0,
+        },
+        'await userEvent.dblClick(screen.getByText("Test"))',
+      ],
       [
         {
           type: "navigate",
@@ -62,6 +86,13 @@ describe("Extension", () => {
         },
         'await waitFor(() => screen.getByText("Test"))',
       ],
+      [
+        {
+          type: "waitForExpression",
+          expression: "Promise.resolve()",
+        },
+        "await waitFor(() => Promise.resolve())",
+      ],
     ])("%p", async (step, expected) => {
       const writer = new LineWriterImpl("  ")
       await extension.stringifyStep(writer, step, { title: "", steps: [step] })