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,9 +38,7 @@ test("kitchen sink", async () => {
         />
       </Embed>
     </>,
-  )
-
-  await assertMessages(adapter, [
+    [
       {
         actionRows: [],
         content: "",
@@ -75,11 +75,12 @@ test("kitchen sink", async () => {
           },
         ],
       },
-  ])
+    ],
+  )
 })
 
 test("author variants", async () => {
-  reply.render(
+  await assertRender(
     <>
       <Embed>
         <EmbedAuthor iconUrl="https://example.com/author.png">
@@ -90,9 +91,7 @@ test("author variants", async () => {
         <EmbedAuthor iconUrl="https://example.com/author.png" />
       </Embed>
     </>,
-  )
-
-  await assertMessages(adapter, [
+    [
       {
         content: "",
         actionRows: [],
@@ -111,11 +110,12 @@ test("author variants", async () => {
           },
         ],
       },
-  ])
+    ],
+  )
 })
 
 test("field variants", async () => {
-  reply.render(
+  await assertRender(
     <>
       <Embed>
         <EmbedField name="field name" value="field value" />
@@ -126,9 +126,7 @@ test("field variants", async () => {
         <EmbedField name="field name" />
       </Embed>
     </>,
-  )
-
-  await assertMessages(adapter, [
+    [
       {
         content: "",
         actionRows: [],
@@ -157,12 +155,14 @@ test("field variants", async () => {
           },
         ],
       },
-  ])
+    ],
+  )
 })
 
 test("footer variants", async () => {
   const now = new Date()
-  reply.render(
+
+  await assertRender(
     <>
       <Embed>
         <EmbedFooter text="footer text" />
@@ -180,9 +180,7 @@ test("footer variants", async () => {
         <EmbedFooter iconUrl="https://example.com/footer.png" timestamp={now} />
       </Embed>
     </>,
-  )
-
-  await assertMessages(adapter, [
+    [
       {
         content: "",
         actionRows: [],
@@ -213,13 +211,14 @@ test("footer variants", async () => {
           },
         ],
       },
-  ])
+    ],
+  )
 })
 
 test("embed props", async () => {
   const now = new Date()
 
-  reply.render(
+  await assertRender(
     <Embed
       title="title text"
       description="description text"
@@ -246,9 +245,7 @@ test("embed props", async () => {
         { name: "block field", value: "block field value" },
       ]}
     />,
-  )
-
-  await assertMessages(adapter, [
+    [
       {
         content: "",
         actionRows: [],
@@ -277,5 +274,6 @@ test("embed props", async () => {
           },
         ],
       },
-  ])
+    ],
+  )
 })

test/link.test.tsx

@@ -1,22 +1,17 @@
 import React from "react"
-import { Link, Reacord } from "../library/main"
-import { TestAdapter, TestCommandInteraction } from "../library/testing"
-import { assertMessages } from "./assert-messages"
+import { Link } from "../library/main"
+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("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: [],
@@ -41,5 +36,6 @@ test("link", async () => {
           ],
         ],
       },
-  ])
+    ],
+  )
 })

test/reacord.test.tsx

@@ -1,16 +1,15 @@
 import * as React from "react"
-import { Button, Embed, EmbedField, EmbedTitle, Reacord } from "../library/main"
-import { TestAdapter, TestCommandInteraction } from "../library/testing"
-import { assertMessages } from "./assert-messages"
+import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
+import { TestCommandInteraction } from "../library/testing"
+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"])),
+    ),
+  }))
+}