add jsx/state test

integration/text.test.ts

@@ -1,81 +0,0 @@
-import test from "ava"
-import { Client, TextChannel } from "discord.js"
-import { nanoid } from "nanoid"
-import { raise } from "../src/helpers/raise.js"
-import { createRoot } from "../src/render.js"
-import { testBotToken, testChannelId } from "./test-environment.js"
-
-const client = new Client({
-  intents: ["GUILDS"],
-})
-
-let channel: TextChannel
-
-test.before(async () => {
-  await client.login(testBotToken)
-
-  const result =
-    client.channels.cache.get(testChannelId) ??
-    (await client.channels.fetch(testChannelId)) ??
-    raise("Channel not found")
-
-  if (!(result instanceof TextChannel)) {
-    throw new TypeError("Channel must be a text channel")
-  }
-
-  channel = result
-})
-
-test.after(() => {
-  client.destroy()
-})
-
-test("rendering text", async (t) => {
-  const root = createRoot(channel)
-
-  const content = nanoid()
-  await root.render(content)
-
-  {
-    const messages = await channel.messages.fetch()
-    t.true(messages.some((m) => m.content === content))
-  }
-
-  const newContent = nanoid()
-  await root.render(newContent)
-
-  {
-    const messages = await channel.messages.fetch()
-    t.true(messages.some((m) => m.content === newContent))
-  }
-
-  await root.render(false)
-
-  {
-    const messages = await channel.messages.fetch()
-    t.false(messages.some((m) => m.content === newContent))
-  }
-})
-
-test("rapid updates", async (t) => {
-  const root = createRoot(channel)
-
-  const content = nanoid()
-  const newContent = nanoid()
-
-  void root.render(content)
-  await root.render(newContent)
-
-  {
-    const messages = await channel.messages.fetch()
-    t.true(messages.some((m) => m.content === newContent))
-  }
-
-  void root.render(content)
-  await root.render(false)
-
-  {
-    const messages = await channel.messages.fetch()
-    t.false(messages.some((m) => m.content === newContent))
-  }
-})

integration/text.test.tsx

@@ -0,0 +1,106 @@
+import type { ExecutionContext } from "ava"
+import test from "ava"
+import { Client, TextChannel } from "discord.js"
+import { nanoid } from "nanoid"
+import React, { useState } from "react"
+import { raise } from "../src/helpers/raise.js"
+import { createRoot } from "../src/render.js"
+import { testBotToken, testChannelId } from "./test-environment.js"
+
+const client = new Client({
+  intents: ["GUILDS"],
+})
+
+let channel: TextChannel
+
+test.before(async () => {
+  await client.login(testBotToken)
+
+  const result =
+    client.channels.cache.get(testChannelId) ??
+    (await client.channels.fetch(testChannelId)) ??
+    raise("Channel not found")
+
+  if (!(result instanceof TextChannel)) {
+    throw new TypeError("Channel must be a text channel")
+  }
+
+  channel = result
+})
+
+test.after(() => {
+  client.destroy()
+})
+
+test("rendering text", async (t) => {
+  const root = createRoot(channel)
+
+  const content = nanoid()
+  await root.render(content)
+
+  await assertSomeMessageHasContent(t, content)
+
+  const newContent = nanoid()
+  await root.render(newContent)
+
+  await assertSomeMessageHasContent(t, newContent)
+
+  await root.render(false)
+
+  await assertNoMessageHasContent(t, newContent)
+})
+
+test("rapid updates", async (t) => {
+  const root = createRoot(channel)
+
+  const content = nanoid()
+  const newContent = nanoid()
+
+  void root.render(content)
+  await root.render(newContent)
+
+  await assertSomeMessageHasContent(t, newContent)
+
+  void root.render(content)
+  await root.render(false)
+
+  await assertNoMessageHasContent(t, newContent)
+})
+
+test("state", async (t) => {
+  let setMessage: (message: string) => void
+
+  const initialMessage = nanoid()
+  const newMessage = nanoid()
+
+  function Counter() {
+    const [message, setMessage_] = useState(initialMessage)
+    setMessage = setMessage_
+    return `state: ${message}` as any
+  }
+
+  const root = createRoot(channel)
+  await root.render(<Counter />)
+
+  await assertSomeMessageHasContent(t, initialMessage)
+
+  setMessage!(newMessage)
+  await root.awaitActions()
+
+  await assertSomeMessageHasContent(t, newMessage)
+
+  await root.destroy()
+})
+
+async function assertSomeMessageHasContent(
+  t: ExecutionContext,
+  content: string,
+) {
+  const messages = await channel.messages.fetch()
+  t.true(messages.some((m) => m.content.includes(content)))
+}
+
+async function assertNoMessageHasContent(t: ExecutionContext, content: string) {
+  const messages = await channel.messages.fetch()
+  t.true(messages.every((m) => !m.content.includes(content)))
+}

package.json

@@ -78,7 +78,8 @@
   },
   "ava": {
     "extensions": {
-      "ts": "module"
+      "ts": "module",
+      "tsx": "module"
     },
     "nodeArguments": [
       "--loader=esbuild-node-loader",
@@ -86,7 +87,8 @@
       "--no-warnings"
     ],
     "files": [
-      "{src,integration}/**/*.test.ts"
-    ]
+      "{src,integration}/**/*.test.{ts,tsx}"
+    ],
+    "serial": true
   }
 }

src/render.ts

@@ -18,5 +18,6 @@ export function createRoot(target: ReacordRenderTarget) {
       reconciler.updateContainer(null, containerId)
       return container.awaitActions()
     },
+    awaitActions: () => container.awaitActions(),
   }
 }

tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "@itsmapleleaf/configs/tsconfig.app",
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "exclude": ["dist", "node_modules"]
 }