test(view): basic setup

lorenzofox3 · Dec 22, 2023 · 6ad8e31 · 6ad8e31
1 parent cbeb453
commit 6ad8e31
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 7 deletions.
diff --git a/packages/controllers/test/test-suite.html b/packages/controllers/test/test-suite.html
@@ -2,7 +2,7 @@
 <html lang='en'>
 <head>
   <meta charset='UTF-8'>
-  <title>Test suite for package core</title>
+  <title>Test suite for package controllers</title>
   <style>
     @import url("@cofn/test-lib/client/theme.css");
   </style>
@@ -13,7 +13,6 @@ <h1>Test reporting</h1>
     <div id="report"></div>
   </div>
   <div id="debug">
-    <test-counting-controller></test-counting-controller>
   </div>
 </body>
 <script type='module'>

diff --git a/packages/test-lib/src/bin/index.js b/packages/test-lib/src/bin/index.js
diff --git a/packages/view/package.json b/packages/view/package.json
@@ -17,9 +17,18 @@
     "singleQuote": true
   },
   "scripts": {
+    "dev": "vite",
+    "test": "node test/run-ci.js"
   },
   "author": "Laurent RENARD",
   "peerDependencies": {
     "@cofn/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@cofn/core": "workspace:*",
+    "@cofn/test-lib": "workspace:*",
+    "playwright": "^1.40.1",
+    "vite": "^5.0.4",
+    "zora-reporters": "^1.4.0"
   }
 }
diff --git a/packages/view/test/run-ci.js b/packages/view/test/run-ci.js
@@ -0,0 +1,63 @@
+import { createServer } from 'vite';
+import { firefox, chromium, webkit } from 'playwright';
+
+const PORT = 3001;
+const TIMEOUT = 30_000;
+
+(async () => {
+  let server,
+    browsers = [];
+  const browserList = [firefox, chromium, webkit];
+  try {
+    server = await createServer({
+      server: {
+        port: PORT,
+      },
+    });
+    await server.listen();
+
+    browsers = await Promise.all(
+      browserList.map((browserApp) => browserApp.launch({ headless: true })),
+    );
+
+    await Promise.all(
+      browsers.map((browser) => {
+        console.log(browser._name);
+        return new Promise((resolve, reject) => {
+          let timerId;
+          Promise.race([
+            browser
+              .newPage()
+              .then((page) => {
+                page.on('websocket', (webSocket) => {
+                  webSocket.on('framesent', ({ payload }) => {
+                    const asJson = JSON.parse(payload);
+                    if (asJson?.data?.type === 'STREAM_ENDED') {
+                      clearTimeout(timerId);
+                      resolve();
+                    }
+                  });
+                });
+
+                return page.goto(
+                  `http://localhost:${PORT}/test/test-suite.html`,
+                );
+              })
+              .catch(reject),
+            new Promise((resolve, reject) => {
+              timerId = setTimeout(() => reject('timeout'), TIMEOUT);
+            }),
+          ]);
+        });
+      }),
+    );
+  } catch (e) {
+    console.error(e);
+    process.exitCode = 1;
+  } finally {
+    await Promise.all(browsers.map((browser) => browser.close()));
+    if (server) {
+      await server.close();
+    }
+  }
+})();
diff --git a/packages/view/test/simple-render.js b/packages/view/test/simple-render.js
@@ -0,0 +1,36 @@
+import { test } from '@cofn/test-lib/client';
+import { fromView } from './utils.js';
+
+const debug = document.getElementById('debug');
+
+test('render a component when mounted', ({ eq }) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ attributes }) =>
+        html`<p>hello ${attributes.name}</p>`,
+  );
+
+  el.setAttribute('name', 'Laurent');
+  debug.appendChild(el);
+  eq(el.innerHTML, '<p>hello Laurent</p>');
+});
+
+test('component is updated when rendered is called, passing the relevant data', ({
+  eq,
+}) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ attributes }) =>
+        html`<p>hello ${attributes.name}</p>`,
+  );
+  el.setAttribute('name', 'Laurent');
+  debug.appendChild(el);
+
+  eq(el.innerHTML, '<p>hello Laurent</p>');
+
+  el.render({
+    attributes: { name: 'Robert' },
+  });
+
+  eq(el.innerHTML, '<p>hello Robert</p>');
+});
diff --git a/packages/view/test/test-suite.html b/packages/view/test/test-suite.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <title>Test suite for package view</title>
+  <style>
+    @import url("@cofn/test-lib/client/theme.css");
+  </style>
+</head>
+<body>
+  <div id="report-container">
+    <h1>Test reporting</h1>
+    <div id="report"></div>
+  </div>
+  <div id="debug">
+  </div>
+</body>
+<script type='module'>
+  import { report, createHTMLReporter, createSocketSink } from '@cofn/test-lib/client';
+  import './simple-render.js';
+
+  const [st1, st2] = report().tee();
+  st1.pipeTo(createSocketSink(import.meta.hot));
+  st2.pipeTo(createHTMLReporter({element: document.getElementById('report')}))
+</script>
+</html>
diff --git a/packages/view/test/utils.js b/packages/view/test/utils.js
@@ -0,0 +1,10 @@
+import { define } from '@cofn/core';
+import { withView } from '../src/index.js';
+export const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+let compCount = 0;
+export const fromView = (view) => {
+  const tag = `view-test-${++compCount}`;
+  define(tag, withView(view));
+  return document.createElement(tag);
+};
diff --git a/packages/view/vite.config.js b/packages/view/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import zoraDev from '@cofn/test-lib/vite';
+
+export default defineConfig({
+  plugins: [zoraDev()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml