chore: update version

Author: kevinccbsg

CHANGELOG.md

@@ -1,4 +1,12 @@
-## <small>0.1.2 (2025-09-11)</small>
+## 0.2.0 (2025-09-18)
+
+* Feat/add cli command (#19) ([b70110f](github.com/BRIKEV/twd/commits/b70110f)), closes [#19](github.com/BRIKEV/twd/issues/19)
+* Feat/add UI tests (#20) ([491df53](github.com/BRIKEV/twd/commits/491df53)), closes [#20](github.com/BRIKEV/twd/issues/20)
+* Feat/improve networkintercept (#17) ([b39b723](github.com/BRIKEV/twd/commits/b39b723)), closes [#17](github.com/BRIKEV/twd/issues/17)
+* Feat/url command (#15) ([7542950](github.com/BRIKEV/twd/commits/7542950)), closes [#15](github.com/BRIKEV/twd/issues/15)
+
+
+## 0.1.2 (2025-09-11)
 
 * chore: update version ([e8599da](https://github.com/BRIKEV/twd/commit/e8599da))
 * Feat/improve assertion messages (#14) ([a2a36a2](https://github.com/BRIKEV/twd/commit/a2a36a2)), closes [#14](https://github.com/BRIKEV/twd/issues/14)

README.md

@@ -3,12 +3,26 @@
 [![CI](https://github.com/BRIKEV/twd/actions/workflows/ci.yml/badge.svg)](https://github.com/BRIKEV/twd/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/twd-js.svg)](https://www.npmjs.com/package/twd-js)
 [![license](https://img.shields.io/github/license/brikev/twd.svg)](./LICENSE)
+[![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.
 
-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.
+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.
+
+---
+
+## Features
+
+- 🧪 **In-browser test runner** with a beautiful sidebar UI
+- ⚡ **Instant feedback** as you develop
+- 🔥 **Mock Service Worker** integration for API/request mocking
+- 📝 **Simple, readable test syntax** (inspired by popular test frameworks)
+- 🧩 **Automatic test discovery** with Vite support
+- 🛠️ **Works with React** (support for more frameworks coming)
 
 ## Installation
 
@@ -25,74 +39,118 @@ yarn add twd-js
 pnpm add twd-js
 ```
 
-## How to use
 
-Add the our React Sidebar component to your application:
+## Quick Start
 
-```tsx
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import { TWDSidebar } from 'twd-js'
-import router from './routes.ts'
-import { RouterProvider } from 'react-router'
+1. **Add the TWD Sidebar to your React app:**
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <RouterProvider router={router} />
-    <TWDSidebar />
-  </StrictMode>,
-)
-```
+   ```tsx
+   import { StrictMode } from 'react';
+   import { createRoot } from 'react-dom/client';
+   import App from './App';
+   import './index.css';
+   import { TWDSidebar } from 'twd-js';
 
-Then, create test files with the `twd.test.ts` or any extension you want. For example:
-
-```ts
-// src/app.twd.test.ts
-import { describe, it, twd } from "twd-js";
-
-beforeEach(() => {
-  console.log("Reset state before each test");
-});
-
-describe("App interactions", () => {
-  it("clicks the button", async () => {
-    twd.visit("/"); // Visit the root URL
-    const btn = await twd.get("button");
-    btn.click();
-    const message = await twd.get("#message");
-    // have.text
-    const haveText = await twd.get("#message");
-    haveText.should("have.text", "Hello");
-  });
-});
-```
+   createRoot(document.getElementById('root')!).render(
+     <StrictMode>
+       <App />
+       <TWDSidebar />
+     </StrictMode>,
+   );
+   ```
 
-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:
+2. **Write your tests:**
 
-```ts
-// src/loadTests.ts
-import "./app.twd.test";
-import "./another-test-file.twd.test";
-// Import other test files here
-```
+   Create files ending with `.twd.test.ts` (or any extension you prefer):
+
+   ```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");
+     });
+   });
+   ```
+
+3. **Auto-load your tests:**
+
+   - With Vite:
+
+     ```ts
+     // src/loadTests.ts
+     const modules = import.meta.glob("./**/*.twd.test.ts", { eager: true });
+     // No need to export anything
+     ```
+
+   - Or manually:
+
+     ```ts
+     // src/loadTests.ts
+     import "./app.twd.test";
+     import "./another-test-file.twd.test";
+     ```
+
+   Import `loadTests.ts` in your main entry (e.g., `main.tsx`):
 
-Or if you're using vite you can use Vite's `import.meta.glob` to automatically import all test files in a directory:
+   ```tsx
+   import './loadTests';
+   ```
 
-```ts
-// This automatically imports all files ending with .twd.test.ts
-const modules = import.meta.glob("./**/*.twd.test.ts", { eager: true });
+4. **Run your app and open the TWD sidebar** to see and run your tests in the browser.
 
-// You don't need to export anything; simply importing this in App.tsx
-// will cause the test files to execute and register their tests.
+---
+
+## Mock Service Worker (API Mocking)
+
+TWD provides a CLI to easily set up a mock service worker for API/request mocking in your app.
+
+### Install the mock service worker
+
+Run the following command in your project root:
+
+```bash
+npx twd-mock init <public-dir> [--save]
 ```
 
-Then, import the `loadTests.ts` file in your main application file (e.g., `main.tsx` or `App.tsx`):
+- Replace `<public-dir>` with the path to your app's public/static directory (e.g., `public/` or `dist/`).
+- Use `--save` to print a registration snippet for your app.
+
+This will copy `mock-sw.js` to your public directory.
+
+### Register the service worker in your app
 
-```tsx
-import './loadTests' // Import test files
+Add this snippet to your app's entry point (e.g., `main.tsx`):
+
+```js
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/mock-sw.js?v=1");
+}
 ```
 
-Finally, run your application and open the TWD sidebar to see and run your tests.
+---
+
+## More Usage Examples
+
+See the [examples](https://github.com/BRIKEV/twd/tree/main/examples) directory for more scenarios and advanced usage.
+
+---
+
+## Contributing
+
+Contributions are welcome! Please open issues or pull requests on [GitHub](https://github.com/BRIKEV/twd).
+
+---
+
+## License
 
-You can check the [examples](https://github.com/BRIKEV/twd/tree/main/examples) directory for more usage scenarios.
+This project is licensed under the [MIT License](./LICENSE).

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "twd-js",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Test While Developing (TWD) - in-browser testing",
   "main": "./dist/twd.umd.js",
   "module": "./dist/twd.es.js",