Feat/improve networkintercept (#17)

* feat: remove log statements

* feat: add mock bridge code to use sw feature

* test: add mock bridge tests

* docs: update examples with service mock

* feat: update twd api

* feat: remove old fething monkey patch code

* feat: improve coverage

Author: kevinccbsg

examples/my-twd-app/public/mock-sw.js

@@ -0,0 +1,63 @@
+// mock-sw.js
+
+// Storage for rules inside the SW
+let rules = [];
+
+/**
+ * Match a request against rules
+ */
+const findRule = (method, url) => {
+  return rules.find(
+    (r) =>
+      r.method === method &&
+      (typeof r.url === "string" ? r.url === url : new RegExp(r.url).test(url))
+  );
+};
+
+// Intercept fetches
+self.addEventListener("fetch", (event) => {
+  const { method } = event.request;
+  const url = event.request.url;
+
+  const rule = findRule(method, url);
+
+  if (rule) {
+    console.log("Mock hit:", rule.alias, method, url);
+
+    event.respondWith(
+      (async () => {
+        // Capture body if needed
+        let body = null;
+        try {
+          body = await event.request.clone().text();
+        } catch {}
+
+        // Mark executed and notify page
+        self.clients.matchAll().then((clients) => {
+          clients.forEach((client) =>
+            client.postMessage({
+              type: "EXECUTED",
+              alias: rule.alias,
+              request: body,
+            })
+          );
+        });
+
+        return new Response(JSON.stringify(rule.response), {
+          status: rule.status || 200,
+          headers: rule.headers || { "Content-Type": "application/json" },
+        });
+      })()
+    );
+  }
+});
+
+// Listen for messages from the app
+self.addEventListener("message", (event) => {
+  const { type, rule } = event.data || {};
+  if (type === "ADD_RULE") {
+    rules = rules.filter((r) => r.alias !== rule.alias);
+    rules.push(rule);
+    console.log("Rule added:", rule);
+  }
+});

examples/my-twd-app/src/twd-tests/app.twd.test.ts

@@ -28,7 +28,8 @@ describe("App interactions", () => {
   });
 
   it("fetches a joke", async () => {
-    twd.mockRequest("joke", {
+    await twd.initRequestMocking();
+    await twd.mockRequest("joke", {
       method: "GET",
       url: "https://api.chucknorris.io/jokes/random",
       response: {
@@ -38,12 +39,12 @@ describe("App interactions", () => {
     let btn = await twd.get("button[data-twd='joke-button']");
     btn.click();
     // Wait for the mock fetch to fire
-    await twd.waitFor("joke");
+    await twd.waitForRequest("joke");
     let jokeText = await twd.get("p[data-twd='joke-text']");
     // console.log(`Joke text: ${jokeText.el.textContent}`);
     jokeText.should("have.text", "Mocked joke!");
     // overwrite mid-test
-    twd.mockRequest("joke", {
+    await twd.mockRequest("joke", {
       method: "GET",
       url: "https://api.chucknorris.io/jokes/random",
       response: {
@@ -52,10 +53,11 @@ describe("App interactions", () => {
     });
     btn = await twd.get("button[data-twd='joke-button']");
     btn.click();
-    await twd.waitFor("joke");
+    await twd.waitForRequest("joke");
     jokeText = await twd.get("p[data-twd='joke-text']");
+    jokeText.should("have.text", "Mocked second joke!");
     // console.log(`Joke text: ${jokeText.el.textContent}`);
-    jokeText.should('be.disabled');
+    // jokeText.should('be.disabled');
   });
 
   it("visit contact page", async () => {
@@ -71,7 +73,7 @@ describe("App interactions", () => {
     messageInput.type("Hello, this is a test message.");
     const submitBtn = await twd.get("button[type='submit']");
     submitBtn.click();
-    const rule = await twd.waitFor("contactSubmit");
+    const rule = await twd.waitForRequest("contactSubmit");
     console.log(`Submitted body: ${rule.request}`);
   });
 });

src/commands/mockBridge.ts

@@ -0,0 +1,113 @@
+// mockBridge.ts
+export type Rule = {
+  method: string;
+  url: string | RegExp;
+  response: unknown;
+  alias: string;
+  executed?: boolean;
+  request?: unknown;
+  status?: number;
+  headers?: Record<string, string>;
+};
+
+export interface Options {
+  method: string;
+  url: string | RegExp;
+  response: unknown;
+  status?: number;
+  headers?: Record<string, string>;
+}
+
+const rules: Rule[] = [];
+const waiters: Record<string, (rule: Rule) => void> = {};
+const SW_DELAY = 100;
+
+/**
+ * Initialize the mocking service worker.
+ * Call this once before using `mockRequest` or `waitFor`.
+ */
+export const initRequestMocking = async () => {
+  if ("serviceWorker" in navigator) {
+    await navigator.serviceWorker.register("/mock-sw.js?v=1");
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      if (event.data?.type === "EXECUTED") {
+        const { alias, request } = event.data;
+        const rule = rules.find((r) => r.alias === alias);
+        if (rule) {
+          rule.executed = true;
+          rule.request = request;
+          if (waiters[alias]) {
+            waiters[alias](rule);
+            delete waiters[alias];
+          }
+        }
+      }
+    });
+  }
+};
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Mock a network request.
+ *
+ * @param alias Identifier for the mock rule. Useful for `waitFor()`.
+ * @param options Options to configure the mock:
+ *  - `method`: HTTP method ("GET", "POST", …)
+ *  - `url`: URL string or RegExp to match
+ *  - `response`: Body of the mocked response
+ *  - `status`: (optional) HTTP status code (default: 200)
+ *  - `headers`: (optional) Response headers
+ *
+ * @example
+ * ```ts
+ * mockRequest("getUser", {
+ *   method: "GET",
+ *   url: /\/api\/user\/\d+/,
+ *   response: { id: 1, name: "Kevin" },
+ *   status: 200,
+ *   headers: { "x-mock": "true" }
+ * });
+ * ```
+ */
+export const mockRequest = async (alias: string, options: Options) => {
+  const rule: Rule = { alias, ...options, executed: false };
+  const idx = rules.findIndex((r) => r.alias === alias);
+  if (idx !== -1) rules[idx] = rule;
+  else rules.push(rule);
+
+  // Push to SW
+  navigator.serviceWorker.controller?.postMessage({
+    type: "ADD_RULE",
+    rule,
+  });
+  await sleep(SW_DELAY);
+  await Promise.resolve();
+};
+
+/**
+ * Wait for a mocked request to be made.
+ * @param alias The alias of the mock rule to wait for
+ * @returns The matched rule (with body if applicable)
+ */
+export const waitForRequest = async (alias: string): Promise<Rule> => {
+  await sleep(SW_DELAY);
+  const rule = rules.find((r) => r.alias === alias && r.executed);
+  if (rule) return Promise.resolve(rule);
+  return new Promise((resolve) => {
+    waiters[alias] = resolve;
+  });
+};
+
+/**
+ * Get the current list of request mock rules.
+ * @returns The current list of request mock rules.
+ */
+export const getRequestMockRules = () => rules;
+
+/**
+ * Clear all request mock rules.
+ */
+export const clearRequestMockRules = () => {
+  rules.length = 0;
+};