Feat/improve runner (#67)

* feat: improve export files

* test: refactor api

* feat: add new runner version improved

* feat: improve runner and ui

* feat: refactor code to remove old runner

* refactor: remove old runner refenrences

* test: update all ui tests related to the new runner migration

* test: error user event

Author: kevinccbsg

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

@@ -1,20 +1,32 @@
-import { describe, it, itOnly, itSkip, beforeEach, twd, expect, userEvent } from "../../../../src";
+import { twd, expect, userEvent } from "../../../../src";
+import { describe, it, beforeEach } from "../../../../src/runner";
 
-beforeEach(() => {
-  console.log("Reset state before each test");
-});
 
 describe("App interactions", () => {
-  it("clicks the button", async () => {
-    const btn = await twd.get("button");
-    userEvent.click(btn.el);
+  beforeEach(() => {
+    console.log("Reset state before each test");
+  });
+
+  describe("nested level 1", () => {
+    beforeEach(() => {
+      console.log("Reset state before each test 1");
+    });
+    describe("nested level 2", () => {
+      beforeEach(() => {
+        console.log("Reset state before each test 2");
+      });
+      it("clicks the button", async () => {
+        const btn = await twd.get("button");
+        userEvent.click(btn.el);
+      });
+    });
   });
 
-  itSkip("skipped test", () => {
+  it.skip("skipped test", () => {
     throw new Error("Should not run");
   });
 
-  itOnly("only this one runs if present and long text to check the layout", async () => {
+  it.only("only this one runs if present and long text to check the layout", async () => {
     const user = userEvent.setup();
     const btn = await twd.get("button");
     await user.click(btn.el);

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

@@ -1,4 +1,5 @@
-import { it, twd, userEvent } from "../../../../src";
+import { twd, userEvent } from "../../../../src";
+import { it } from "../../../../src/runner";
 
 it("assertion examples", async () => {
   await twd.visit("/assertions");

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

@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-// import { removeMockServiceWorker } from '../../src';
+import { removeMockServiceWorker } from '../../src/vite-plugin';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), removeMockServiceWorker()],
 })

examples/my-twd-app/vite.config.ts

@@ -23,6 +23,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/twd.es.js",
       "require": "./dist/twd.umd.js"
+    },
+    "./runner": {
+      "types": "./dist/runner.d.ts",
+      "import": "./dist/runner.es.js",
+      "require": "./dist/runner.umd.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.es.js",
+      "require": "./dist/vite-plugin.umd.js"
     }
   },
   "files": [

package.json

@@ -1,16 +1,8 @@
-export {
-  beforeEach,
-  describe,
-  it,
-  itOnly,
-  itSkip,
-  twd,
-} from './twd';
+export { twd } from './twd';
 import { config } from 'chai';
 export { TWDSidebar } from './ui/TWDSidebar';
 export { initTests } from './initializers/initTests';
 export { expect } from 'chai';
 export { userEvent } from './proxies/userEvent';
-export { removeMockServiceWorker } from './plugin/removeMockServiceWorker';
 
 config.truncateThreshold = 0;

src/index.ts

@@ -0,0 +1,204 @@
+export interface Handler {
+  id: string;
+  name: string;
+  parent?: string;
+  handler: () => void | Promise<void>;
+  children?: string[];
+  type: 'suite' | 'test';
+  status?: 'idle' | 'pass' | 'fail' | 'skip' | 'running';
+  logs: string[];
+  depth: number;
+  only?: boolean;
+  skip?: boolean;
+}
+
+type HookFn = () => void | Promise<void>;
+
+export const handlers = new Map<string, Handler>();
+const beforeEachHooks = new Map<string, HookFn[]>();
+const afterEachHooks = new Map<string, HookFn[]>();
+const stack: string[] = [];
+
+const generateId = () => Math.random().toString(36).substr(2, 9);
+
+//
+// Suite definition
+//
+export const describe = (name: string, handler: () => void) => {
+  const id = generateId();
+  const parent = stack.at(-1);
+  handlers.set(id, {
+    id,
+    name,
+    type: 'suite',
+    children: [],
+    logs: [],
+    depth: stack.length,
+    parent,
+    handler,
+  });
+  if (parent) handlers.get(parent)!.children!.push(id);
+
+  stack.push(id);
+  handler();
+  stack.pop();
+};
+
+//
+// Test definition
+//
+export const it = (name: string, handler: () => void | Promise<void>) => {
+  const id = generateId();
+  const parent = stack.at(-1);
+  const h: Handler = {
+    id,
+    name,
+    type: 'test',
+    depth: stack.length,
+    handler,
+    logs: [],
+    parent,
+  };
+  if (parent) handlers.get(parent)!.children!.push(id);
+  handlers.set(id, h);
+};
+
+// Aliases for it.only and it.skip
+it.only = (name: string, handler: () => void | Promise<void>) => {
+  const id = generateId();
+  const parent = stack.at(-1);
+  const h: Handler = {
+    id,
+    name,
+    type: 'test',
+    depth: stack.length,
+    handler,
+    logs: [],
+    parent,
+    only: true,
+  };
+  if (parent) handlers.get(parent)!.children!.push(id);
+  handlers.set(id, h);
+};
+
+it.skip = (name: string, handler?: () => void | Promise<void>) => {
+  const id = generateId();
+  const parent = stack.at(-1);
+  const h: Handler = {
+    id,
+    name,
+    type: 'test',
+    depth: stack.length,
+    handler: handler || (() => {}),
+    logs: [],
+    parent,
+    skip: true,
+  };
+  if (parent) handlers.get(parent)!.children!.push(id);
+  handlers.set(id, h);
+};
+
+//
+// Hooks
+//
+export const beforeEach = (fn: HookFn) => {
+  const currentSuite = stack.at(-1);
+  if (!currentSuite) throw new Error('beforeEach() must be inside a describe()');
+  if (!beforeEachHooks.has(currentSuite)) beforeEachHooks.set(currentSuite, []);
+  beforeEachHooks.get(currentSuite)!.push(fn);
+};
+
+export const afterEach = (fn: HookFn) => {
+  const currentSuite = stack.at(-1);
+  if (!currentSuite) throw new Error('afterEach() must be inside a describe()');
+  if (!afterEachHooks.has(currentSuite)) afterEachHooks.set(currentSuite, []);
+  afterEachHooks.get(currentSuite)!.push(fn);
+};
+
+const collectHooks = (suiteId: string) => {
+  const before: HookFn[] = [];
+  const after: HookFn[] = [];
+  let current: string | undefined = suiteId;
+  while (current) {
+    if (beforeEachHooks.has(current)) before.unshift(...beforeEachHooks.get(current)!);
+    if (afterEachHooks.has(current)) after.push(...afterEachHooks.get(current)!);
+    current = handlers.get(current)?.parent;
+  }
+  return { before, after };
+};
+
+export const clearTests = () => {
+  handlers.clear();
+  beforeEachHooks.clear();
+  afterEachHooks.clear();
+};
+
+export interface RunnerEvents {
+  onStart: (test: Handler) => void;
+  onPass: (test: Handler) => void;
+  onFail: (test: Handler, error: Error) => void;
+  onSkip: (test: Handler) => void;
+  onSuiteStart?: (suite: Handler) => void;
+  onSuiteEnd?: (suite: Handler) => void;
+}
+
+export class TestRunner {
+  private events: RunnerEvents;
+
+  constructor(events: RunnerEvents) {
+    this.events = events;
+  }
+
+  async runAll() {
+    const rootSuites = Array.from(handlers.values()).filter(
+      (h) => !h.parent && h.type === "suite"
+    );
+    const hasOnly = Array.from(handlers.values()).some((h) => h.only);
+    for (const suite of rootSuites) {
+      await this.runSuite(suite, hasOnly);
+    }
+  }
+
+  async runSingle(id: string) {
+    const handler = handlers.get(id);
+    if (!handler || handler.type !== "test") return;
+    const hasOnly = false; // Single run ignores .only logic
+    await this.runTest(handler, hasOnly);
+  }
+
+  private async runSuite(suite: Handler, hasOnly: boolean) {
+    this.events.onSuiteStart?.(suite);
+    const children = (suite.children || []).map((id) => handlers.get(id)!);
+
+    for (const child of children) {
+      if (child.type === "suite") {
+        await this.runSuite(child, hasOnly);
+      } else if (child.type === "test") {
+        await this.runTest(child, hasOnly);
+      }
+    }
+    this.events.onSuiteEnd?.(suite);
+  }
+
+  private async runTest(test: Handler, hasOnly: boolean) {
+    if (test.skip) {
+      this.events.onSkip(test);
+      return;
+    }
+
+    if (hasOnly && !test.only) return;
+
+    this.events.onStart?.(test);
+    const hooks = collectHooks(test.parent!);
+
+    try {
+      for (const hook of hooks.before) await hook();
+      await test.handler();
+      this.events.onPass(test);
+    } catch (err) {
+      this.events.onFail(test, err as Error);
+    } finally {
+      for (const hook of hooks.after) await hook();
+    }
+  }
+}