twd-js 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 BRIKEV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# twd
+
+[![CI](https://github.com/BRIKEV/twd/actions/workflows/ci.yml/badge.svg)](https://github.com/BRIKEV/twd/actions/workflows/ci.yml)
+[![license](https://img.shields.io/github/license/brikev/twd.svg)](./LICENSE)
+
+> ⚠️ This is a **beta release** – expect frequent updates and possible breaking changes.
+
+TWD (Testing Web Development) is a tool designed to help integrating testing while developing web applications. It aims to streamline the testing process and make it easier for developers to write and run tests as they build their applications.
+
+Right now we only support React, but we plan to add support for other frameworks in the future.
+
+## Installation
+
+You can install TWD via npm:
+
+```bash
+# with npm
+npm install twd
+
+# with yarn
+yarn add twd
+
+# with pnpm
+pnpm add twd
+```
+
+## How to use
+
+Add the our React Sidebar component to your application:
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { TWDSidebar } from '../../../src'
+import router from './routes.ts'
+import { RouterProvider } from 'react-router'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+    <TWDSidebar />
+  </StrictMode>,
+)
+```
+
+Then, create test files with the `.test.ts` or any extension you want. For example:
+
+```tsx
+// src/app.twd-test.ts
+import { describe, it, twd } from "../../../src/twd";
+
+beforeEach(() => {
+  console.log("Reset state before each test");
+});
+
+describe("App interactions", () => {
+  it("clicks the button", async () => {
+    const btn = await twd.get("button");
+    btn.click();
+  });
+});
+```
+
+After you create your test you need to load them in your application. You can do this by creating a `loadTests.ts` file and importing all your test files there:
+
+```ts
+// src/loadTests.ts
+import "./app.twd-test";
+import "./another-test-file.twd-test";
+// Import other test files here
+```
+
+Or if you're using vite you can use Vite's `import.meta.glob` to automatically import all test files in a directory:
+
+```ts
+// This automatically imports all files ending with .twd.test.ts
+const modules = import.meta.glob("./**/*.twd.test.ts", { eager: true });
+
+// You don't need to export anything; simply importing this in App.tsx
+// will cause the test files to execute and register their tests.
+```
+
+Then, import the `loadTests.ts` file in your main application file (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import './loadTests' // Import test files
+```
+
+Finally, run your application and open the TWD sidebar to see and run your tests.
+
+

package/dist/twd.es.js

@@ -0,0 +1,674 @@
+import ce, { useState as Y } from "react";
+const le = (t, r = 2e3, n = 50) => new Promise((o, s) => {
+  const l = Date.now(), i = () => {
+    const c = t();
+    if (c) return o(c);
+    if (Date.now() - l > r) return s(new Error("Timeout waiting for element"));
+    setTimeout(i, n);
+  };
+  i();
+}), g = [];
+let I = [];
+const D = (t, r, n = {}) => {
+  g.push({
+    name: t,
+    fn: r,
+    status: "idle",
+    logs: [],
+    suite: [...I],
+    ...n
+  });
+}, ue = (t) => {
+  I.push(t);
+}, de = () => {
+  I.pop();
+};
+function fe(t) {
+  if (!t.isConnected) return !1;
+  let r = t;
+  for (; r; ) {
+    const n = getComputedStyle(r);
+    if (n.display === "none" || n.visibility === "hidden" || n.visibility === "collapse")
+      return !1;
+    r = r.parentElement;
+  }
+  return !0;
+}
+const pe = (t, r, ...n) => {
+  const o = r.startsWith("not."), s = o ? r.slice(4) : r, i = (() => {
+    const c = (t.textContent || "").trim();
+    switch (s) {
+      // Content
+      case "have.text":
+        return c === n[0];
+      case "contain.text":
+        return c.includes(n[0]);
+      case "be.empty":
+        return c.length === 0;
+      // Attributes
+      case "have.attr":
+        return t.getAttribute(n[0]) === n[1];
+      case "have.value":
+        return t.value === n[0];
+      // State
+      case "be.disabled":
+        return t.disabled === !0;
+      case "be.enabled":
+        return t.disabled === !1;
+      case "be.checked":
+        return t.checked === !0;
+      case "be.selected":
+        return t.selected === !0;
+      case "be.focused":
+        return document.activeElement === t;
+      // Visibility
+      case "be.visible":
+        return fe(t);
+      // Classes
+      case "have.class":
+        return t.classList.contains(n[0]);
+      default:
+        throw new Error(`Unknown assertion: ${s}`);
+    }
+  })();
+  if (o ? i : !i)
+    throw new Error(
+      `Assertion failed: ${r} ${n.length ? JSON.stringify(n) : ""}`
+    );
+}, w = (t) => {
+  const r = g.find((n) => n.status === "running");
+  r && r.logs?.push(t);
+}, T = [], be = (t, r) => {
+  const n = T.findIndex((s) => s.alias === t), o = { alias: t, ...r, executed: !1 };
+  n !== -1 ? T[n] = o : T.push(o);
+}, me = async (t) => {
+  const r = T.find((n) => n.alias === t && n.executed);
+  if (!r)
+    throw new Error(`No intercept rule found for ${t}`);
+  return await new Promise((n) => setTimeout(n, 0)), r;
+}, he = window.fetch;
+window.fetch = async (t, r) => {
+  const n = r?.method?.toUpperCase() || "GET", o = typeof t == "string" ? t : t.toString(), s = T.find(
+    (l) => l.method === n && (typeof l.url == "string" ? l.url === o : l.url.test(o))
+  );
+  return s ? (w(`🛡️ ${s.alias} → ${n} ${o}`), s.executed = !0, s.request = r?.body, new Response(JSON.stringify(s.response), {
+    status: s.status || 200,
+    headers: s.headers || { "Content-Type": "application/json" }
+  })) : he(t, r);
+};
+const xe = (t, r) => {
+  for (const n of r) {
+    const o = n.charCodeAt(0);
+    t.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: n,
+        code: `Key${n.toUpperCase()}`,
+        keyCode: o,
+        which: o,
+        bubbles: !0,
+        cancelable: !0
+      })
+    ), t.dispatchEvent(
+      new KeyboardEvent("keypress", {
+        key: n,
+        code: `Key${n.toUpperCase()}`,
+        keyCode: o,
+        which: o,
+        bubbles: !0,
+        cancelable: !0
+      })
+    ), t.dispatchEvent(
+      new InputEvent("beforeinput", {
+        bubbles: !0,
+        cancelable: !0,
+        inputType: "insertText",
+        data: n
+      })
+    ), Object.getOwnPropertyDescriptor(
+      Object.getPrototypeOf(t),
+      "value"
+    )?.set?.call(t, t.value + n), t.dispatchEvent(
+      new Event("input", {
+        bubbles: !0
+      })
+    ), t.dispatchEvent(
+      new KeyboardEvent("keyup", {
+        key: n,
+        code: `Key${n.toUpperCase()}`,
+        keyCode: o,
+        which: o,
+        bubbles: !0,
+        cancelable: !0
+      })
+    );
+  }
+  return t;
+};
+let _ = null;
+const _e = (t) => {
+  _ = t;
+}, Se = (t, r) => {
+  ue(t), r(), de();
+}, je = (t, r) => {
+  D(t, async () => {
+    _ && await _(), await r();
+  });
+}, Oe = (t, r) => {
+  D(t, async () => {
+    _ && await _(), await r();
+  }, { only: !0 });
+}, Ae = (t, r) => {
+  D(t, async () => {
+  }, { skip: !0 });
+}, Ce = {
+  get: async (t) => {
+    w(`🔎 get("${t}")`);
+    const r = await le(() => document.querySelector(t)), n = {
+      el: r,
+      click: () => {
+        w(`🖱️ click(${t})`), r.click();
+      },
+      type: (o) => (w(`⌨️ type("${o}") into ${t}`), xe(r, o)),
+      should: (o, ...s) => (pe(r, o, ...s), n),
+      text: () => {
+        const o = r.textContent || "";
+        return w(`📄 text(${t}) → "${o}"`), o;
+      }
+    };
+    return n;
+  },
+  visit: (t) => {
+    w(`🌍 visit("${t}")`), window.history.pushState({}, "", t), window.dispatchEvent(new PopStateEvent("popstate"));
+  },
+  mockRequest: be,
+  waitFor: me
+};
+var j = { exports: {} }, k = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var V;
+function ye() {
+  if (V) return k;
+  V = 1;
+  var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(o, s, l) {
+    var i = null;
+    if (l !== void 0 && (i = "" + l), s.key !== void 0 && (i = "" + s.key), "key" in s) {
+      l = {};
+      for (var c in s)
+        c !== "key" && (l[c] = s[c]);
+    } else l = s;
+    return s = l.ref, {
+      $$typeof: t,
+      type: o,
+      key: i,
+      ref: s !== void 0 ? s : null,
+      props: l
+    };
+  }
+  return k.Fragment = r, k.jsx = n, k.jsxs = n, k;
+}
+var R = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var B;
+function ge() {
+  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === se ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case H:
+          return "Profiler";
+        case K:
+          return "StrictMode";
+        case te:
+          return "Suspense";
+        case re:
+          return "SuspenseList";
+        case oe:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case X:
+            return "Portal";
+          case Q:
+            return (e.displayName || "Context") + ".Provider";
+          case Z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case ee:
+            var a = e.render;
+            return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ne:
+            return a = e.displayName || null, a !== null ? a : t(e.type) || "Memo";
+          case L:
+            a = e._payload, e = e._init;
+            try {
+              return t(e(a));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function r(e) {
+      return "" + e;
+    }
+    function n(e) {
+      try {
+        r(e);
+        var a = !1;
+      } catch {
+        a = !0;
+      }
+      if (a) {
+        a = console;
+        var u = a.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          a,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), r(e);
+      }
+    }
+    function o(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === L)
+        return "<...>";
+      try {
+        var a = t(e);
+        return a ? "<" + a + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = A.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function i(e) {
+      if (W.call(e, "key")) {
+        var a = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (a && a.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, a) {
+      function u() {
+        U || (U = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          a
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = t(this.type);
+      return z[e] || (z[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function h(e, a, u, f, y, x, P, N) {
+      return u = x.ref, e = {
+        $$typeof: F,
+        type: e,
+        key: a,
+        props: x,
+        _owner: y
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: P
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function m(e, a, u, f, y, x, P, N) {
+      var p = a.children;
+      if (p !== void 0)
+        if (f)
+          if (ae(p)) {
+            for (f = 0; f < p.length; f++)
+              E(p[f]);
+            Object.freeze && Object.freeze(p);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else E(p);
+      if (W.call(a, "key")) {
+        p = t(e);
+        var v = Object.keys(a).filter(function(ie) {
+          return ie !== "key";
+        });
+        f = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", J[p + f] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          f,
+          p,
+          v,
+          p
+        ), J[p + f] = !0);
+      }
+      if (p = null, u !== void 0 && (n(u), p = "" + u), i(a) && (n(a.key), p = "" + a.key), "key" in a) {
+        u = {};
+        for (var $ in a)
+          $ !== "key" && (u[$] = a[$]);
+      } else u = a;
+      return p && c(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), h(
+        e,
+        p,
+        x,
+        y,
+        s(),
+        u,
+        P,
+        N
+      );
+    }
+    function E(e) {
+      typeof e == "object" && e !== null && e.$$typeof === F && e._store && (e._store.validated = 1);
+    }
+    var S = ce, F = Symbol.for("react.transitional.element"), X = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), K = Symbol.for("react.strict_mode"), H = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), ne = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), oe = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), A = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, ae = Array.isArray, C = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    S = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var U, z = {}, q = S.react_stack_bottom_frame.bind(
+      S,
+      l
+    )(), M = C(o(l)), J = {};
+    R.Fragment = O, R.jsx = function(e, a, u, f, y) {
+      var x = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        a,
+        u,
+        !1,
+        f,
+        y,
+        x ? Error("react-stack-top-frame") : q,
+        x ? C(o(e)) : M
+      );
+    }, R.jsxs = function(e, a, u, f, y) {
+      var x = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        a,
+        u,
+        !0,
+        f,
+        y,
+        x ? Error("react-stack-top-frame") : q,
+        x ? C(o(e)) : M
+      );
+    };
+  })()), R;
+}
+var G;
+function Ee() {
+  return G || (G = 1, process.env.NODE_ENV === "production" ? j.exports = ye() : j.exports = ge()), j.exports;
+}
+var d = Ee();
+const ve = (t) => {
+  const r = { children: [] };
+  for (const n of t) {
+    let o = r;
+    n.suite.forEach((s) => {
+      let l = o.children.find(
+        (i) => "name" in i && !i.status && i.name === s
+      );
+      l || (l = { name: s, children: [] }, o.children.push(l)), o = l;
+    }), o.children.push(n);
+  }
+  return r.children;
+}, we = ({ node: t, depth: r, idx: n, runTest: o }) => /* @__PURE__ */ d.jsxs("li", { style: { marginBottom: "4px", marginLeft: r * 6 }, children: [
+  /* @__PURE__ */ d.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "4px 6px",
+        borderRadius: "4px",
+        background: t.status === "pass" ? "#dcfce7" : t.status === "fail" ? "#fee2e2" : t.status === "skip" ? "#f3f4f6" : t.status === "running" ? "#fef9c3" : "transparent"
+      },
+      children: [
+        /* @__PURE__ */ d.jsxs("span", { children: [
+          t.name,
+          " ",
+          t.only && /* @__PURE__ */ d.jsx("span", { style: { color: "#2563eb" }, children: "(only)" }),
+          t.skip && /* @__PURE__ */ d.jsx("span", { style: { color: "#6b7280" }, children: "(skipped)" })
+        ] }),
+        /* @__PURE__ */ d.jsx(
+          "button",
+          {
+            onClick: () => o(n),
+            style: {
+              background: "transparent",
+              border: "1px solid #d1d5db",
+              borderRadius: "4px",
+              padding: "2px 6px",
+              cursor: "pointer",
+              fontSize: "12px"
+            },
+            children: "▶"
+          }
+        )
+      ]
+    }
+  ),
+  t.logs && t.logs.length > 0 && /* @__PURE__ */ d.jsx(
+    "ul",
+    {
+      style: {
+        borderRadius: "4px",
+        maxHeight: "160px",
+        overflowY: "auto",
+        padding: 0,
+        background: "#f3f4f6",
+        listStyle: "none",
+        marginTop: "4px"
+      },
+      children: t.logs.map((s, l) => /* @__PURE__ */ d.jsx(
+        "li",
+        {
+          style: {
+            fontSize: "12px",
+            padding: "4px 6px",
+            borderBottom: "1px solid #d1d5db"
+          },
+          children: s
+        },
+        l
+      ))
+    }
+  )
+] }, t.name), ke = ({ runTest: t, tests: r }) => {
+  const [n, o] = Y({}), s = (i, c = 0) => {
+    if ("status" in i)
+      return /* @__PURE__ */ d.jsx(we, { node: i, depth: c, idx: r.indexOf(i), runTest: t }, i.name);
+    const b = n[i.name];
+    return /* @__PURE__ */ d.jsxs("li", { style: { marginBottom: "6px", marginLeft: c * 12, textAlign: "left" }, children: [
+      /* @__PURE__ */ d.jsxs(
+        "div",
+        {
+          style: {
+            fontWeight: "bold",
+            cursor: "pointer",
+            color: "#374151",
+            marginBottom: "4px"
+          },
+          onClick: () => o((h) => ({ ...h, [i.name]: !h[i.name] })),
+          children: [
+            i.name,
+            " ",
+            b ? "▶" : "▼"
+          ]
+        }
+      ),
+      !b && /* @__PURE__ */ d.jsx("ul", { style: { listStyle: "none", padding: 0 }, children: i.children.map((h) => s(h, c + 1)) })
+    ] }, i.name);
+  }, l = ve(r);
+  return /* @__PURE__ */ d.jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: l.map((i) => s(i)) });
+}, Re = ({ setOpen: t }) => /* @__PURE__ */ d.jsx(
+  "div",
+  {
+    style: {
+      position: "fixed",
+      top: "50%",
+      left: 0,
+      transform: "translateY(-50%)",
+      background: "#3b82f6",
+      color: "white",
+      padding: "6px 10px",
+      borderTopRightRadius: "6px",
+      borderBottomRightRadius: "6px",
+      cursor: "pointer",
+      fontSize: "12px"
+    },
+    onClick: () => t(!0),
+    children: "▶ TWD"
+  }
+), Pe = () => {
+  const [t, r] = Y(0), [n, o] = Y(!0), s = async (i) => {
+    const c = g[i];
+    c.logs = [];
+    const b = console.log, h = console.error;
+    if (console.log = (...m) => {
+      c.logs?.push("📝 " + m.map(String).join(" ")), b(...m), r((E) => E + 1);
+    }, console.error = (...m) => {
+      c.logs?.push("❌ " + m.map(String).join(" ")), h(...m), r((E) => E + 1);
+    }, c.status = "running", c.skip)
+      c.status = "skip";
+    else
+      try {
+        await c.fn(), c.status = "pass";
+      } catch (m) {
+        c.status = "fail", console.error("Test failed:", c.name, m);
+      }
+    console.log = b, console.error = h, r((m) => m + 1);
+  }, l = async () => {
+    const i = g.filter((b) => b.only), c = i.length > 0 ? i : g;
+    for (let b = 0; b < c.length; b++) {
+      const h = g.indexOf(c[b]);
+      await s(h);
+    }
+  };
+  return n ? /* @__PURE__ */ d.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: "280px",
+        background: "#f9fafb",
+        borderRight: "1px solid #e5e7eb",
+        padding: "8px",
+        fontSize: "14px",
+        overflowY: "auto",
+        boxShadow: "2px 0 6px rgba(0,0,0,0.1)"
+      },
+      children: [
+        /* @__PURE__ */ d.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" }, children: [
+          /* @__PURE__ */ d.jsx("strong", { children: "TWD Tests" }),
+          /* @__PURE__ */ d.jsx(
+            "button",
+            {
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "14px"
+              },
+              onClick: () => o(!1),
+              children: "✖"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d.jsx(
+          "button",
+          {
+            onClick: l,
+            style: {
+              background: "#3b82f6",
+              color: "white",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              border: "none",
+              marginBottom: "10px",
+              cursor: "pointer"
+            },
+            children: "▶ Run All"
+          }
+        ),
+        /* @__PURE__ */ d.jsx(ke, { tests: g, runTest: s })
+      ]
+    }
+  ) : /* @__PURE__ */ d.jsx(Re, { setOpen: o });
+};
+export {
+  Pe as TWDSidebar,
+  _e as beforeEach,
+  Se as describe,
+  je as it,
+  Oe as itOnly,
+  Ae as itSkip,
+  Ce as twd
+};

