refactor(testing): draw testing lib into its own package

lorenzofox3 · Dec 21, 2023 · 8950d82 · 8950d82
1 parent 7163b32
commit 8950d82
Show file tree

Hide file tree

Showing 19 changed files with 110 additions and 78 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -22,9 +22,8 @@
   },
   "author": "Laurent RENARD",
   "devDependencies": {
+    "@cofn/test-lib": "workspace:*",
     "playwright": "^1.40.1",
-    "vite": "^5.0.4",
-    "zora": "^5.2.0",
-    "zora-reporters": "^1.4.0"
+    "vite": "^5.0.4"
   }
 }
diff --git a/packages/core/test/_tools/readable.js b/packages/core/test/_tools/readable.js
diff --git a/packages/core/test/_tools/test.js b/packages/core/test/_tools/test.js
diff --git a/packages/core/test/abort-signal.test.js b/packages/core/test/abort-signal.test.js
@@ -1,6 +1,6 @@
 import { define } from '../src/index.js';
-import { test } from './_tools/test.js';
 import { nextTick } from './utils.js';
+import { test } from '@cofn/test-lib/client';
 
 const debug = document.getElementById('debug');
 define('abort-signal', function* ({ $signal, $host }) {

diff --git a/packages/core/test/reactive-attributes.test.js b/packages/core/test/reactive-attributes.test.js
@@ -1,4 +1,4 @@
-import { test } from './_tools/test.js';
+import { test } from '@cofn/test-lib/client';
 import { define } from '../src/index.js';
 import { nextTick } from './utils.js';
 

diff --git a/packages/core/test/shadow-dom.test.js b/packages/core/test/shadow-dom.test.js
@@ -1,4 +1,4 @@
-import { test } from './_tools/test.js';
+import { test } from '@cofn/test-lib/client';
 import { define } from '../src/index.js';
 
 const debug = document.getElementById('debug');

diff --git a/packages/core/test/simple-component.test.js b/packages/core/test/simple-component.test.js
@@ -1,5 +1,5 @@
 import { define } from '../src/index.js';
-import { test } from './_tools/test.js';
+import { test } from '@cofn/test-lib/client';
 import { nextTick } from './utils.js';
 
 const debug = document.getElementById('debug');
@@ -17,10 +17,10 @@ define('simple-component', function* ({ $root, $host }) {
 });
 
 const withEl = (specFn) =>
-  function zora_spec_fn(assert) {
+  async function zora_spec_fn(assert) {
     const el = document.createElement('simple-component');
     debug.appendChild(el);
-    return specFn({ ...assert, el });
+    return await specFn({ ...assert, el });
   };
 test(
   'define a simple component from a coroutine',

diff --git a/packages/core/test/test-suite.html b/packages/core/test/test-suite.html
@@ -3,7 +3,9 @@
 <head>
   <meta charset='UTF-8'>
   <title>Test suite for package core</title>
-  <link rel='stylesheet' href="./_tools/html-reporter/reporter.css" type="text/css">
+  <style>
+    @import url("@cofn/test-lib/client/theme.css");
+  </style>
 </head>
 <body>
   <div id="report-container">
@@ -13,14 +15,12 @@ <h1>Test reporting</h1>
   <div id="debug"></div>
 </body>
 <script type='module'>
-  import { report } from './_tools/test.js';
+  import { report, createHTMLReporter, createSocketSink } from '@cofn/test-lib/client';
   import './simple-component.test.js';
   import './reactive-attributes.test.js';
   import './abort-signal.test.js';
   import './shadow-dom.test.js';
 
-  import { createHTMLReporter, createSocketSink } from './_tools/writable.js';
-
   const [st1, st2] = report().tee();
   st1.pipeTo(createSocketSink(import.meta.hot));
   st2.pipeTo(createHTMLReporter({element: document.getElementById('report')}))

diff --git a/packages/core/vite.config.js b/packages/core/vite.config.js
@@ -1,41 +1,6 @@
 import { defineConfig } from 'vite';
-import { ReadableStream } from 'node:stream/web';
-import { createDiffReporter } from 'zora-reporters';
-
-const createStream = ({ ws, client: _client }) => {
-  let listener;
-  return new ReadableStream({
-    start(controller) {
-      listener = (data, client) => {
-        if (client === _client) {
-          if (data.type === 'STREAM_ENDED') {
-            controller.close();
-            ws.off('zora', listener);
-          } else {
-            controller.enqueue(data);
-          }
-        }
-      };
-
-      ws.on('zora', listener);
-    },
-  });
-};
-const plugin = () => ({
-  name: 'zora-dev',
-  async configureServer(server) {
-    const report = createDiffReporter();
-    const socketStreams = new WeakMap();
-
-    server.ws.on('zora', async ({ type }, client) => {
-      if (type === 'STREAM_STARTED') {
-        const readableStream = createStream({ ws: server.ws, client });
-        await report(readableStream);
-      }
-    });
-  },
-});
+import zoraDev from '@cofn/test-lib/vite';
 
 export default defineConfig({
-  plugins: [plugin()],
+  plugins: [zoraDev()],
 });
diff --git a/packages/test-lib/package.json b/packages/test-lib/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@cofn/test-lib",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "module": "./src/client/index.js",
+  "style": "./src/client/theme.css",
+  "scripts": {},
+  "exports": {
+    "./package.json": "./package.json",
+    "./client": {
+      "import": "./src/client/index.js"
+    },
+    "./client/theme.css": {
+      "import": "./src/client/theme.css",
+      "require": "./src/client/theme.css"
+    },
+    "./vite": {
+      "import": "./src/vite/index.js"
+    }
+  },
+  "author": "Laurent RENARD",
+  "dependencies": {
+    "zora": "^5.2.0",
+    "zora-reporters": "^1.4.0"
+  }
+}
diff --git a/...e/test/_tools/html-reporter/components.js → packages/test-lib/src/client/components.js b/...e/test/_tools/html-reporter/components.js → packages/test-lib/src/client/components.js
diff --git a/...core/test/_tools/html-reporter/repoter.js → packages/test-lib/src/client/html-repoter.js b/...core/test/_tools/html-reporter/repoter.js → packages/test-lib/src/client/html-repoter.js
@@ -22,7 +22,6 @@ export const createHTMLReporter = ({ element }) => {
         }
         case 'ASSERTION': {
           currentTestEl.addAssertion(data);
-          console.log(data);
           break;
         }
         case 'TEST_END': {

diff --git a/packages/test-lib/src/client/index.js b/packages/test-lib/src/client/index.js
@@ -0,0 +1,3 @@
+export * from './test.js';
+export * from './socket-sink.js';
+export * from './html-repoter.js';
diff --git a/packages/test-lib/src/client/readable.js b/packages/test-lib/src/client/readable.js
diff --git a/packages/core/test/_tools/writable.js → packages/test-lib/src/client/socket-sink.js b/packages/core/test/_tools/writable.js → packages/test-lib/src/client/socket-sink.js
@@ -11,5 +11,3 @@ export const createSocketSink = (ws) => {
     },
   });
 };
-
-export { createHTMLReporter } from './html-reporter/repoter.js';
diff --git a/packages/test-lib/src/client/test.js b/packages/test-lib/src/client/test.js
@@ -0,0 +1,18 @@
+import { createHarness } from 'zora/es';
+const createReporter = (messageStream) => {
+  return new ReadableStream({
+    async pull(controller) {
+      const { done, value } = await messageStream.next();
+      if (done) {
+        controller.close();
+        return;
+      }
+      return controller.enqueue(value);
+    },
+  });
+};
+
+const { test, skip, only, report: _report } = createHarness();
+const report = () => _report({ reporter: createReporter });
+
+export { test, skip, only, report };
diff --git a/...re/test/_tools/html-reporter/reporter.css → packages/test-lib/src/client/theme.css b/...re/test/_tools/html-reporter/reporter.css → packages/test-lib/src/client/theme.css
@@ -2,6 +2,7 @@
     --flag-success-color: #1a751a;
     --flag-failure-color: #ef4d4d;
     --code-block-bg-color: #ececec;
+    --spacing: 1em;
 }
 
 @media (prefers-color-scheme: light) {
@@ -49,7 +50,6 @@ body * {
 }
 
 zora-test-result {
-    --spacing: 1em;
     border: 1px solid currentColor;
     border-radius: 0 4px 4px 0;
 }

diff --git a/packages/test-lib/src/vite/index.js b/packages/test-lib/src/vite/index.js
@@ -0,0 +1,36 @@
+import { ReadableStream } from 'node:stream/web';
+import { createDiffReporter } from 'zora-reporters';
+
+const createStream = ({ ws, client: _client }) => {
+  let listener;
+  return new ReadableStream({
+    start(controller) {
+      listener = (data, client) => {
+        if (client === _client) {
+          if (data.type === 'STREAM_ENDED') {
+            controller.close();
+            ws.off('zora', listener);
+          } else {
+            controller.enqueue(data);
+          }
+        }
+      };
+
+      ws.on('zora', listener);
+    },
+  });
+};
+export default () => ({
+  name: 'zora-dev',
+  async configureServer(server) {
+    const report = createDiffReporter();
+    const socketStreams = new WeakMap();
+
+    server.ws.on('zora', async ({ type }, client) => {
+      if (type === 'STREAM_STARTED') {
+        const readableStream = createStream({ ws: server.ws, client });
+        await report(readableStream);
+      }
+    });
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,5 +11,3 @@ export const createSocketSink = (ws) => { @@
         },
       });
     };
-    export { createHTMLReporter } from './html-reporter/repoter.js';