twd-js 0.2.0 → 0.3.1

package/README.md

@@ -8,7 +8,6 @@
 
 > ⚠️ This is a **beta release** – expect frequent updates and possible breaking changes.
 
-
 TWD (Testing Web Development) is a library designed to seamlessly integrate testing into your web development workflow. It streamlines the process of writing, running, and managing tests directly in your application, with a modern UI and powerful mocking capabilities.
 
 Currently, TWD supports React, with plans to add more frameworks soon.
@@ -39,23 +38,22 @@ yarn add twd-js
 pnpm add twd-js
 ```
 
-
 ## Quick Start
 
 1. **Add the TWD Sidebar to your React app:**
 
    ```tsx
-   import { StrictMode } from 'react';
-   import { createRoot } from 'react-dom/client';
-   import App from './App';
-   import './index.css';
-   import { TWDSidebar } from 'twd-js';
+   import { StrictMode } from "react";
+   import { createRoot } from "react-dom/client";
+   import App from "./App";
+   import "./index.css";
+   import { TWDSidebar } from "twd-js";
 
-   createRoot(document.getElementById('root')!).render(
+   createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <App />
        <TWDSidebar />
-     </StrictMode>,
+     </StrictMode>
    );
    ```
 
@@ -87,8 +85,18 @@ pnpm add twd-js
    - With Vite:
 
      ```ts
+     import { twd } from "twd-js";
      // src/loadTests.ts
-     const modules = import.meta.glob("./**/*.twd.test.ts", { eager: true });
+     import.meta.glob("./**/*.twd.test.ts", { eager: true });
+     // Initialize request mocking once
+     twd
+       .initRequestMocking()
+       .then(() => {
+         console.log("Request mocking initialized");
+       })
+       .catch((err) => {
+         console.error("Error initializing request mocking:", err);
+       });
      // No need to export anything
      ```
 
@@ -103,7 +111,7 @@ pnpm add twd-js
    Import `loadTests.ts` in your main entry (e.g., `main.tsx`):
 
    ```tsx
-   import './loadTests';
+   import "./loadTests";
    ```
 
 4. **Run your app and open the TWD sidebar** to see and run your tests in the browser.
@@ -112,7 +120,6 @@ pnpm add twd-js
 
 ## Mock Service Worker (API Mocking)
 
-
 TWD provides a CLI to easily set up a mock service worker for API/request mocking in your app. You do **not** need to manually register the service worker in your app—TWD handles this automatically when you use `twd.initRequestMocking()` in your tests.
 
 ### Install the mock service worker
@@ -120,7 +127,7 @@ TWD provides a CLI to easily set up a mock service worker for API/request mockin
 Run the following command in your project root:
 
 ```bash
-npx twd-mock init <public-dir> [--save]
+npx twd-js init <public-dir> [--save]
 ```
 
 - Replace `<public-dir>` with the path to your app's public/static directory (e.g., `public/` or `dist/`).
@@ -128,14 +135,16 @@ npx twd-mock init <public-dir> [--save]
 
 This will copy `mock-sw.js` to your public directory.
 
-
 ### How to use request mocking in your tests
 
 Just call `await twd.initRequestMocking()` at the start of your test, then use `twd.mockRequest` to define your mocks. Example:
 
 ```ts
+import { describe, it, twd, userEvent } from "twd-js";
+
 it("fetches a message", async () => {
-  await twd.initRequestMocking();
+  twd.visit("/");
+  const user = userEvent.setup();
   await twd.mockRequest("message", {
     method: "GET",
     url: "https://api.example.com/message",
@@ -144,7 +153,7 @@ it("fetches a message", async () => {
     },
   });
   const btn = await twd.get("button[data-twd='message-button']");
-  btn.click();
+  await user.click(btn.el);
   await twd.waitForRequest("message");
   const messageText = await twd.get("p[data-twd='message-text']");
   messageText.should("have.text", "Mocked message!");

package/dist/commands/mockBridge.d.ts

@@ -7,6 +7,7 @@ export type Rule = {
     request?: unknown;
     status?: number;
     headers?: Record<string, string>;
+    urlRegex?: boolean;
 };
 export interface Options {
     method: string;
@@ -14,6 +15,7 @@ export interface Options {
     response: unknown;
     status?: number;
     headers?: Record<string, string>;
+    urlRegex?: boolean;
 }
 /**
  * Initialize the mocking service worker.

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from './twd';
 export { TWDSidebar } from './ui/TWDSidebar';
+export { expect } from 'chai';
+export { userEvent } from './proxies/userEvent';

package/dist/mock-sw.js

@@ -1 +1 @@
-function i(t,n,s){return s.find(e=>e.method===t&&(typeof e.url=="string"?e.url===n:new RegExp(e.url).test(n)))}function r(t,n,s){t.forEach(e=>e.postMessage({type:"EXECUTED",alias:n.alias,request:s}))}let l=[];self.addEventListener("fetch",t=>{const{method:n}=t.request,s=t.request.url,e=i(n,s,l);e&&(console.log("Mock hit:",e.alias,n,s),t.respondWith((async()=>{let a=null;try{a=await t.request.clone().text()}catch{}return self.clients.matchAll().then(o=>{r(o,e,a)}),new Response(JSON.stringify(e.response),{status:e.status||200,headers:e.headers||{"Content-Type":"application/json"}})})()))});self.addEventListener("message",t=>{const{type:n,rule:s}=t.data||{};n==="ADD_RULE"&&(l=l.filter(e=>e.alias!==s.alias),l.push(s),console.log("Rule added:",s))});
+function i(s,t,l){return l.find(e=>{const n=e.method.toLowerCase()===s.toLowerCase();if(e.urlRegex){const r=new RegExp(e.url);return n&&r.test(t)}const a=e.url===t||t.includes(e.url);return n&&a})}function c(s,t,l){s.forEach(e=>e.postMessage({type:"EXECUTED",alias:t.alias,request:l}))}let o=[];self.addEventListener("fetch",s=>{const{method:t}=s.request,l=s.request.url,e=i(t,l,o);e&&(console.log("Mock hit:",e.alias,t,l),s.respondWith((async()=>{let n=null;try{n=await s.request.clone().text()}catch{}return self.clients.matchAll().then(a=>{c(a,e,n)}),new Response(JSON.stringify(e.response),{status:e.status||200,headers:e.headers||{"Content-Type":"application/json"}})})()))});self.addEventListener("message",s=>{const{type:t,rule:l}=s.data||{};t==="ADD_RULE"&&(o=o.filter(e=>e.alias!==l.alias),o.push(l),console.log("Rule added:",l)),t==="CLEAR_RULES"&&(o=[],console.log("All rules cleared"))});

package/dist/proxies/userEvent.d.ts

@@ -0,0 +1,4 @@
+import { default as userEventLib } from '@testing-library/user-event';
+type UserEvent = typeof userEventLib;
+export declare const userEvent: UserEvent;
+export {};

package/dist/twd-types.d.ts

@@ -88,47 +88,6 @@ export type ShouldFn = {
 export interface TWDElemAPI {
     /** The underlying DOM element. */
     el: Element;
-    /**
-     * Simulates a user click on the element.
-     * Returns the same API so you can chain more actions.
-     *
-     * @example
-     * ```ts
-     * const button = await twd.get("button");
-     * button.click();
-     *
-     * ```
-     *
-     */
-    click: () => void;
-    /**
-     * Types text into an input element.
-     * @param text The text to type.
-     * @returns The input element.
-     *
-     * @example
-     * ```ts
-     * const email = await twd.get("input#email");
-     * email.type("test@example.com");
-     *
-     * ```
-     *
-     */
-    type: (text: string) => HTMLInputElement | HTMLTextAreaElement;
-    /**
-     * Gets the text content of the element.
-     * @returns The text content.
-     *
-     * @example
-     * ```ts
-     * const para = await twd.get("p");
-     * const content = para.text();
-     * console.log(content);
-     *
-     * ```
-     *
-     */
-    text: () => string;
     /**
      * Asserts something about the element.
      * @param name The name of the assertion.

package/dist/twd.d.ts

@@ -138,6 +138,16 @@ interface TWDAPI {
      * ```
      */
     getRequestMockRules: () => Rule[];
+    /**
+     * Waits for a specified time.
+     * @param time Time in milliseconds to wait
+     * @returns A promise that resolves after the specified time
+     * @example
+     * ```ts
+     * await twd.wait(500); // wait for 500ms
+     * ```
+     */
+    wait: (time: number) => Promise<void>;
 }
 /**
  * Mini Cypress-style helpers for DOM testing.