package/dist/twd.umd.js

@@ -0,0 +1,22 @@
+(function(b,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],g):(b=typeof globalThis<"u"?globalThis:b||self,g(b.TWD={},b.React))})(this,(function(b,g){"use strict";const K=(t,r=2e3,n=50)=>new Promise((o,s)=>{const l=Date.now(),i=()=>{const c=t();if(c)return o(c);if(Date.now()-l>r)return s(new Error("Timeout waiting for element"));setTimeout(i,n)};i()}),v=[];let C=[];const P=(t,r,n={})=>{v.push({name:t,fn:r,status:"idle",logs:[],suite:[...C],...n})},H=t=>{C.push(t)},Z=()=>{C.pop()};function Q(t){if(!t.isConnected)return!1;let r=t;for(;r;){const n=getComputedStyle(r);if(n.display==="none"||n.visibility==="hidden"||n.visibility==="collapse")return!1;r=r.parentElement}return!0}const ee=(t,r,...n)=>{const o=r.startsWith("not."),s=o?r.slice(4):r,i=(()=>{const c=(t.textContent||"").trim();switch(s){case"have.text":return c===n[0];case"contain.text":return c.includes(n[0]);case"be.empty":return c.length===0;case"have.attr":return t.getAttribute(n[0])===n[1];case"have.value":return t.value===n[0];case"be.disabled":return t.disabled===!0;case"be.enabled":return t.disabled===!1;case"be.checked":return t.checked===!0;case"be.selected":return t.selected===!0;case"be.focused":return document.activeElement===t;case"be.visible":return Q(t);case"have.class":return t.classList.contains(n[0]);default:throw new Error(`Unknown assertion: ${s}`)}})();if(o?i:!i)throw new Error(`Assertion failed: ${r} ${n.length?JSON.stringify(n):""}`)},w=t=>{const r=v.find(n=>n.status==="running");r&&r.logs?.push(t)},R=[],te=(t,r)=>{const n=R.findIndex(s=>s.alias===t),o={alias:t,...r,executed:!1};n!==-1?R[n]=o:R.push(o)},re=async t=>{const r=R.find(n=>n.alias===t&&n.executed);if(!r)throw new Error(`No intercept rule found for ${t}`);return await new Promise(n=>setTimeout(n,0)),r},ne=window.fetch;window.fetch=async(t,r)=>{const n=r?.method?.toUpperCase()||"GET",o=typeof t=="string"?t:t.toString(),s=R.find(l=>l.method===n&&(typeof l.url=="string"?l.url===o:l.url.test(o)));return s?(w(`🛡️ ${s.alias} → ${n} ${o}`),s.executed=!0,s.request=r?.body,new Response(JSON.stringify(s.response),{status:s.status||200,headers:s.headers||{"Content-Type":"application/json"}})):ne(t,r)};const oe=(t,r)=>{for(const n of r){const o=n.charCodeAt(0);t.dispatchEvent(new KeyboardEvent("keydown",{key:n,code:`Key${n.toUpperCase()}`,keyCode:o,which:o,bubbles:!0,cancelable:!0})),t.dispatchEvent(new KeyboardEvent("keypress",{key:n,code:`Key${n.toUpperCase()}`,keyCode:o,which:o,bubbles:!0,cancelable:!0})),t.dispatchEvent(new InputEvent("beforeinput",{bubbles:!0,cancelable:!0,inputType:"insertText",data:n})),Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t),"value")?.set?.call(t,t.value+n),t.dispatchEvent(new Event("input",{bubbles:!0})),t.dispatchEvent(new KeyboardEvent("keyup",{key:n,code:`Key${n.toUpperCase()}`,keyCode:o,which:o,bubbles:!0,cancelable:!0}))}return t};let S=null;const se=t=>{S=t},ae=(t,r)=>{H(t),r(),Z()},ie=(t,r)=>{P(t,async()=>{S&&await S(),await r()})},ce=(t,r)=>{P(t,async()=>{S&&await S(),await r()},{only:!0})},le=(t,r)=>{P(t,async()=>{},{skip:!0})},ue={get:async t=>{w(`🔎 get("${t}")`);const r=await K(()=>document.querySelector(t)),n={el:r,click:()=>{w(`🖱️ click(${t})`),r.click()},type:o=>(w(`⌨️ type("${o}") into ${t}`),oe(r,o)),should:(o,...s)=>(ee(r,o,...s),n),text:()=>{const o=r.textContent||"";return w(`📄 text(${t}) → "${o}"`),o}};return n},visit:t=>{w(`🌍 visit("${t}")`),window.history.pushState({},"",t),window.dispatchEvent(new PopStateEvent("popstate"))},mockRequest:te,waitFor:re};var O={exports:{}},_={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var W;function de(){if(W)return _;W=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,s,l){var i=null;if(l!==void 0&&(i=""+l),s.key!==void 0&&(i=""+s.key),"key"in s){l={};for(var c in s)c!=="key"&&(l[c]=s[c])}else l=s;return s=l.ref,{$$typeof:t,type:o,key:i,ref:s!==void 0?s:null,props:l}}return _.Fragment=r,_.jsx=n,_.jsxs=n,_}var j={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var L;function fe(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case ve:return"Profiler";case Ee:return"StrictMode";case Re:return"Suspense";case Se:return"SuspenseList";case je:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ge:return"Portal";case ke:return(e.displayName||"Context")+".Provider";case we:return(e._context.displayName||"Context")+".Consumer";case Te:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case _e:return a=e.displayName||null,a!==null?a:t(e.type)||"Memo";case M:a=e._payload,e=e._init;try{return t(e(a))}catch{}}return null}function r(e){return""+e}function n(e){try{r(e);var a=!1}catch{a=!0}if(a){a=console;var u=a.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),r(e)}}function o(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===M)return"<...>";try{var a=t(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function s(){var e=$.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function i(e){if(J.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function c(e,a){function u(){V||(V=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function m(){var e=t(this.type);return B[e]||(B[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function x(e,a,u,f,E,y,D,I){return u=y.ref,e={$$typeof:z,type:e,key:a,props:y,_owner:E},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:m}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,a,u,f,E,y,D,I){var p=a.children;if(p!==void 0)if(f)if(Ae(p)){for(f=0;f<p.length;f++)k(p[f]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(p);if(J.call(a,"key")){p=t(e);var T=Object.keys(a).filter(function(Ce){return Ce!=="key"});f=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",X[p+f]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,f,p,T,p),X[p+f]=!0)}if(p=null,u!==void 0&&(n(u),p=""+u),i(a)&&(n(a.key),p=""+a.key),"key"in a){u={};for(var F in a)F!=="key"&&(u[F]=a[F])}else u=a;return p&&c(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,p,y,E,s(),u,D,I)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===z&&e._store&&(e._store.validated=1)}var A=g,z=Symbol.for("react.transitional.element"),ge=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),Ee=Symbol.for("react.strict_mode"),ve=Symbol.for("react.profiler"),we=Symbol.for("react.consumer"),ke=Symbol.for("react.context"),Te=Symbol.for("react.forward_ref"),Re=Symbol.for("react.suspense"),Se=Symbol.for("react.suspense_list"),_e=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),je=Symbol.for("react.activity"),Oe=Symbol.for("react.client.reference"),$=A.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,J=Object.prototype.hasOwnProperty,Ae=Array.isArray,Y=console.createTask?console.createTask:function(){return null};A={react_stack_bottom_frame:function(e){return e()}};var V,B={},q=A.react_stack_bottom_frame.bind(A,l)(),G=Y(o(l)),X={};j.Fragment=N,j.jsx=function(e,a,u,f,E){var y=1e4>$.recentlyCreatedOwnerStacks++;return h(e,a,u,!1,f,E,y?Error("react-stack-top-frame"):q,y?Y(o(e)):G)},j.jsxs=function(e,a,u,f,E){var y=1e4>$.recentlyCreatedOwnerStacks++;return h(e,a,u,!0,f,E,y?Error("react-stack-top-frame"):q,y?Y(o(e)):G)}})()),j}var U;function pe(){return U||(U=1,process.env.NODE_ENV==="production"?O.exports=de():O.exports=fe()),O.exports}var d=pe();const be=t=>{const r={children:[]};for(const n of t){let o=r;n.suite.forEach(s=>{let l=o.children.find(i=>"name"in i&&!i.status&&i.name===s);l||(l={name:s,children:[]},o.children.push(l)),o=l}),o.children.push(n)}return r.children},me=({node:t,depth:r,idx:n,runTest:o})=>d.jsxs("li",{style:{marginBottom:"4px",marginLeft:r*6},children:[d.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 6px",borderRadius:"4px",background:t.status==="pass"?"#dcfce7":t.status==="fail"?"#fee2e2":t.status==="skip"?"#f3f4f6":t.status==="running"?"#fef9c3":"transparent"},children:[d.jsxs("span",{children:[t.name," ",t.only&&d.jsx("span",{style:{color:"#2563eb"},children:"(only)"}),t.skip&&d.jsx("span",{style:{color:"#6b7280"},children:"(skipped)"})]}),d.jsx("button",{onClick:()=>o(n),style:{background:"transparent",border:"1px solid #d1d5db",borderRadius:"4px",padding:"2px 6px",cursor:"pointer",fontSize:"12px"},children:"▶"})]}),t.logs&&t.logs.length>0&&d.jsx("ul",{style:{borderRadius:"4px",maxHeight:"160px",overflowY:"auto",padding:0,background:"#f3f4f6",listStyle:"none",marginTop:"4px"},children:t.logs.map((s,l)=>d.jsx("li",{style:{fontSize:"12px",padding:"4px 6px",borderBottom:"1px solid #d1d5db"},children:s},l))})]},t.name),he=({runTest:t,tests:r})=>{const[n,o]=g.useState({}),s=(i,c=0)=>{if("status"in i)return d.jsx(me,{node:i,depth:c,idx:r.indexOf(i),runTest:t},i.name);const m=n[i.name];return d.jsxs("li",{style:{marginBottom:"6px",marginLeft:c*12,textAlign:"left"},children:[d.jsxs("div",{style:{fontWeight:"bold",cursor:"pointer",color:"#374151",marginBottom:"4px"},onClick:()=>o(x=>({...x,[i.name]:!x[i.name]})),children:[i.name," ",m?"▶":"▼"]}),!m&&d.jsx("ul",{style:{listStyle:"none",padding:0},children:i.children.map(x=>s(x,c+1))})]},i.name)},l=be(r);return d.jsx("ul",{style:{listStyle:"none",padding:0,margin:0},children:l.map(i=>s(i))})},xe=({setOpen:t})=>d.jsx("div",{style:{position:"fixed",top:"50%",left:0,transform:"translateY(-50%)",background:"#3b82f6",color:"white",padding:"6px 10px",borderTopRightRadius:"6px",borderBottomRightRadius:"6px",cursor:"pointer",fontSize:"12px"},onClick:()=>t(!0),children:"▶ TWD"}),ye=()=>{const[t,r]=g.useState(0),[n,o]=g.useState(!0),s=async i=>{const c=v[i];c.logs=[];const m=console.log,x=console.error;if(console.log=(...h)=>{c.logs?.push("📝 "+h.map(String).join(" ")),m(...h),r(k=>k+1)},console.error=(...h)=>{c.logs?.push("❌ "+h.map(String).join(" ")),x(...h),r(k=>k+1)},c.status="running",c.skip)c.status="skip";else try{await c.fn(),c.status="pass"}catch(h){c.status="fail",console.error("Test failed:",c.name,h)}console.log=m,console.error=x,r(h=>h+1)},l=async()=>{const i=v.filter(m=>m.only),c=i.length>0?i:v;for(let m=0;m<c.length;m++){const x=v.indexOf(c[m]);await s(x)}};return n?d.jsxs("div",{style:{position:"fixed",top:0,left:0,bottom:0,width:"280px",background:"#f9fafb",borderRight:"1px solid #e5e7eb",padding:"8px",fontSize:"14px",overflowY:"auto",boxShadow:"2px 0 6px rgba(0,0,0,0.1)"},children:[d.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"8px"},children:[d.jsx("strong",{children:"TWD Tests"}),d.jsx("button",{style:{background:"transparent",border:"none",cursor:"pointer",fontSize:"14px"},onClick:()=>o(!1),children:"✖"})]}),d.jsx("button",{onClick:l,style:{background:"#3b82f6",color:"white",padding:"4px 8px",borderRadius:"4px",border:"none",marginBottom:"10px",cursor:"pointer"},children:"▶ Run All"}),d.jsx(he,{tests:v,runTest:s})]}):d.jsx(xe,{setOpen:o})};b.TWDSidebar=ye,b.beforeEach=se,b.describe=ae,b.it=ie,b.itOnly=ce,b.itSkip=le,b.twd=ue,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "twd-js",
+  "version": "0.1.0",
+  "description": "Test While Developing (TWD) - in-browser testing",
+  "main": "./dist/twd.umd.js",
+  "module": "./dist/twd.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/twd.es.js",
+      "require": "./dist/twd.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "test:ci": "vitest --run --coverage",
+    "conventional-changelog": "conventional-changelog -i CHANGELOG.md -s -r 0",
+    "dev": "vite"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.4",
+    "vitest": "^3.2.4"
+  }
+}