Feat/add better UI (#23)

* feat: remove monkey patch console.log

* feat: improve color scheme when dark mode

* docs: update readme

* feat: export chai expect and improve assertions

* docs: add example with multiple mocks

* feat: add prop to display or not the navbar

* test: improve tests for twd sidebar

* feat: add user-event proxy

* test: add tests to proxy user event

Author: kevinccbsg

README.md

@@ -87,8 +87,17 @@ 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
      ```
 
@@ -135,7 +144,6 @@ Just call `await twd.initRequestMocking()` at the start of your test, then use `
 
 ```ts
 it("fetches a message", async () => {
-  await twd.initRequestMocking();
   await twd.mockRequest("message", {
     method: "GET",
     url: "https://api.example.com/message",

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

@@ -1,5 +1,13 @@
-// This automatically imports all files ending with .twd.test.ts
-const modules = import.meta.glob("./**/*.twd.test.ts", { eager: true });
+import { twd } from "../../../src";
 
+// This automatically imports all files ending with .twd.test.ts
+import.meta.glob("./**/*.twd.test.ts", { eager: true });
+twd.initRequestMocking()
+  .then(() => {
+    console.log("Request mocking initialized");
+  })
+  .catch((err) => {
+    console.error("Error initializing request mocking:", err);
+  });
 // You don't need to export anything; simply importing this in App.tsx
 // will cause the test files to execute and register their tests.

examples/my-twd-app/src/loadTests.ts

@@ -9,6 +9,6 @@ import { RouterProvider } from 'react-router'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <RouterProvider router={router} />
-    <TWDSidebar />
+    <TWDSidebar open={true} />
   </StrictMode>,
 )

examples/my-twd-app/src/main.tsx

@@ -1,4 +1,4 @@
-import { describe, it, itOnly, itSkip, beforeEach, twd } from "../../../../src/twd";
+import { describe, it, itOnly, itSkip, beforeEach, twd, expect, userEvent } from "../../../../src";
 
 beforeEach(() => {
   console.log("Reset state before each test");
@@ -15,8 +15,11 @@ describe("App interactions", () => {
   });
 
   itOnly("only this one runs if present and long text to check the layout", async () => {
+    const user = userEvent.setup();
     const btn = await twd.get("button");
     btn.click();
+    await user.click(btn.el);
+    await userEvent.click(btn.el);
     console.log("Ran only test");
   });
   describe("Nested describe", () => {
@@ -28,7 +31,6 @@ describe("App interactions", () => {
   });
 
   it("fetches a joke", async () => {
-    await twd.initRequestMocking();
     await twd.mockRequest("joke", {
       method: "GET",
       url: "https://api.chucknorris.io/jokes/random",
@@ -55,9 +57,29 @@ describe("App interactions", () => {
     btn.click();
     await twd.waitForRequest("joke");
     jokeText = await twd.get("p[data-twd='joke-text']");
+    expect(jokeText.el.textContent).to.equal("Mocked second joke!");
     jokeText.should("have.text", "Mocked second joke!");
     // console.log(`Joke text: ${jokeText.el.textContent}`);
     // jokeText.should('be.disabled');
+    twd.clearRequestMockRules();
+  });
+
+  it("fetches a third joke to validate if the mocks are cleaned", async () => {
+    await twd.mockRequest("joke", {
+      method: "GET",
+      url: "https://api.chucknorris.io/jokes/random",
+      response: {
+        value: "Third Mocked joke!",
+      },
+    });
+    const btn = await twd.get("button[data-twd='joke-button']");
+    btn.click();
+    // Wait for the mock fetch to fire
+    await twd.waitForRequest("joke");
+    const jokeText = await twd.get("p[data-twd='joke-text']");
+    // console.log(`Joke text: ${jokeText.el.textContent}`);
+    jokeText.should("have.text", "Third Mocked joke!");
+    twd.clearRequestMockRules();
   });
 
   it("visit contact page", async () => {
@@ -75,5 +97,6 @@ describe("App interactions", () => {
     submitBtn.click();
     const rule = await twd.waitForRequest("contactSubmit");
     console.log(`Submitted body: ${rule.request}`);
+    twd.clearRequestMockRules();
   });
 });

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

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

src/index.ts

@@ -0,0 +1,30 @@
+import userEventLib from '@testing-library/user-event';
+import { log } from '../utils/log';
+
+type UserEvent = typeof userEventLib;
+
+function createLoggedProxy(obj: any, prefix = 'userEvent') {
+  return new Proxy(obj, {
+    get(target, prop, receiver) {
+      const orig = Reflect.get(target, prop, receiver);
+      if (typeof orig !== 'function') return orig;
+
+      // Special handling for setup
+      if (prop === 'setup') {
+        return (...args: any[]) => {
+          const instance = orig(...args);
+          // Proxy the returned instance
+          return createLoggedProxy(instance, `${prefix}.instance`);
+        };
+      }
+
+      return async (...args: any[]) => {
+        const result = await orig(...args);
+        log(`Assertion passed: ${prefix}.${String(prop)} finished`);
+        return result;
+      };
+    },
+  });
+}
+
+export const userEvent: UserEvent = createLoggedProxy(userEventLib);

src/proxies/userEvent.ts

@@ -0,0 +1,31 @@
+import { describe, it, beforeEach, vi, expect } from 'vitest';
+import * as twd from '../../';
+import { userEvent } from '../../proxies/userEvent';
+import { tests } from '../../twdRegistry';
+
+describe('userEvent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should simulate user events', async () => {
+    twd.describe('User Events', () => {
+      twd.it('should log userEvent actions', async () => {
+        const user = userEvent.setup();
+        const input = document.createElement('input');
+        const nonFinded = document.createElement('div');
+        document.body.appendChild(input);
+
+        await user.click(input);
+        expect(document.activeElement).toBe(input);
+
+        await user.type(input, 'Hello');
+        expect((input as HTMLInputElement).value).toBe('Hello');
+      });
+    });
+    tests[0].status = 'running';
+    await tests[0].fn();
+    expect(tests[0].logs).toContainEqual(expect.stringContaining('Assertion passed: userEvent.instance.click finished'));
+    expect(tests[0].logs).toContainEqual(expect.stringContaining('Assertion passed: userEvent.instance.type finished'));
+  });
+});

src/tests/proxies/userEvent.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, suite } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react'
 import { TestListItem, assertStyles, statusStyles } from "../../ui/TestListItem";

src/tests/ui/testListItem.spec.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, suite, beforeEach } from "vitest";
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react'
+import * as twd from '../../';
+import { TWDSidebar } from "../../ui/TWDSidebar";
+import { clearTests } from "../../twdRegistry";
+
+describe("TWDSidebar", () => {
+  beforeEach(() => {
+    // Clear all registered tests before each test case
+    clearTests();
+    vi.clearAllMocks();
+  });
+
+  describe("component" , () => {
+    it("should render TWDSidebar component closed", async () => {
+      render(<TWDSidebar open={false} />);
+      const sidebarElement = screen.getByText("TWD");
+      expect(sidebarElement).toBeInTheDocument();
+    });
+
+    it("should render TWDSidebar component open", async () => {
+      render(<TWDSidebar open={true} />);
+      const sidebarElement = screen.getByText("Run All");
+      expect(sidebarElement).toBeInTheDocument();
+    });
+
+    it("should open the sidebar when clicking the closed sidebar", async () => {
+      const user = userEvent.setup();
+      render(<TWDSidebar open={false} />);
+      const closedSidebarElement = screen.getByText("TWD");
+      expect(closedSidebarElement).toBeInTheDocument();
+      // Simulate a click event
+      await user.click(closedSidebarElement);
+      const openSidebarElement = screen.getByText("Run All");
+      expect(openSidebarElement).toBeInTheDocument();
+      // simulate a click event to close the sidebar
+      const closeButton = screen.getByText("✖");
+      await user.click(closeButton);
+      expect(screen.getByText("TWD")).toBeInTheDocument();
+      // Run all not visible
+      expect(screen.queryByText("Run All")).not.toBeInTheDocument();
+    });
+
+    it('execute test when clicking the run button', async () => {
+      const firstTest = vi.fn();
+      const secondTest = vi.fn();
+      twd.describe('Group 1', () => {
+        twd.it('Test 1.1', firstTest);
+        twd.itSkip('Test 1.2', secondTest);
+      });
+      const user = userEvent.setup()
+      render(<TWDSidebar open={true} />);
+      const runAllButton = screen.getByText("Run All");
+      expect(runAllButton).toBeInTheDocument();
+      // Simulate a click event
+      await user.click(runAllButton);
+      expect(firstTest).toHaveBeenCalled();
+      expect(secondTest).not.toHaveBeenCalled();
+    });
+
+    it('skip test when there is a test with only', async () => {
+      const firstTest = vi.fn();
+      const secondTest = vi.fn();
+      twd.describe('Group test only', () => {
+        twd.it('Test no only', firstTest);
+        twd.itOnly('Test only', secondTest);
+      });
+      const user = userEvent.setup()
+      render(<TWDSidebar open={true} />);
+      const runAllButton = screen.getByText("Run All");
+      expect(runAllButton).toBeInTheDocument();
+      // Simulate a click event
+      await user.click(runAllButton);
+      expect(firstTest).not.toHaveBeenCalled();
+      expect(secondTest).toHaveBeenCalled();
+    });
+
+    it('should handle throw exceptions in tests', async () => {
+      const errorTest = vi.fn().mockRejectedValue(new Error("Test error"));
+      twd.describe('Group test error', () => {
+        twd.it('Test error', errorTest);
+      });
+      const user = userEvent.setup()
+      render(<TWDSidebar open={true} />);
+      const runAllButton = screen.getByText("Run All");
+      expect(runAllButton).toBeInTheDocument();
+      // Simulate a click event
+      await user.click(runAllButton);
+      expect(errorTest).toHaveBeenCalled();
+      const errorLog = screen.getByText(/Test failed: Test error/);
+      expect(errorLog).toBeInTheDocument();
+    });
+  });
+});