refacto(test-lib): some cleanup

lorenzofox3 · Dec 21, 2023 · cbeb453 · cbeb453
1 parent 6d9b94b
commit cbeb453
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 76 deletions.
diff --git a/packages/test-lib/src/client/html-reporter/diagnostic.component.js b/packages/test-lib/src/client/html-reporter/diagnostic.component.js
@@ -0,0 +1,61 @@
+const prettyPrint = (value) => JSON.stringify(value, null, 2);
+
+const diagnosticTemplate = document.createElement('template');
+diagnosticTemplate.innerHTML = `
+<details open>
+  <summary>
+    <span>
+      <span class="description"></span><br/>
+      <span>at <a class="location"></a></span>
+    </span>
+</summary>
+<div class="comparison-container">
+  <figure>
+    <figcatpion>actual</figcatpion>
+    <pre></pre>
+  </figure>
+  <figure>
+    <figcatpion>expected</figcatpion>
+    <pre></pre>
+  </figure>
+</div>
+</details>
+`;
+export class Diagnostic extends HTMLElement {
+  #_diagnostic;
+
+  get diagnostic() {
+    return this.#_diagnostic;
+  }
+
+  set diagnostic(value) {
+    this.#_diagnostic = value;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.replaceChildren(diagnosticTemplate.content.cloneNode(true));
+  }
+
+  render() {
+    if (!this.#_diagnostic) {
+      return;
+    }
+
+    const { at, operator, description, expected, actual } = this.#_diagnostic;
+
+    this.querySelector(
+      '.description',
+    ).textContent = `[${operator}] ${description}`;
+
+    const locationElement = this.querySelector('.location');
+    const locationURL = new URL(at);
+    const [_, row, column] = locationURL.search.split(':');
+    locationElement.textContent = `${locationURL.pathname}:${row}:${column}`;
+    locationElement.setAttribute('href', at);
+
+    const [actualEl, expectedEl] = this.querySelectorAll('pre');
+    actualEl.textContent = prettyPrint(actual);
+    expectedEl.textContent = prettyPrint(expected);
+  }
+}
diff --git a/packages/test-lib/src/client/html-repoter.js → .../src/client/html-reporter/html-repoter.js b/packages/test-lib/src/client/html-repoter.js → .../src/client/html-reporter/html-repoter.js
@@ -1,4 +1,5 @@
-import { Diagnostic, TestResult } from './components.js';
+import { Diagnostic } from './diagnostic.component.js';
+import { TestResult } from './test-result.component.js';
 
 customElements.define('zora-diagnostic', Diagnostic);
 customElements.define('zora-test-result', TestResult);

diff --git a/packages/test-lib/src/client/components.js → ...nt/html-reporter/test-result.component.js b/packages/test-lib/src/client/components.js → ...nt/html-reporter/test-result.component.js
@@ -75,65 +75,3 @@ export class TestResult extends HTMLElement {
     }
   }
 }
-
-const diagnosticTemplate = document.createElement('template');
-diagnosticTemplate.innerHTML = `
-<details open>
-  <summary>
-    <span>
-      <span class="description"></span><br/>
-      <span>at <a class="location"></a></span>
-    </span>
-</summary>
-<div class="comparison-container">
-  <figure>
-    <figcatpion>actual</figcatpion>
-    <pre></pre>
-  </figure>
-  <figure>
-    <figcatpion>expected</figcatpion>
-    <pre></pre>
-  </figure>
-</div>
-</details>
-`;
-export class Diagnostic extends HTMLElement {
-  #_diagnostic;
-
-  get diagnostic() {
-    return this.#_diagnostic;
-  }
-
-  set diagnostic(value) {
-    this.#_diagnostic = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.replaceChildren(diagnosticTemplate.content.cloneNode(true));
-  }
-
-  render() {
-    if (!this.#_diagnostic) {
-      return;
-    }
-
-    const { at, operator, description, expected, actual } = this.#_diagnostic;
-
-    this.querySelector(
-      '.description',
-    ).textContent = `[${operator}] ${description}`;
-
-    const locationElement = this.querySelector('.location');
-    const locationURL = new URL(at);
-    const [_, row, column] = locationURL.search.split(':');
-    locationElement.textContent = `${locationURL.pathname}:${row}:${column}`;
-    locationElement.setAttribute('href', at);
-
-    const [actualEl, expectedEl] = this.querySelectorAll('pre');
-    actualEl.textContent = prettyPrint(actual);
-    expectedEl.textContent = prettyPrint(expected);
-  }
-}
-
-const prettyPrint = (value) => JSON.stringify(value, null, 2);
diff --git a/packages/test-lib/src/client/index.js b/packages/test-lib/src/client/index.js
@@ -1,3 +1,3 @@
 export * from './test.js';
 export * from './socket-sink.js';
-export * from './html-repoter.js';
+export * from './html-reporter/html-repoter.js';
diff --git a/packages/test-lib/src/vite/index.js b/packages/test-lib/src/vite/index.js
@@ -1,18 +1,16 @@
 import { ReadableStream } from 'node:stream/web';
 import { createDiffReporter } from 'zora-reporters';
 
-const createStream = ({ ws, client: _client }) => {
+const createStream = ({ ws }) => {
   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);
-          }
+        if (data.type === 'STREAM_ENDED') {
+          controller.close();
+          ws.off('zora', listener);
+        } else {
+          controller.enqueue(data);
         }
       };
 
@@ -24,11 +22,9 @@ export default () => ({
   name: 'zora-dev',
   async configureServer(server) {
     const report = createDiffReporter();
-    const socketStreams = new WeakMap();
-
-    server.ws.on('zora', async ({ type }, client) => {
+    server.ws.on('zora', async ({ type }) => {
       if (type === 'STREAM_STARTED') {
-        const readableStream = createStream({ ws: server.ws, client });
+        const readableStream = createStream({ ws: server.ws });
         await report(readableStream);
       }
     });