@opentf/web-test 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @opentf/web-test
+
+## 1.0.0
+
+### Minor Changes
+
+- bb1c71b: Upgrade to new architecuture.
+
+### Patch Changes
+
+- Updated dependencies [bb1c71b]
+  - @opentf/web@0.5.0

package/README.md

@@ -0,0 +1,58 @@
+# @opentf/web-test
+
+A testing utility for **OTF Web**, inspired by React Testing Library.
+
+## Features
+
+- **DOM Rendering**: Renders components into a virtual DOM (`happy-dom`).
+- **Reactive Assertions**: Supports testing components that use signals and effects.
+- **Compiler Integration**: Automatically transpiles JSX components using the framework's native compiler.
+- **Testing Library Utilities**: Bundles `@testing-library/dom` for familiar querying.
+
+## Installation
+
+```bash
+bun add -d @opentf/web-test
+```
+
+## Configuration
+
+To enable automatic JSX compilation for tests, add a `bunfig.toml` to your package or root:
+
+```toml
+[test]
+preload = ["@opentf/web-test/setup"]
+```
+
+## Usage
+
+### Writing a Test
+
+```jsx
+import { expect, test, describe } from "bun:test";
+import { render, userEvent } from "@opentf/web-test";
+import MyComponent from "./MyComponent.jsx";
+
+describe("MyComponent", () => {
+  test("reacts to clicks", async () => {
+    const { getByTestId } = render(MyComponent);
+    const user = userEvent.setup();
+    const btn = getByTestId("btn");
+
+    expect(btn.textContent).toBe("Count: 0");
+    await user.click(btn);
+    expect(btn.textContent).toBe("Count: 1");
+  });
+});
+```
+
+### API Reference
+
+#### `render(Component, props = {})`
+Renders a component into a container. Returns an object with:
+- `container`: The DOM element containing the component.
+- `unmount()`: A function to remove the component and trigger cleanup.
+- ...all queries from `@testing-library/dom` (e.g., `getByTestId`, `queryByText`).
+
+#### `cleanup()`
+Removes all mounted components from the DOM. This is automatically called `afterEach` test if you use the recommended setup.

package/index.js

@@ -0,0 +1,69 @@
+import { queries, getQueriesForElement } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+let mountedComponents = new Set();
+
+/**
+ * Renders a compiled Web App Framework component into a DOM container.
+ * 
+ * @param {Function|HTMLElement} Component - The compiled component function or class.
+ * @param {Object} props - Properties to pass to the component.
+ * @returns {Object} - Testing library queries bound to the container.
+ */
+export function render(Component, props = {}) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  
+  let element;
+  
+  // If the Component is a function, it should return a DOM node (since our compiler generates direct DOM nodes)
+  // Wait, the compiler returns a Web Component (HTMLElement) OR an instance of a function.
+  // Actually, functional components are compiled to standard HTMLElements that extend HTMLElement.
+  if (typeof Component === 'function' && Component.prototype instanceof HTMLElement) {
+    // If it's a registered Web Component class
+    const tagName = Component.prototype.tagName?.toLowerCase() || Component.name.toLowerCase();
+    element = document.createElement(tagName);
+    Object.assign(element, props);
+    container.appendChild(element);
+  } else if (typeof Component === 'function') {
+    // If it's a functional component not converted to a class (though our compiler usually does)
+    element = Component(props);
+    if (element instanceof Node) {
+      container.appendChild(element);
+    }
+  } else if (typeof Component === 'string') {
+    // It's a tag name
+    element = document.createElement(Component);
+    Object.assign(element, props);
+    container.appendChild(element);
+  } else {
+    throw new Error("Invalid component type passed to render()");
+  }
+
+  mountedComponents.add(container);
+
+  return {
+    container,
+    unmount: () => {
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+      mountedComponents.delete(container);
+    },
+    ...getQueriesForElement(container, queries)
+  };
+}
+
+export { userEvent };
+
+/**
+ * Cleans up all mounted components. Automatically called after each test if supported.
+ */
+export function cleanup() {
+  mountedComponents.forEach(container => {
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  });
+  mountedComponents.clear();
+}

package/init-dom.js

@@ -0,0 +1,12 @@
+import { GlobalWindow } from "happy-dom";
+
+// Initialize happy-dom explicitly
+const win = new GlobalWindow();
+globalThis.window = win;
+globalThis.document = win.document;
+globalThis.HTMLElement = win.HTMLElement;
+globalThis.customElements = win.customElements;
+globalThis.Node = win.Node;
+globalThis.navigator = win.navigator;
+globalThis.Event = win.Event;
+globalThis.CustomEvent = win.CustomEvent;

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@opentf/web-test",
+  "version": "1.0.0",
+  "description": "DOM testing utilities for OTF Web",
+  "type": "module",
+  "main": "index.js",
+  "peerDependencies": {
+    "@opentf/web": "*"
+  },
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/user-event": "^14.6.1",
+    "happy-dom": "^20.9.0"
+  }
+}

package/setup.js

@@ -0,0 +1,50 @@
+import "./init-dom.js";
+import { plugin } from "bun";
+import { existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { afterEach } from "bun:test";
+import { cleanup } from "./index.js";
+
+// Locate the `otfwc` IR compiler (the workspace debug build), overridable via
+// OTFWC_BIN. Walk up from this file to the Cargo workspace.
+function findUp(name, from) {
+  let dir = from;
+  while (true) {
+    if (existsSync(join(dir, name))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+const workspace = findUp("Cargo.toml", import.meta.dir);
+const otfwc =
+  process.env.OTFWC_BIN ??
+  (workspace ? join(workspace, "target", "debug", "otfwc") : "otfwc");
+
+// Compile `.jsx`/`.tsx` test fixtures through the OTF Web compiler so tests can
+// import components directly. Page/layout/404 modules become factories; everything
+// else a Custom Element (matching the toolchain).
+plugin({
+  name: "otfw-jsx",
+  setup(build) {
+    build.onLoad({ filter: /\.[jt]sx$/ }, async (args) => {
+      const base = args.path.split("/").pop().replace(/\.[jt]sx$/, "");
+      const isPage = base === "page" || base === "layout" || base === "404";
+      const argv = ["build"];
+      if (!isPage) argv.push("--component");
+      argv.push("--stdin", args.path);
+      const source = await Bun.file(args.path).text();
+      const proc = Bun.spawnSync([otfwc, ...argv], {
+        stdin: new TextEncoder().encode(source),
+      });
+      if (proc.exitCode !== 0) {
+        throw new Error(`otfwc failed for ${args.path}:\n${proc.stderr.toString()}`);
+      }
+      return { contents: proc.stdout.toString(), loader: "js" };
+    });
+  },
+});
+
+afterEach(() => {
+  cleanup();
+});