improve testing helpers

test/assert-messages.ts

@@ -1,23 +0,0 @@
-import { nextTick } from "node:process"
-import { promisify } from "node:util"
-import { omit } from "../helpers/omit"
-import type { TestAdapter } from "../library/testing"
-
-const nextTickPromise = promisify(nextTick)
-
-export async function assertMessages(
-  adapter: TestAdapter,
-  expected: ReturnType<typeof extractMessageDataSample>,
-) {
-  await nextTickPromise()
-  expect(extractMessageDataSample(adapter)).toEqual(expected)
-}
-
-function extractMessageDataSample(adapter: TestAdapter) {
-  return adapter.messages.map((message) => ({
-    ...message.options,
-    actionRows: message.options.actionRows.map((row) =>
-      row.map((component) => omit(component, ["customId"])),
-    ),
-  }))
-}

test/embed.test.tsx

@@ -10,16 +10,18 @@ import {
   Reacord,
 } from "../library/main"
 import { TestAdapter, TestCommandInteraction } from "../library/testing"
-import { assertMessages } from "./assert-messages"
+import { setupReacordTesting } from "./setup-testing"
 
 const adapter = new TestAdapter()
 const reacord = new Reacord({ adapter })
 const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
 
+const { assertRender } = setupReacordTesting()
+
 test("kitchen sink", async () => {
   const now = new Date()
 
-  reply.render(
+  await assertRender(
     <>
       <Embed color={0xfe_ee_ef}>
         <EmbedAuthor name="author" iconUrl="https://example.com/author.png" />
@@ -36,50 +38,49 @@ test("kitchen sink", async () => {
         />
       </Embed>
     </>,
+    [
+      {
+        actionRows: [],
+        content: "",
+        embeds: [
+          {
+            author: {
+              icon_url: "https://example.com/author.png",
+              name: "author",
+            },
+            color: 0xfe_ee_ef,
+            fields: [
+              {
+                inline: true,
+                name: "field name",
+                value: "field value",
+              },
+              {
+                name: "block field",
+                value: "block field value",
+              },
+            ],
+            footer: {
+              icon_url: "https://example.com/footer.png",
+              text: "footer text",
+            },
+            image: {
+              url: "https://example.com/image.png",
+            },
+            thumbnail: {
+              url: "https://example.com/thumbnail.png",
+            },
+            timestamp: now.toISOString(),
+            title: "title text",
+          },
+        ],
+      },
+    ],
   )
-
-  await assertMessages(adapter, [
-    {
-      actionRows: [],
-      content: "",
-      embeds: [
-        {
-          author: {
-            icon_url: "https://example.com/author.png",
-            name: "author",
-          },
-          color: 0xfe_ee_ef,
-          fields: [
-            {
-              inline: true,
-              name: "field name",
-              value: "field value",
-            },
-            {
-              name: "block field",
-              value: "block field value",
-            },
-          ],
-          footer: {
-            icon_url: "https://example.com/footer.png",
-            text: "footer text",
-          },
-          image: {
-            url: "https://example.com/image.png",
-          },
-          thumbnail: {
-            url: "https://example.com/thumbnail.png",
-          },
-          timestamp: now.toISOString(),
-          title: "title text",
-        },
-      ],
-    },
-  ])
 })
 
 test("author variants", async () => {
-  reply.render(
+  await assertRender(
     <>
       <Embed>
         <EmbedAuthor iconUrl="https://example.com/author.png">
@@ -90,32 +91,31 @@ test("author variants", async () => {
         <EmbedAuthor iconUrl="https://example.com/author.png" />
       </Embed>
     </>,
+    [
+      {
+        content: "",
+        actionRows: [],
+        embeds: [
+          {
+            author: {
+              icon_url: "https://example.com/author.png",
+              name: "author name",
+            },
+          },
+          {
+            author: {
+              icon_url: "https://example.com/author.png",
+              name: "",
+            },
+          },
+        ],
+      },
+    ],
   )
-
-  await assertMessages(adapter, [
-    {
-      content: "",
-      actionRows: [],
-      embeds: [
-        {
-          author: {
-            icon_url: "https://example.com/author.png",
-            name: "author name",
-          },
-        },
-        {
-          author: {
-            icon_url: "https://example.com/author.png",
-            name: "",
-          },
-        },
-      ],
-    },
-  ])
 })
 
 test("field variants", async () => {
-  reply.render(
+  await assertRender(
     <>
       <Embed>
         <EmbedField name="field name" value="field value" />
@@ -126,43 +126,43 @@ test("field variants", async () => {
         <EmbedField name="field name" />
       </Embed>
     </>,
+    [
+      {
+        content: "",
+        actionRows: [],
+        embeds: [
+          {
+            fields: [
+              {
+                name: "field name",
+                value: "field value",
+              },
+              {
+                inline: true,
+                name: "field name",
+                value: "field value",
+              },
+              {
+                inline: true,
+                name: "field name",
+                value: "field value",
+              },
+              {
+                name: "field name",
+                value: "",
+              },
+            ],
+          },
+        ],
+      },
+    ],
   )
-
-  await assertMessages(adapter, [
-    {
-      content: "",
-      actionRows: [],
-      embeds: [
-        {
-          fields: [
-            {
-              name: "field name",
-              value: "field value",
-            },
-            {
-              inline: true,
-              name: "field name",
-              value: "field value",
-            },
-            {
-              inline: true,
-              name: "field name",
-              value: "field value",
-            },
-            {
-              name: "field name",
-              value: "",
-            },
-          ],
-        },
-      ],
-    },
-  ])
 })
 
 test("footer variants", async () => {
   const now = new Date()
-  reply.render(
+
+  await assertRender(
     <>
       <Embed>
         <EmbedFooter text="footer text" />
@@ -180,46 +180,45 @@ test("footer variants", async () => {
         <EmbedFooter iconUrl="https://example.com/footer.png" timestamp={now} />
       </Embed>
     </>,
+    [
+      {
+        content: "",
+        actionRows: [],
+        embeds: [
+          {
+            footer: {
+              text: "footer text",
+            },
+          },
+          {
+            footer: {
+              icon_url: "https://example.com/footer.png",
+              text: "footer text",
+            },
+          },
+          {
+            footer: {
+              text: "footer text",
+            },
+            timestamp: now.toISOString(),
+          },
+          {
+            footer: {
+              icon_url: "https://example.com/footer.png",
+              text: "",
+            },
+            timestamp: now.toISOString(),
+          },
+        ],
+      },
+    ],
   )
-
-  await assertMessages(adapter, [
-    {
-      content: "",
-      actionRows: [],
-      embeds: [
-        {
-          footer: {
-            text: "footer text",
-          },
-        },
-        {
-          footer: {
-            icon_url: "https://example.com/footer.png",
-            text: "footer text",
-          },
-        },
-        {
-          footer: {
-            text: "footer text",
-          },
-          timestamp: now.toISOString(),
-        },
-        {
-          footer: {
-            icon_url: "https://example.com/footer.png",
-            text: "",
-          },
-          timestamp: now.toISOString(),
-        },
-      ],
-    },
-  ])
 })
 
 test("embed props", async () => {
   const now = new Date()
 
-  reply.render(
+  await assertRender(
     <Embed
       title="title text"
       description="description text"
@@ -246,36 +245,35 @@ test("embed props", async () => {
         { name: "block field", value: "block field value" },
       ]}
     />,
+    [
+      {
+        content: "",
+        actionRows: [],
+        embeds: [
+          {
+            title: "title text",
+            description: "description text",
+            url: "https://example.com/",
+            color: 0xfe_ee_ef,
+            timestamp: now.toISOString(),
+            author: {
+              name: "author name",
+              url: "https://example.com/author",
+              icon_url: "https://example.com/author.png",
+            },
+            thumbnail: { url: "https://example.com/thumbnail.png" },
+            image: { url: "https://example.com/image.png" },
+            footer: {
+              text: "footer text",
+              icon_url: "https://example.com/footer.png",
+            },
+            fields: [
+              { name: "field name", value: "field value", inline: true },
+              { name: "block field", value: "block field value" },
+            ],
+          },
+        ],
+      },
+    ],
   )
-
-  await assertMessages(adapter, [
-    {
-      content: "",
-      actionRows: [],
-      embeds: [
-        {
-          title: "title text",
-          description: "description text",
-          url: "https://example.com/",
-          color: 0xfe_ee_ef,
-          timestamp: now.toISOString(),
-          author: {
-            name: "author name",
-            url: "https://example.com/author",
-            icon_url: "https://example.com/author.png",
-          },
-          thumbnail: { url: "https://example.com/thumbnail.png" },
-          image: { url: "https://example.com/image.png" },
-          footer: {
-            text: "footer text",
-            icon_url: "https://example.com/footer.png",
-          },
-          fields: [
-            { name: "field name", value: "field value", inline: true },
-            { name: "block field", value: "block field value" },
-          ],
-        },
-      ],
-    },
-  ])
 })

test/link.test.tsx

@@ -1,45 +1,41 @@
 import React from "react"
-import { Link, Reacord } from "../library/main"
+import { Link } from "../library/main"
-import { TestAdapter, TestCommandInteraction } from "../library/testing"
+import { setupReacordTesting } from "./setup-testing"
-import { assertMessages } from "./assert-messages"
 
-const adapter = new TestAdapter()
+const { assertRender } = setupReacordTesting()
-const reacord = new Reacord({ adapter })
-const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
 
 test("link", async () => {
-  reply.render(
+  await assertRender(
     <>
       <Link url="https://example.com/">link text</Link>
       <Link label="link text" url="https://example.com/" />
       <Link label="link text" url="https://example.com/" disabled />
     </>,
-  )
+    [
-
+      {
-  await assertMessages(adapter, [
+        content: "",
-    {
+        embeds: [],
-      content: "",
+        actionRows: [
-      embeds: [],
+          [
-      actionRows: [
+            {
-        [
+              type: "link",
-          {
+              url: "https://example.com/",
-            type: "link",
+              label: "link text",
-            url: "https://example.com/",
+            },
-            label: "link text",
+            {
-          },
+              type: "link",
-          {
+              url: "https://example.com/",
-            type: "link",
+              label: "link text",
-            url: "https://example.com/",
+            },
-            label: "link text",
+            {
-          },
+              type: "link",
-          {
+              url: "https://example.com/",
-            type: "link",
+              label: "link text",
-            url: "https://example.com/",
+              disabled: true,
-            label: "link text",
+            },
-            disabled: true,
+          ],
-          },
         ],
-      ],
+      },
-    },
+    ],
-  ])
+  )
 })

test/reacord.test.tsx

@@ -1,16 +1,15 @@
 import * as React from "react"
-import { Button, Embed, EmbedField, EmbedTitle, Reacord } from "../library/main"
+import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
-import { TestAdapter, TestCommandInteraction } from "../library/testing"
+import { TestCommandInteraction } from "../library/testing"
-import { assertMessages } from "./assert-messages"
+import { setupReacordTesting } from "./setup-testing"
+
+const { reacord, adapter, assertMessages } = setupReacordTesting()
 
 test("rendering behavior", async () => {
-  const adapter = new TestAdapter()
-  const reacord = new Reacord({ adapter })
-
   const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
   reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 0",
       embeds: [],
@@ -37,7 +36,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("show embed").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 0",
       embeds: [{ title: "the counter" }],
@@ -64,7 +63,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("clicc").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 1",
       embeds: [
@@ -96,7 +95,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("clicc").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 2",
       embeds: [
@@ -128,7 +127,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("hide embed").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 2",
       embeds: [],
@@ -155,7 +154,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("clicc").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 3",
       embeds: [],
@@ -182,7 +181,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("deactivate").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 3",
       embeds: [],
@@ -212,7 +211,7 @@ test("rendering behavior", async () => {
   ])
 
   adapter.findButtonByLabel("clicc").click()
-  await assertMessages(adapter, [
+  await assertMessages([
     {
       content: "count: 3",
       embeds: [],

test/setup-testing.ts

@@ -0,0 +1,44 @@
+import { nextTick } from "node:process"
+import { promisify } from "node:util"
+import type { ReactNode } from "react"
+import { omit } from "../helpers/omit"
+import { Reacord } from "../library/main"
+import { TestAdapter, TestCommandInteraction } from "../library/testing"
+
+const nextTickPromise = promisify(nextTick)
+
+export function setupReacordTesting() {
+  const adapter = new TestAdapter()
+  const reacord = new Reacord({ adapter })
+  const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+
+  async function assertMessages(expected: ReturnType<typeof sampleMessages>) {
+    await nextTickPromise() // wait for the render to complete
+    expect(sampleMessages(adapter)).toEqual(expected)
+  }
+
+  async function assertRender(
+    content: ReactNode,
+    expected: ReturnType<typeof sampleMessages>,
+  ) {
+    reply.render(content)
+    await assertMessages(expected)
+  }
+
+  return {
+    reacord,
+    adapter,
+    reply,
+    assertMessages,
+    assertRender,
+  }
+}
+
+function sampleMessages(adapter: TestAdapter) {
+  return adapter.messages.map((message) => ({
+    ...message.options,
+    actionRows: message.options.actionRows.map((row) =>
+      row.map((component) => omit(component, ["customId"])),
+    ),
+  }))
+}