twd-js 0.7.1 → 1.0.0

package/README.md

@@ -6,12 +6,16 @@
 [![Maintainability](https://qlty.sh/gh/BRIKEV/projects/twd/maintainability.svg)](https://qlty.sh/gh/BRIKEV/projects/twd)
 [![Code Coverage](https://qlty.sh/gh/BRIKEV/projects/twd/coverage.svg)](https://qlty.sh/gh/BRIKEV/projects/twd)
 
-> ⚠️ This is a **beta release** – expect frequent updates and possible breaking changes.
+<p>
+  <img src="./images/logo_full_sized.png" alt="TWD Logo" width="400">
+</p>
 
 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.
 
+**For complete and updated documentation, tutorials, and examples, visit: [https://brikev.github.io/twd/](https://brikev.github.io/twd/)**
+
 ## Table of Contents
 
 - [Features](#features)
@@ -105,23 +109,29 @@ pnpm add twd-js
 
    ```ts
    // src/app.twd.test.ts
-   import { describe, it, twd } from "twd-js";
-
-   beforeEach(() => {
-     // Reset state before each test
-   });
-
-   describe("App interactions", () => {
-     it("clicks the button", async () => {
-       twd.visit("/");
-       const btn = await twd.get("button");
-       btn.click();
-       const message = await twd.get("#message");
-       message.should("have.text", "Hello");
+   import { twd, userEvent } from "twd-js";
+   import { describe, it } from "twd-js/runner";
+
+   describe("Hello World Page", () => {
+     it("should display the welcome title and counter button", async () => {
+       await twd.visit("/");
+       
+       const title = await twd.get("[data-testid='welcome-title']");
+       title.should("be.visible").should("have.text", "Welcome to TWD");
+       
+       const counterButton = await twd.get("[data-testid='counter-button']");
+       counterButton.should("be.visible").should("have.text", "Count is 0");
+       
+       await userEvent.click(counterButton.el);
+       counterButton.should("have.text", "Count is 1");
      });
    });
    ```
 
+   <p align="center">
+     <img src="./images/twd_side_bar_success.png" alt="TWD Sidebar in action" width="800">
+   </p>
+
 3. **Auto-load your tests:**
 
 
@@ -182,23 +192,23 @@ pnpm add twd-js
 TWD uses a familiar testing structure with `describe`, `it`, `beforeEach`, and other common testing functions:
 
 ```ts
-import { describe, it, itSkip, itOnly, beforeEach, twd, userEvent } from "twd-js";
-
+import { twd, userEvent } from "twd-js";
+import { describe, it, beforeEach } from "twd-js/runner";
 
 describe("User authentication", () => {
   beforeEach(() => {
     // Reset state before each test
   });
   it("should login successfully", async () => {
-    twd.visit("/login");
+    await twd.visit("/login");
     // Your test logic here
   });
   
-  itSkip("skipped test", () => {
+  it.skip("skipped test", () => {
     // This test will be skipped
   });
   
-  itOnly("only this test runs", () => {
+  it.only("only this test runs", () => {
     // Only this test will run when .only is present
   });
 });
@@ -369,8 +379,8 @@ console.log("Response:", rule.response);
 |----------|-------------|---------|
 | `describe(name, fn)` | Groups related tests | `describe("User login", () => {...})` |
 | `it(name, fn)` | Defines a test case | `it("should login", async () => {...})` |
-| `itOnly(name, fn)` | Runs only this test | `itOnly("focused test", () => {...})` |
-| `itSkip(name, fn)` | Skips this test | `itSkip("broken test", () => {...})` |
+| `it.only(name, fn)` | Runs only this test | `it.only("focused test", () => {...})` |
+| `it.skip(name, fn)` | Skips this test | `it.skip("broken test", () => {...})` |
 | `beforeEach(fn)` | Runs before each test | `beforeEach(() => {...})` |
 
 ### TWD Commands
@@ -413,11 +423,12 @@ All assertions can be negated with `not.` prefix (e.g., `not.be.disabled`).
 ### Basic Form Testing
 
 ```ts
-import { describe, it, twd, userEvent } from "twd-js";
+import { twd, userEvent } from "twd-js";
+import { describe, it } from "twd-js/runner";
 
 describe("Contact form", () => {
   it("submits form data", async () => {
-    twd.visit("/contact");
+    await twd.visit("/contact");
     
     const user = userEvent.setup();
     const emailInput = await twd.get("input#email");
@@ -438,24 +449,25 @@ describe("Contact form", () => {
 ### API Mocking with Authentication
 
 ```ts
-import { describe, it, twd, userEvent } from "twd-js";
+import { twd, userEvent } from "twd-js";
+import { describe, it } from "twd-js/runner";
 
 describe("Protected routes", () => {
   it("redirects to login when unauthorized", async () => {
-    twd.visit("/dashboard");
+    await twd.visit("/dashboard");
     await twd.wait(100);
     twd.url().should("contain.url", "/login");
   });
   
   it("loads dashboard with valid session", async () => {
     // Mock authentication check
-    twd.mockRequest("authCheck", {
+    await twd.mockRequest("authCheck", {
       method: "GET", 
       url: "/api/auth/me",
       response: { id: 1, name: "John Doe" }
     });
     
-    twd.visit("/dashboard");
+    await twd.visit("/dashboard");
     await twd.waitForRequest("authCheck");
     
     const welcome = await twd.get("h1");

package/dist/commands/mockBridge.d.ts

@@ -4,7 +4,7 @@ export type Rule = {
     response: unknown;
     alias: string;
     executed?: boolean;
-    request?: unknown;
+    request?: any;
     status?: number;
     responseHeaders?: Record<string, string>;
     urlRegex?: boolean;

package/dist/commands/visit.d.ts

@@ -1 +1 @@
-export declare const visit: (url: string) => Promise<void>;
+export declare const visit: (url: string, reload?: boolean) => Promise<void>;

package/dist/constants/version.d.ts

@@ -0,0 +1 @@
+export declare const TWD_VERSION = "1.0.0";