@fictjs/testing-library 0.2.2 → 0.3.0

package/dist/index.js

@@ -0,0 +1,472 @@
+// src/index.ts
+import {
+  render as fictRender,
+  createRoot,
+  createElement,
+  ErrorBoundary,
+  Suspense,
+  createSuspenseToken
+} from "@fictjs/runtime";
+import { registerErrorHandler } from "@fictjs/runtime/advanced";
+import { __fictPushContext, __fictPopContext } from "@fictjs/runtime/internal";
+import { getQueriesForElement, prettyDOM, queries } from "@testing-library/dom";
+export * from "@testing-library/dom";
+var mountedContainers = /* @__PURE__ */ new Set();
+var mountedHookRoots = /* @__PURE__ */ new Set();
+if (typeof process === "undefined" || !process.env?.FICT_TL_SKIP_AUTO_CLEANUP) {
+  const globalAfterEach = globalThis.afterEach;
+  if (typeof globalAfterEach === "function") {
+    globalAfterEach(() => {
+      cleanup();
+    });
+  }
+}
+function render(view, options = {}) {
+  const {
+    container: providedContainer,
+    baseElement: providedBaseElement,
+    queries: customQueries,
+    wrapper
+  } = options;
+  let container = providedContainer;
+  let baseElement = providedBaseElement;
+  let ownedContainer = false;
+  if (!baseElement) {
+    baseElement = container ?? document.body;
+  }
+  if (!container) {
+    container = baseElement.appendChild(document.createElement("div"));
+    ownedContainer = true;
+  }
+  let wrappedView = view;
+  if (wrapper) {
+    const Wrapper = wrapper;
+    wrappedView = () => {
+      const children = view();
+      return createElement({ type: Wrapper, props: { children } });
+    };
+  }
+  let currentTeardown = null;
+  const teardown = fictRender(wrappedView, container);
+  currentTeardown = teardown;
+  const ref = { container, baseElement, ownedContainer, teardown };
+  mountedContainers.add(ref);
+  const queryHelpers = getQueriesForElement(container, customQueries);
+  const debug = (el = baseElement, maxLength, debugOptions) => {
+    if (Array.isArray(el)) {
+      el.forEach((e) => console.log(prettyDOM(e, maxLength, debugOptions)));
+    } else {
+      console.log(prettyDOM(el, maxLength, debugOptions));
+    }
+  };
+  const unmount = () => {
+    if (currentTeardown) {
+      currentTeardown();
+      currentTeardown = null;
+    }
+    if (ownedContainer && container?.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    mountedContainers.delete(ref);
+  };
+  const rerender = (newView) => {
+    if (currentTeardown) {
+      currentTeardown();
+    }
+    let wrappedNewView = newView;
+    if (wrapper) {
+      const Wrapper = wrapper;
+      wrappedNewView = () => {
+        const children = newView();
+        return createElement({ type: Wrapper, props: { children } });
+      };
+    }
+    currentTeardown = fictRender(wrappedNewView, container);
+    ref.teardown = currentTeardown;
+  };
+  return {
+    asFragment: () => container?.innerHTML ?? "",
+    container,
+    baseElement,
+    debug,
+    unmount,
+    rerender,
+    ...queryHelpers
+  };
+}
+function cleanupAtContainer(ref) {
+  const { container, teardown, ownedContainer } = ref;
+  if (typeof teardown === "function") {
+    teardown();
+  } else if (typeof teardown !== "undefined") {
+    console.warn(
+      "[@fictjs/testing-library] Expected teardown to be a function. This might indicate a version mismatch between @fictjs/runtime and @fictjs/testing-library."
+    );
+  }
+  if (ownedContainer && container?.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+  mountedContainers.delete(ref);
+}
+function cleanup() {
+  mountedContainers.forEach(cleanupAtContainer);
+  mountedHookRoots.forEach((dispose) => {
+    try {
+      dispose();
+    } catch (err) {
+      console.error("[fict/testing-library] Error during hook cleanup:", err);
+    }
+  });
+  mountedHookRoots.clear();
+}
+function renderHook(hookFn, options = {}) {
+  let initialProps;
+  let wrapper;
+  if (Array.isArray(options)) {
+    initialProps = options;
+  } else {
+    initialProps = options.initialProps;
+    wrapper = options.wrapper;
+  }
+  const resultContainer = { current: void 0 };
+  let currentProps = initialProps ?? [];
+  let disposeRoot = null;
+  let registeredDispose = null;
+  const registerDispose = (dispose) => {
+    if (registeredDispose) {
+      mountedHookRoots.delete(registeredDispose);
+    }
+    registeredDispose = dispose;
+    mountedHookRoots.add(dispose);
+  };
+  const executeHook = () => {
+    const { dispose, value } = createRoot(() => {
+      let hookResult;
+      if (wrapper) {
+        const Wrapper = wrapper;
+        createElement({
+          type: Wrapper,
+          props: {
+            children: (() => {
+              __fictPushContext();
+              try {
+                hookResult = hookFn(...currentProps);
+              } finally {
+                __fictPopContext();
+              }
+              return null;
+            })()
+          }
+        });
+      } else {
+        __fictPushContext();
+        try {
+          hookResult = hookFn(...currentProps);
+        } finally {
+          __fictPopContext();
+        }
+      }
+      return hookResult;
+    });
+    disposeRoot = dispose;
+    registerDispose(dispose);
+    resultContainer.current = value;
+    return value;
+  };
+  executeHook();
+  const rerender = (newProps) => {
+    if (disposeRoot) {
+      disposeRoot();
+    }
+    if (newProps !== void 0) {
+      currentProps = newProps;
+    }
+    executeHook();
+  };
+  const cleanupHook = () => {
+    if (disposeRoot) {
+      disposeRoot();
+      disposeRoot = null;
+    }
+    if (registeredDispose) {
+      mountedHookRoots.delete(registeredDispose);
+      registeredDispose = null;
+    }
+  };
+  return {
+    result: resultContainer,
+    rerender,
+    cleanup: cleanupHook,
+    unmount: cleanupHook
+  };
+}
+function testEffect(fn) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let resolveScheduled = false;
+    let disposed = false;
+    const disposeRef = { current: null };
+    const scheduleDispose = () => {
+      if (disposed) return;
+      queueMicrotask(() => {
+        if (disposed) return;
+        disposed = true;
+        disposeRef.current?.();
+      });
+    };
+    const reportError = (err) => {
+      if (settled) {
+        queueMicrotask(() => {
+          throw err;
+        });
+        return;
+      }
+      settled = true;
+      reject(err);
+      scheduleDispose();
+    };
+    const scheduleResolve = (result) => {
+      if (settled || resolveScheduled) return;
+      resolveScheduled = true;
+      queueMicrotask(() => {
+        if (settled) return;
+        settled = true;
+        resolve(result);
+        scheduleDispose();
+      });
+    };
+    const root = createRoot(() => {
+      registerErrorHandler((err) => {
+        reportError(err);
+        return true;
+      });
+      try {
+        fn((result) => {
+          scheduleResolve(result);
+        });
+      } catch (err) {
+        reportError(err);
+      }
+    });
+    disposeRef.current = root.dispose;
+  });
+}
+function waitForCondition(condition, options = {}) {
+  const { timeout = 1e3, interval = 50 } = options;
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const check = () => {
+      if (condition()) {
+        resolve();
+        return;
+      }
+      if (Date.now() - startTime >= timeout) {
+        reject(new Error(`waitForCondition timed out after ${timeout}ms`));
+        return;
+      }
+      setTimeout(check, interval);
+    };
+    check();
+  });
+}
+function flush() {
+  return new Promise((resolve) => queueMicrotask(resolve));
+}
+async function act(fn) {
+  try {
+    const result = await fn();
+    await flush();
+    await flush();
+    return result;
+  } catch (err) {
+    await flush();
+    await flush();
+    throw err;
+  }
+}
+function renderWithErrorBoundary(view, options = {}) {
+  const {
+    fallback = createElement({
+      type: "div",
+      props: { "data-testid": "error-fallback", children: "Error occurred" }
+    }),
+    onError,
+    resetKeys,
+    ...renderOptions
+  } = options;
+  let hasError = false;
+  let resetFn;
+  let _currentError = null;
+  const wrappedFallback = (err, reset) => {
+    hasError = true;
+    _currentError = err;
+    resetFn = reset;
+    if (typeof fallback === "function") {
+      return fallback(err, reset);
+    }
+    return fallback;
+  };
+  const ErrorBoundaryComponent = ErrorBoundary;
+  const wrapView = (nextView) => {
+    return () => {
+      const ViewComponent = () => nextView();
+      return createElement({
+        type: ErrorBoundaryComponent,
+        props: {
+          fallback: wrappedFallback,
+          onError: (err) => {
+            hasError = true;
+            _currentError = err;
+            onError?.(err);
+          },
+          resetKeys,
+          children: {
+            type: ViewComponent,
+            props: {},
+            key: void 0
+          }
+        }
+      });
+    };
+  };
+  const result = render(wrapView(view), renderOptions);
+  return {
+    ...result,
+    triggerError: (error) => {
+      hasError = true;
+      _currentError = error;
+      const Thrower = () => {
+        throw error;
+      };
+      result.rerender(
+        wrapView(() => ({
+          type: Thrower,
+          props: {},
+          key: void 0
+        }))
+      );
+    },
+    resetErrorBoundary: () => {
+      hasError = false;
+      _currentError = null;
+      if (resetFn) {
+        try {
+          resetFn();
+        } catch (err) {
+          onError?.(err);
+        }
+      }
+    },
+    isShowingFallback: () => hasError,
+    rerender: (nextView) => {
+      hasError = false;
+      _currentError = null;
+      resetFn = void 0;
+      result.rerender(wrapView(nextView));
+    }
+  };
+}
+function createTestSuspenseToken() {
+  const handle = createSuspenseToken();
+  return {
+    // Cast to match the TestSuspenseHandle type
+    token: handle.token,
+    resolve: handle.resolve,
+    reject: handle.reject
+  };
+}
+function renderWithSuspense(view, options = {}) {
+  const {
+    fallback = createElement({
+      type: "div",
+      props: { "data-testid": "suspense-fallback", children: "Loading..." }
+    }),
+    onResolve,
+    onReject,
+    resetKeys,
+    ...renderOptions
+  } = options;
+  let isSuspended = false;
+  let isResolved = true;
+  let resolveWaiters = [];
+  const wrappedFallback = (err) => {
+    isSuspended = true;
+    isResolved = false;
+    if (typeof fallback === "function") {
+      return fallback(err);
+    }
+    return fallback;
+  };
+  const SuspenseComponent = Suspense;
+  const wrapView = (nextView) => {
+    return () => {
+      if (onReject) {
+        registerErrorHandler(() => true);
+      }
+      const ViewComponent = () => nextView();
+      return createElement({
+        type: SuspenseComponent,
+        props: {
+          fallback: wrappedFallback,
+          onResolve: () => {
+            isSuspended = false;
+            isResolved = true;
+            onResolve?.();
+            resolveWaiters.forEach((waiter) => waiter());
+            resolveWaiters = [];
+          },
+          onReject: (err) => {
+            isSuspended = false;
+            onReject?.(err);
+          },
+          resetKeys,
+          children: {
+            type: ViewComponent,
+            props: {},
+            key: void 0
+          }
+        }
+      });
+    };
+  };
+  const result = render(wrapView(view), renderOptions);
+  return {
+    ...result,
+    isShowingFallback: () => {
+      const fallbackEl = result.container.querySelector('[data-testid="suspense-fallback"]');
+      return !!fallbackEl || isSuspended;
+    },
+    waitForResolution: (waitOptions) => {
+      const { timeout = 5e3 } = waitOptions ?? {};
+      if (isResolved && !isSuspended) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+          reject(new Error(`Suspense did not resolve within ${timeout}ms`));
+        }, timeout);
+        resolveWaiters.push(() => {
+          clearTimeout(timeoutId);
+          resolve();
+        });
+      });
+    },
+    rerender: (nextView) => {
+      result.rerender(wrapView(nextView));
+    }
+  };
+}
+export {
+  act,
+  cleanup,
+  createTestSuspenseToken,
+  flush,
+  prettyDOM,
+  queries,
+  render,
+  renderHook,
+  renderWithErrorBoundary,
+  renderWithSuspense,
+  testEffect,
+  waitForCondition
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fictjs/testing-library",
-  "version": "0.2.2",
-  "description": "Fict testing library",
+  "version": "0.3.0",
+  "description": "Testing utilities for Fict components, built on @testing-library/dom",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -11,6 +11,7 @@
     "url": "https://github.com/fictjs/fict.git",
     "directory": "packages/testing-library"
   },
+  "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,9 +26,31 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1"
+  },
+  "peerDependencies": {
+    "@fictjs/runtime": "0.3.0"
+  },
   "devDependencies": {
-    "tsup": "^8.5.1"
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": "^22.14.1",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.1",
+    "vitest": "^4.0.18",
+    "@fictjs/compiler": "0.3.0",
+    "@fictjs/runtime": "0.3.0",
+    "@fictjs/vite-plugin": "0.3.0"
   },
+  "keywords": [
+    "fict",
+    "testing",
+    "testing-library",
+    "test",
+    "unit-test",
+    "ui",
+    "dom"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",