Refactor notifyShadowReady and add unit tests

.devcontainer/devcontainer.json

@@ -0,0 +1,40 @@
+
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			"settings": {},
+			"extensions": [
+				"streetsidesoftware.code-spell-checker"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [3000],
+
+	// Use 'portsAttributes' to set default properties for specific forwarded ports. 
+	// More info: https://containers.dev/implementors/json_reference/#port-attributes
+	"portsAttributes": {
+		"3000": {
+			"label": "Hello Remote World",
+			"onAutoForward": "notify"
+		}
+	},
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "npm install"
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

packages/session-ui/package.json

@@ -29,6 +29,7 @@
     "test": "bun test src --only-failures"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "20.0.11",
     "@tsconfig/node22": "catalog:",
     "@types/bun": "catalog:",
     "@types/luxon": "catalog:",

packages/session-ui/src/pierre/file-runtime.test.ts

@@ -0,0 +1,143 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test"
+import { GlobalRegistrator } from "@happy-dom/global-registrator"
+
+import { createReadyWatcher, notifyShadowReady } from "./file-runtime"
+
+beforeAll(() => {
+  GlobalRegistrator.register()
+
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+    callback(0)
+    return 1
+  }) as typeof requestAnimationFrame
+})
+
+afterAll(() => {
+  GlobalRegistrator.unregister()
+})
+
+describe("notifyShadowReady", () => {
+  test("calls onReady when the shadow root already exists and is ready", () => {
+    const state = createReadyWatcher()
+    const container = document.createElement("div")
+    const host = document.createElement("div")
+    const root = host.attachShadow({ mode: "open" })
+
+    let readyCalled = false
+
+    notifyShadowReady({
+      state,
+      container,
+      getRoot: () => root,
+      isReady: () => true,
+      onReady: () => {
+        readyCalled = true
+      },
+    })
+
+    expect(readyCalled).toBe(true)
+  })
+
+  test("waits until an existing shadow root becomes ready", async () => {
+    const state = createReadyWatcher()
+    const container = document.createElement("div")
+    const host = document.createElement("div")
+    const root = host.attachShadow({ mode: "open" })
+
+    let ready = false
+    let readyCalled = false
+
+    notifyShadowReady({
+      state,
+      container,
+      getRoot: () => root,
+      isReady: () => ready,
+      onReady: () => {
+        readyCalled = true
+      },
+    })
+
+    expect(readyCalled).toBe(false)
+
+    ready = true
+    root.appendChild(document.createElement("span"))
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(readyCalled).toBe(true)
+  })
+
+  test("waits for the shadow root to become available", async () => {
+    const state = createReadyWatcher()
+    const container = document.createElement("div")
+
+    let root: ShadowRoot | undefined
+    let readyCalled = false
+
+    notifyShadowReady({
+      state,
+      container,
+      getRoot: () => root,
+      isReady: () => true,
+      onReady: () => {
+        readyCalled = true
+      },
+    })
+
+    expect(readyCalled).toBe(false)
+
+    const host = document.createElement("div")
+    root = host.attachShadow({ mode: "open" })
+
+    container.appendChild(host)
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(readyCalled).toBe(true)
+  })
+
+  test("does not call onReady for an outdated watcher", () => {
+    const state = createReadyWatcher()
+    const container = document.createElement("div")
+    const host = document.createElement("div")
+    const root = host.attachShadow({ mode: "open" })
+
+    const callbacks: FrameRequestCallback[] = []
+
+    globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+      callbacks.push(callback)
+      return callbacks.length
+    }) as typeof requestAnimationFrame
+
+    let firstReadyCalled = false
+    let secondReadyCalled = false
+
+    notifyShadowReady({
+      state,
+      container,
+      getRoot: () => root,
+      isReady: () => true,
+      onReady: () => {
+        firstReadyCalled = true
+      },
+      settleFrames: 1,
+    })
+
+    notifyShadowReady({
+      state,
+      container,
+      getRoot: () => root,
+      isReady: () => true,
+      onReady: () => {
+        secondReadyCalled = true
+      },
+    })
+
+    while (callbacks.length > 0) {
+      callbacks.shift()?.(0)
+    }
+
+    expect(firstReadyCalled).toBe(false)
+    expect(secondReadyCalled).toBe(true)
+  })
+})