twd-js 0.1.1 → 0.2.0

package/dist/twd.es.js

@@ -1,189 +1,284 @@
-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);
+import pe, { useState as D } from "react";
+const be = (e, n = 2e3, r = 50) => new Promise((s, i) => {
+  const a = Date.now(), c = () => {
+    const u = e();
+    if (u) return s(u);
+    if (Date.now() - a > n) return i(new Error("Timeout waiting for element"));
+    setTimeout(c, r);
   };
-  i();
-}), g = [];
-let I = [];
-const D = (t, r, n = {}) => {
-  g.push({
-    name: t,
-    fn: r,
+  c();
+}), v = [];
+let Y = [];
+const U = (e, n, r = {}) => {
+  v.push({
+    name: e,
+    fn: n,
     status: "idle",
     logs: [],
-    suite: [...I],
-    ...n
+    suite: [...Y],
+    ...r
   });
-}, ue = (t) => {
-  I.push(t);
-}, de = () => {
-  I.pop();
+}, me = (e) => {
+  Y.push(e);
+}, he = () => {
+  Y.pop();
+}, m = (e, n, r, s) => {
+  if (!e && !n)
+    throw new Error(s);
+  if (e && n)
+    throw new Error(
+      s.replace("to be", "to not be").replace("to have", "to not have").replace("to contain", "to not contain")
+    );
+  return r;
 };
-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")
+function xe(e) {
+  if (!e.isConnected) return !1;
+  let n = e;
+  for (; n; ) {
+    const r = getComputedStyle(n);
+    if (r.display === "none" || r.visibility === "hidden" || r.visibility === "collapse")
       return !1;
-    r = r.parentElement;
+    n = n.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}`);
+const ge = (e, n, ...r) => {
+  const s = n.startsWith("not."), i = s ? n.slice(4) : n, a = (e.textContent || "").trim();
+  switch (i) {
+    // Content
+    case "have.text":
+      return m(
+        a === r[0],
+        s,
+        `Assertion passed: Text is exactly "${r[0]}"`,
+        `Assertion failed: Expected text to be "${r[0]}", but got "${a}"`
+      );
+    case "contain.text":
+      return m(
+        a.includes(r[0]),
+        s,
+        `Assertion passed: Text contains "${r[0]}"`,
+        `Assertion failed: Expected text to contain "${r[0]}", but got "${a}"`
+      );
+    case "be.empty":
+      return m(
+        a.length === 0,
+        s,
+        "Assertion passed: Text is empty",
+        `Assertion failed: Expected text to be empty, but got "${a}"`
+      );
+    // Attributes
+    case "have.attr":
+      return m(
+        e.getAttribute(r[0]) === r[1],
+        s,
+        `Assertion passed: Attribute "${r[0]}" is "${r[1]}"`,
+        `Assertion failed: Expected attribute "${r[0]}" to be "${r[1]}", but got "${e.getAttribute(r[0])}"`
+      );
+    case "have.value":
+      return m(
+        e.value === r[0],
+        s,
+        `Assertion passed: Value is "${r[0]}"`,
+        `Assertion failed: Expected value to be "${r[0]}", but got "${e.value}"`
+      );
+    // State
+    case "be.disabled":
+      return m(
+        e.disabled === !0,
+        s,
+        "Assertion passed: Element is disabled",
+        "Assertion failed: Expected element to be disabled"
+      );
+    case "be.enabled":
+      return m(
+        e.disabled === !1,
+        s,
+        "Assertion passed: Element is enabled",
+        "Assertion failed: Expected element to be enabled"
+      );
+    case "be.checked":
+      return m(
+        e.checked === !0,
+        s,
+        "Assertion passed: Element is checked",
+        "Assertion failed: Expected element to be checked"
+      );
+    case "be.selected":
+      return m(
+        e.selected === !0,
+        s,
+        "Assertion passed: Element is selected",
+        "Assertion failed: Expected element to be selected"
+      );
+    case "be.focused":
+      return m(
+        document.activeElement === e,
+        s,
+        "Assertion passed: Element is focused",
+        "Assertion failed: Expected element to be focused"
+      );
+    // Visibility
+    case "be.visible":
+      return m(
+        xe(e),
+        s,
+        "Assertion passed: Element is visible",
+        "Assertion failed: Expected element to be visible"
+      );
+    // Classes
+    case "have.class":
+      return m(
+        e.classList.contains(r[0]),
+        s,
+        `Assertion passed: Element has class "${r[0]}"`,
+        `Assertion failed: Expected element to have class "${r[0]}"`
+      );
+    default:
+      throw new Error(`Unknown assertion: ${i}`);
+  }
+}, R = (e) => {
+  const n = v.find((r) => r.status === "running");
+  n && n.logs?.push(e);
+}, E = [], C = {}, Z = 100, we = async () => {
+  "serviceWorker" in navigator && (await navigator.serviceWorker.register("/mock-sw.js?v=1"), navigator.serviceWorker.addEventListener("message", (e) => {
+    if (e.data?.type === "EXECUTED") {
+      const { alias: n, request: r } = e.data, s = E.find((i) => i.alias === n);
+      s && (s.executed = !0, s.request = r, C[n] && (C[n](s), delete C[n]));
     }
-  })();
-  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(
+  }));
+}, Q = (e) => new Promise((n) => setTimeout(n, e)), ve = async (e, n) => {
+  const r = { alias: e, ...n, executed: !1 }, s = E.findIndex((i) => i.alias === e);
+  s !== -1 ? E[s] = r : E.push(r), navigator.serviceWorker.controller?.postMessage({
+    type: "ADD_RULE",
+    rule: r
+  }), await Q(Z), await Promise.resolve();
+}, Ee = async (e) => {
+  await Q(Z);
+  const n = E.find((r) => r.alias === e && r.executed);
+  return n ? Promise.resolve(n) : new Promise((r) => {
+    C[e] = r;
+  });
+}, ye = () => E, ke = () => {
+  E.length = 0;
+}, Re = (e, n) => {
+  for (const r of n) {
+    const s = r.charCodeAt(0);
+    e.dispatchEvent(
       new KeyboardEvent("keydown", {
-        key: n,
-        code: `Key${n.toUpperCase()}`,
-        keyCode: o,
-        which: o,
+        key: r,
+        code: `Key${r.toUpperCase()}`,
+        keyCode: s,
+        which: s,
         bubbles: !0,
         cancelable: !0
       })
-    ), t.dispatchEvent(
+    ), e.dispatchEvent(
       new KeyboardEvent("keypress", {
-        key: n,
-        code: `Key${n.toUpperCase()}`,
-        keyCode: o,
-        which: o,
+        key: r,
+        code: `Key${r.toUpperCase()}`,
+        keyCode: s,
+        which: s,
         bubbles: !0,
         cancelable: !0
       })
-    ), t.dispatchEvent(
+    ), e.dispatchEvent(
       new InputEvent("beforeinput", {
         bubbles: !0,
         cancelable: !0,
         inputType: "insertText",
-        data: n
+        data: r
       })
     ), Object.getOwnPropertyDescriptor(
-      Object.getPrototypeOf(t),
+      Object.getPrototypeOf(e),
       "value"
-    )?.set?.call(t, t.value + n), t.dispatchEvent(
+    )?.set?.call(e, e.value + r), e.dispatchEvent(
       new Event("input", {
         bubbles: !0
       })
-    ), t.dispatchEvent(
+    ), e.dispatchEvent(
       new KeyboardEvent("keyup", {
-        key: n,
-        code: `Key${n.toUpperCase()}`,
-        keyCode: o,
-        which: o,
+        key: r,
+        code: `Key${r.toUpperCase()}`,
+        keyCode: s,
+        which: s,
         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();
+  return e;
+}, Ae = (e, n) => {
+  const r = e.startsWith("not.");
+  switch (r ? e.slice(4) : e) {
+    case "eq":
+      return m(
+        window.location.href === n,
+        r,
+        `Assertion passed: URL is ${n}`,
+        `Assertion failed: Expected URL to be ${n}, but got ${window.location.href}`
+      );
+    case "contain.url":
+      return m(
+        window.location.href.includes(n),
+        r,
+        `Assertion passed: URL contains ${n}`,
+        `Assertion failed: Expected URL to contain ${n}, but got ${window.location.href}`
+      );
+    default:
+      throw new Error(`Unknown assertion: ${e}`);
+  }
+}, Te = () => ({
+  location: window.location,
+  should: Ae
+});
+let j = null;
+const qe = (e) => {
+  j = e;
+}, Fe = (e, n) => {
+  me(e), n(), he();
+}, ze = (e, n) => {
+  U(e, async () => {
+    j && await j(), await n();
   });
-}, Oe = (t, r) => {
-  D(t, async () => {
-    _ && await _(), await r();
+}, Be = (e, n) => {
+  U(e, async () => {
+    j && await j(), await n();
   }, { only: !0 });
-}, Ae = (t, r) => {
-  D(t, async () => {
+}, Ve = (e, n) => {
+  U(e, async () => {
   }, { skip: !0 });
-}, Ce = {
-  get: async (t) => {
-    w(`🔎 get("${t}")`);
-    const r = await le(() => document.querySelector(t)), n = {
-      el: r,
+}, Je = {
+  get: async (e) => {
+    R(`Searching get("${e}")`);
+    const n = await be(() => document.querySelector(e)), r = {
+      el: n,
       click: () => {
-        w(`🖱️ click(${t})`), r.click();
+        R(`click(${e})`), n.click();
+      },
+      type: (s) => (R(`type("${s}") into ${e}`), Re(n, s)),
+      should: (s, ...i) => {
+        const a = ge(n, s, ...i);
+        return R(a), r;
       },
-      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;
+        const s = n.textContent || "";
+        return R(`text(${e}) → "${s}"`), s;
       }
     };
-    return n;
+    return r;
   },
-  visit: (t) => {
-    w(`🌍 visit("${t}")`), window.history.pushState({}, "", t), window.dispatchEvent(new PopStateEvent("popstate"));
+  visit: (e) => {
+    R(`visit("${e}")`), window.history.pushState({}, "", e), window.dispatchEvent(new PopStateEvent("popstate"));
   },
-  mockRequest: be,
-  waitFor: me
+  url: Te,
+  mockRequest: ve,
+  waitForRequest: Ee,
+  initRequestMocking: we,
+  clearRequestMockRules: ke,
+  getRequestMockRules: ye
 };
-var j = { exports: {} }, k = {};
+var S = { exports: {} }, A = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -193,29 +288,29 @@ var j = { exports: {} }, k = {};
  * 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
+var X;
+function je() {
+  if (X) return A;
+  X = 1;
+  var e = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function r(s, i, a) {
+    var c = null;
+    if (a !== void 0 && (c = "" + a), i.key !== void 0 && (c = "" + i.key), "key" in i) {
+      a = {};
+      for (var u in i)
+        u !== "key" && (a[u] = i[u]);
+    } else a = i;
+    return i = a.ref, {
+      $$typeof: e,
+      type: s,
+      key: c,
+      ref: i !== void 0 ? i : null,
+      props: a
     };
   }
-  return k.Fragment = r, k.jsx = n, k.jsxs = n, k;
+  return A.Fragment = n, A.jsx = r, A.jsxs = r, A;
 }
-var R = {};
+var T = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -225,166 +320,166 @@ var R = {};
  * 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) {
+var H;
+function _e() {
+  return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(t) {
+      if (t == null) return null;
+      if (typeof t == "function")
+        return t.$$typeof === ue ? null : t.displayName || t.name || null;
+      if (typeof t == "string") return t;
+      switch (t) {
         case O:
           return "Fragment";
-        case H:
+        case re:
           return "Profiler";
-        case K:
-          return "StrictMode";
         case te:
+          return "StrictMode";
+        case ie:
           return "Suspense";
-        case re:
+        case ae:
           return "SuspenseList";
-        case oe:
+        case le:
           return "Activity";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      if (typeof t == "object")
+        switch (typeof t.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";
+        ), t.$$typeof) {
           case ee:
-            var a = e.render;
-            return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+            return "Portal";
+          case se:
+            return (t.displayName || "Context") + ".Provider";
           case ne:
-            return a = e.displayName || null, a !== null ? a : t(e.type) || "Memo";
-          case L:
-            a = e._payload, e = e._init;
+            return (t._context.displayName || "Context") + ".Consumer";
+          case oe:
+            var o = t.render;
+            return t = t.displayName, t || (t = o.displayName || o.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case ce:
+            return o = t.displayName || null, o !== null ? o : e(t.type) || "Memo";
+          case q:
+            o = t._payload, t = t._init;
             try {
-              return t(e(a));
+              return e(t(o));
             } catch {
             }
         }
       return null;
     }
-    function r(e) {
-      return "" + e;
+    function n(t) {
+      return "" + t;
     }
-    function n(e) {
+    function r(t) {
       try {
-        r(e);
-        var a = !1;
+        n(t);
+        var o = !1;
       } catch {
-        a = !0;
+        o = !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,
+      if (o) {
+        o = console;
+        var d = o.error, f = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return d.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           f
-        ), r(e);
+        ), n(t);
       }
     }
-    function o(e) {
-      if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === L)
+    function s(t) {
+      if (t === O) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === q)
         return "<...>";
       try {
-        var a = t(e);
-        return a ? "<" + a + ">" : "<...>";
+        var o = e(t);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = A.A;
-      return e === null ? null : e.getOwner();
+    function i() {
+      var t = P.A;
+      return t === null ? null : t.getOwner();
     }
-    function l() {
+    function a() {
       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;
+    function c(t) {
+      if (F.call(t, "key")) {
+        var o = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return t.key !== void 0;
     }
-    function c(e, a) {
-      function u() {
-        U || (U = !0, console.error(
+    function u(t, o) {
+      function d() {
+        z || (z = !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
+          o
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
+      d.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: d,
         configurable: !0
       });
     }
     function b() {
-      var e = t(this.type);
-      return z[e] || (z[e] = !0, console.error(
+      var t = e(this.type);
+      return B[t] || (B[t] = !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;
+      )), t = this.props.ref, t !== void 0 ? t : 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", {
+    function x(t, o, d, f, w, g, L, W) {
+      return d = g.ref, t = {
+        $$typeof: M,
+        type: t,
+        key: o,
+        props: g,
+        _owner: w
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(t, "ref", {
         enumerable: !1,
         get: b
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
+      }), Object.defineProperty(t, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(e, "_debugStack", {
+      }), Object.defineProperty(t, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: P
-      }), Object.defineProperty(e, "_debugTask", {
+        value: L
+      }), Object.defineProperty(t, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: N
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+        value: W
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
     }
-    function m(e, a, u, f, y, x, P, N) {
-      var p = a.children;
+    function h(t, o, d, f, w, g, L, W) {
+      var p = o.children;
       if (p !== void 0)
         if (f)
-          if (ae(p)) {
+          if (de(p)) {
             for (f = 0; f < p.length; f++)
-              E(p[f]);
+              y(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";
+        else y(p);
+      if (F.call(o, "key")) {
+        p = e(t);
+        var k = Object.keys(o).filter(function(fe) {
+          return fe !== "key";
         });
-        f = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", J[p + f] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
+        f = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", G[p + f] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -393,179 +488,313 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           f,
           p,
-          v,
+          k,
           p
-        ), J[p + f] = !0);
+        ), G[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,
+      if (p = null, d !== void 0 && (r(d), p = "" + d), c(o) && (r(o.key), p = "" + o.key), "key" in o) {
+        d = {};
+        for (var I in o)
+          I !== "key" && (d[I] = o[I]);
+      } else d = o;
+      return p && u(
+        d,
+        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
+      ), x(
+        t,
         p,
-        x,
-        y,
-        s(),
-        u,
-        P,
-        N
+        g,
+        w,
+        i(),
+        d,
+        L,
+        W
       );
     }
-    function E(e) {
-      typeof e == "object" && e !== null && e.$$typeof === F && e._store && (e._store.validated = 1);
+    function y(t) {
+      typeof t == "object" && t !== null && t.$$typeof === M && t._store && (t._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() {
+    var _ = pe, M = Symbol.for("react.transitional.element"), ee = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), te = Symbol.for("react.strict_mode"), re = Symbol.for("react.profiler"), ne = Symbol.for("react.consumer"), se = Symbol.for("react.context"), oe = Symbol.for("react.forward_ref"), ie = Symbol.for("react.suspense"), ae = Symbol.for("react.suspense_list"), ce = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), ue = Symbol.for("react.client.reference"), P = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, de = Array.isArray, N = console.createTask ? console.createTask : function() {
       return null;
     };
-    S = {
-      react_stack_bottom_frame: function(e) {
-        return e();
+    _ = {
+      react_stack_bottom_frame: function(t) {
+        return t();
       }
     };
-    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,
+    var z, B = {}, V = _.react_stack_bottom_frame.bind(
+      _,
+      a
+    )(), J = N(s(a)), G = {};
+    T.Fragment = O, T.jsx = function(t, o, d, f, w) {
+      var g = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return h(
+        t,
+        o,
+        d,
         !1,
         f,
-        y,
-        x ? Error("react-stack-top-frame") : q,
-        x ? C(o(e)) : M
+        w,
+        g ? Error("react-stack-top-frame") : V,
+        g ? N(s(t)) : J
       );
-    }, R.jsxs = function(e, a, u, f, y) {
-      var x = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        a,
-        u,
+    }, T.jsxs = function(t, o, d, f, w) {
+      var g = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return h(
+        t,
+        o,
+        d,
         !0,
         f,
-        y,
-        x ? Error("react-stack-top-frame") : q,
-        x ? C(o(e)) : M
+        w,
+        g ? Error("react-stack-top-frame") : V,
+        g ? N(s(t)) : J
       );
     };
-  })()), R;
+  })()), T;
 }
-var G;
-function Ee() {
-  return G || (G = 1, process.env.NODE_ENV === "production" ? j.exports = ye() : j.exports = ge()), j.exports;
+var K;
+function Se() {
+  return K || (K = 1, process.env.NODE_ENV === "production" ? S.exports = je() : S.exports = _e()), S.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
+var l = Se();
+const $e = (e) => {
+  const n = { children: [] };
+  for (const r of e) {
+    let s = n;
+    r.suite.forEach((i) => {
+      let a = s.children.find(
+        (c) => "name" in c && !c.status && c.name === i
       );
-      l || (l = { name: s, children: [] }, o.children.push(l)), o = l;
-    }), o.children.push(n);
+      a || (a = { name: i, children: [] }, s.children.push(a)), s = a;
+    }), s.children.push(r);
   }
-  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",
+  return n.children;
+}, Ce = {
+  animation: "spin 1s linear infinite"
+}, Oe = () => /* @__PURE__ */ l.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-loader-circle-icon lucide-loader-circle",
+    style: Ce,
+    "data-testid": "loader-icon",
+    children: /* @__PURE__ */ l.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+), $ = typeof document < "u" ? document.createElement("style") : null;
+$ && !document.getElementById("loader-spin-keyframes") && ($.id = "loader-spin-keyframes", $.innerHTML = `
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `, document.head.appendChild($));
+const Pe = () => /* @__PURE__ */ l.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-play-icon lucide-play",
+    "data-testid": "play-icon",
+    children: /* @__PURE__ */ l.jsx("path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" })
+  }
+), Ne = (e) => {
+  switch (e.status) {
+    case "pass":
+      return {
+        item: {
+          background: "#dcfce7"
+        },
+        container: {
+          borderLeft: "3px solid #00c951"
+        }
+      };
+    case "fail":
+      return {
+        item: {
+          background: "#fee2e2"
+        },
+        container: {
+          borderLeft: "3px solid #fb2c36"
+        }
+      };
+    case "skip":
+      return {
+        item: {
+          background: "#f3f4f6"
+        }
+      };
+    case "running":
+      return {
+        item: {
+          background: "#fef9c3"
+        }
+      };
+    default:
+      return {
+        item: {
+          background: "transparent"
+        }
+      };
+  }
+}, Le = (e) => e.startsWith("Assertion passed") ? { color: "#0d542b", fontWeight: "700" } : e.startsWith("Test failed") ? { color: "#fb2c36", fontWeight: "700" } : {}, We = ({ node: e, depth: n, idx: r, runTest: s }) => {
+  const i = Ne(e);
+  return /* @__PURE__ */ l.jsxs("li", { style: { marginBottom: "4px", marginLeft: n * 6, ...i.container }, "data-testid": `test-list-item-${r}`, children: [
+    /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "left",
+          justifyContent: "space-between",
+          padding: "4px 6px",
+          borderRadius: "4px",
+          ...i.item
+        },
+        children: [
+          /* @__PURE__ */ l.jsxs("span", { style: { fontWeight: "500", color: "#374151", maxWidth: "220px" }, children: [
+            e.name,
+            " ",
+            e.only && /* @__PURE__ */ l.jsx("span", { style: { color: "#2563eb" }, "data-testid": `only-indicator-${r}`, children: " (only)" }),
+            e.skip && /* @__PURE__ */ l.jsx("span", { style: { color: "#6b7280" }, "data-testid": `skip-indicator-${r}`, children: " (skipped)" })
+          ] }),
+          /* @__PURE__ */ l.jsx(
+            "button",
+            {
+              onClick: () => s(r),
+              "aria-label": `Run ${e.name} test`,
+              style: {
+                background: "transparent",
+                border: "1px solid #d1d5db",
+                borderRadius: "4px",
+                padding: "0",
+                cursor: "pointer",
+                verticalAlign: "middle",
+                fontSize: "12px",
+                width: "24px",
+                height: "24px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              disabled: e.status === "running",
+              "data-testid": `run-test-button-${r}`,
+              children: e.status === "running" ? /* @__PURE__ */ l.jsx(Oe, {}) : /* @__PURE__ */ l.jsx(Pe, {})
+            }
+          )
+        ]
+      }
+    ),
+    e.logs && e.logs.length > 0 && /* @__PURE__ */ l.jsx(
+      "ul",
+      {
+        style: {
+          borderRadius: "4px",
+          maxHeight: "260px",
+          overflowY: "auto",
+          padding: 0,
+          background: "#f3f4f6",
+          listStyle: "none",
+          marginTop: "4px",
+          textAlign: "left"
+        },
+        children: e.logs.map((a, c) => /* @__PURE__ */ l.jsx(
+          "li",
           {
-            onClick: () => o(n),
             style: {
-              background: "transparent",
-              border: "1px solid #d1d5db",
-              borderRadius: "4px",
-              padding: "2px 6px",
-              cursor: "pointer",
-              fontSize: "12px"
+              fontSize: "12px",
+              padding: "4px 6px",
+              borderBottom: "1px solid #d1d5db",
+              ...Le(a)
             },
-            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: a
           },
-          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(
+          c
+        ))
+      }
+    )
+  ] }, e.name);
+}, Ie = () => /* @__PURE__ */ l.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-down-icon lucide-chevron-down",
+    "data-testid": "chevron-down-icon",
+    children: /* @__PURE__ */ l.jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+), De = () => /* @__PURE__ */ l.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-right-icon lucide-chevron-right",
+    "data-testid": "chevron-right-icon",
+    children: /* @__PURE__ */ l.jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+), Ye = ({ runTest: e, tests: n }) => {
+  const [r, s] = D({}), i = (c, u = 0) => {
+    if ("status" in c)
+      return /* @__PURE__ */ l.jsx(We, { node: c, depth: u, idx: n.indexOf(c), runTest: e }, c.name);
+    const b = r[c.name];
+    return /* @__PURE__ */ l.jsxs("li", { style: { marginBottom: "6px", marginLeft: u * 12, textAlign: "left" }, children: [
+      /* @__PURE__ */ l.jsxs(
         "div",
         {
           style: {
             fontWeight: "bold",
             cursor: "pointer",
             color: "#374151",
-            marginBottom: "4px"
+            marginBottom: "4px",
+            display: "flex",
+            alignItems: "center",
+            gap: "4px"
           },
-          onClick: () => o((h) => ({ ...h, [i.name]: !h[i.name] })),
+          onClick: () => s((x) => ({ ...x, [c.name]: !x[c.name] })),
+          "data-testid": `test-group-${c.name}`,
+          tabIndex: 0,
+          role: "button",
+          "aria-expanded": !b,
           children: [
-            i.name,
+            c.name,
             " ",
-            b ? "▶" : "▼"
+            b ? /* @__PURE__ */ l.jsx(De, {}) : /* @__PURE__ */ l.jsx(Ie, {})
           ]
         }
       ),
-      !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(
+      !b && /* @__PURE__ */ l.jsx("ul", { style: { listStyle: "none", padding: 0 }, children: c.children.map((x) => i(x, u + 1)) })
+    ] }, c.name);
+  }, a = $e(n);
+  return /* @__PURE__ */ l.jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: a.map((c) => i(c)) });
+}, Ue = ({ setOpen: e }) => /* @__PURE__ */ l.jsx(
   "div",
   {
     style: {
@@ -581,35 +810,35 @@ const ve = (t) => {
       cursor: "pointer",
       fontSize: "12px"
     },
-    onClick: () => t(!0),
-    children: "▶ TWD"
+    onClick: () => e(!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";
+), Ge = () => {
+  const [e, n] = D(0), [r, s] = D(!0), i = async (c) => {
+    const u = v[c];
+    u.logs = [];
+    const b = console.log, x = console.error;
+    if (console.log = (...h) => {
+      u.logs?.push(h.map(String).join(" ")), b(...h), n((y) => y + 1);
+    }, console.error = (...h) => {
+      u.logs?.push(h.map(String).join(" ")), x(...h), n((y) => y + 1);
+    }, u.status = "running", u.skip)
+      u.status = "skip";
     else
       try {
-        await c.fn(), c.status = "pass";
-      } catch (m) {
-        c.status = "fail", console.error("Test failed:", c.name, m);
+        await u.fn(), u.status = "pass";
+      } catch (h) {
+        u.status = "fail", console.error("Test failed:", u.name, h);
       }
-    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);
+    console.log = b, console.error = x, n((h) => h + 1);
+  }, a = async () => {
+    const c = v.filter((b) => b.only), u = c.length > 0 ? c : v;
+    for (let b = 0; b < u.length; b++) {
+      const x = v.indexOf(u[b]);
+      await i(x);
     }
   };
-  return n ? /* @__PURE__ */ d.jsxs(
+  return r ? /* @__PURE__ */ l.jsxs(
     "div",
     {
       style: {
@@ -618,6 +847,7 @@ const ve = (t) => {
         left: 0,
         bottom: 0,
         width: "280px",
+        textAlign: "left",
         background: "#f9fafb",
         borderRight: "1px solid #e5e7eb",
         padding: "8px",
@@ -626,9 +856,19 @@ const ve = (t) => {
         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(
+        /* @__PURE__ */ l.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "14px", alignItems: "center" }, children: [
+          /* @__PURE__ */ l.jsx(
+            "strong",
+            {
+              style: {
+                fontSize: "18px",
+                fontWeight: "bold",
+                color: "#374151"
+              },
+              children: "TWD Tests"
+            }
+          ),
+          /* @__PURE__ */ l.jsx(
             "button",
             {
               style: {
@@ -637,15 +877,15 @@ const ve = (t) => {
                 cursor: "pointer",
                 fontSize: "14px"
               },
-              onClick: () => o(!1),
+              onClick: () => s(!1),
               children: "✖"
             }
           )
         ] }),
-        /* @__PURE__ */ d.jsx(
+        /* @__PURE__ */ l.jsx(
           "button",
           {
-            onClick: l,
+            onClick: a,
             style: {
               background: "#3b82f6",
               color: "white",
@@ -655,20 +895,20 @@ const ve = (t) => {
               marginBottom: "10px",
               cursor: "pointer"
             },
-            children: "▶ Run All"
+            children: "Run All"
           }
         ),
-        /* @__PURE__ */ d.jsx(ke, { tests: g, runTest: s })
+        /* @__PURE__ */ l.jsx(Ye, { tests: v, runTest: i })
       ]
     }
-  ) : /* @__PURE__ */ d.jsx(Re, { setOpen: o });
+  ) : /* @__PURE__ */ l.jsx(Ue, { setOpen: s });
 };
 export {
-  Pe as TWDSidebar,
-  _e as beforeEach,
-  Se as describe,
-  je as it,
-  Oe as itOnly,
-  Ae as itSkip,
-  Ce as twd
+  Ge as TWDSidebar,
+  qe as beforeEach,
+  Fe as describe,
+  ze as it,
+  Be as itOnly,
+  Ve as itSkip,
+  Je as twd
 };