feat: enable testing in Deno environment without dom polyfill pre-def…

…ined
kt3k · Oct 21, 2024 · 7bead28 · 7bead28
1 parent b44a0b8
commit 7bead28
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -174,6 +174,33 @@ sig.update(1)
 sig.update(2)
 ```
 
+## Write test of components
+
+Use `@b-fuse/deno-dom` for polyfill `document` object. An example of basic test
+case of a component looks like the below:
+
+```ts
+import { DOMParser } from "@b-fuze/deno-dom"
+import { assertEquals } from "@std/assert"
+import { type Context, mount, register } from "@kt3k/cell"
+
+Deno.test("A test case of Component", () => {
+  function Component({ el }: Context) {
+    el.textContent = "a"
+  }
+
+  register(Component, "js-component")
+
+  globalThis.document = new DOMParser().parseFromString(
+    `<body><div class="js-component"></div></body>`,
+    "text/html",
+    // deno-lint-ignore no-explicit-any
+  ) as any
+  mount()
+  assertEquals(document.body.firstChild?.textContent, "a")
+})
+```
+
 ## Prior art
 
 - [capsule](https://github.com/capsidjs/capsule)

diff --git a/dom_polyfill.ts b/dom_polyfill.ts
@@ -1,3 +1,5 @@
+// Copyright 2022-2024 Yoshiya Hinosawa. All rights reserved. MIT license.
+
 import { DOMParser } from "@b-fuze/deno-dom" // deno-lint-ignore no-explicit-any
 ;(globalThis as any).document = new DOMParser().parseFromString(
   "<body></body>",

diff --git a/import_test.ts b/import_test.ts
@@ -0,0 +1,23 @@
+// Copyright 2022-2024 Yoshiya Hinosawa. All rights reserved. MIT license.
+
+import { DOMParser } from "@b-fuze/deno-dom"
+import { assertEquals } from "@std/assert"
+import { type Context, mount, register } from "./mod.ts"
+
+function Component({ el }: Context) {
+  el.textContent = "a"
+}
+
+Deno.test("register doesn't throw without polyfill", () => {
+  register(Component, "js-component")
+})
+
+Deno.test("registered compenent can be mounted", () => {
+  globalThis.document = new DOMParser().parseFromString(
+    `<body><div class="js-component"></div></body>`,
+    "text/html",
+    // deno-lint-ignore no-explicit-any
+  ) as any
+  mount()
+  assertEquals(document.body.firstChild?.textContent, "a")
+})
diff --git a/mod.ts b/mod.ts
@@ -1,4 +1,4 @@
-/*! Cell v0.7.5 | Copyright 2024 Yoshiya Hinosawa and Capsule contributors | MIT license */
+/*! Cell v0.7.5 | Copyright 2022-2024 Yoshiya Hinosawa and Capsule contributors | MIT license */
 import type { GroupSignal, Signal } from "@kt3k/signal"
 import { documentReady, logEvent } from "./util.ts"
 export { GroupSignal, Signal } from "@kt3k/signal"
@@ -325,6 +325,8 @@ export function register<EL extends HTMLElement>(
 
   registry[name] = initializer
 
+  if (!globalThis.document) return
+
   if (document.readyState === "complete") {
     mount()
   } else {

diff --git a/test.ts b/test.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Yoshiya Hinosawa. All rights reserved. MIT license.
+// Copyright 2022-2024 Yoshiya Hinosawa. All rights reserved. MIT license.
 
 import { assert, assertEquals, assertExists, assertThrows } from "@std/assert"
 import { delay } from "@std/async"

diff --git a/util.ts b/util.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Yoshiya Hinosawa. All rights reserved. MIT license.
+// Copyright 2022-2024 Yoshiya Hinosawa. All rights reserved. MIT license.
 
 const READY_STATE_CHANGE = "readystatechange"