feat: test setup

objkt-com · Apr 1, 2024 · a742152 · a742152
1 parent fd04160
commit a742152
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 102 deletions.
diff --git a/API.md → docs/API.md b/API.md → docs/API.md
diff --git a/index.html b/index.html
@@ -1,107 +1,19 @@
 <!-- the "host" page, showing a generator in an iframe -->
 <!DOCTYPE html>
 <html>
-  <head>
-    <style>
-      iframe {
-        width: 100%;
-        height: 80vh;
-        border: 2px dashed brown;
-      }
-    </style>
-
-    <script>
-      const RENDERED_TIMEOUT_MS = 10 * 1000;
-      const exporters = {};
-
-      document.addEventListener('DOMContentLoaded', () => {
-        // this sample host environment forwards its query params to its iframe to make it easier to test things
-        const query = new URLSearchParams(window.location.search);
-        const iframe = document.getElementById('generator');
-        const src = iframe.getAttribute('src');
-        iframe.setAttribute('src', src + '?' + query.toString());
-
-        window.addEventListener('message', (e) => {
-          const data = e.data;
-          if (data.id === '$objkt:register-export' && !exporters[data.mime]) {
-            console.log(`host 1 got ${data.id}`);
-            console.log(`${data.default ? 'default ' : ''}export registered for ${data.mime}`);
-            exporters[data.mime] = true;
-            createExporter(data);
-          }
-          if (data.id === '$objkt:exported') {
-            console.log(`got exported data for mime ${data.mime}`);
-            const link = document.createElement('a');
-            link.download = `image.${data.mime.split('/')[1]}`;
-            link.href = data.exported;
-            link.click();
-          }
-        });
-
-        function createExporter(exporter) {
-          const button = document.createElement('button');
-          button.textContent = `Export ${exporter.mime}, res: ${exporter.resolution.x}x${exporter.resolution.y}`;
-          document.getElementById('controls').appendChild(button);
-
-          button.onclick = () => {
-            console.log(`host asks for an export for mime ${exporter.mime}`);
-            iframe.contentWindow.postMessage(
-              {
-                id: '$objkt:export',
-                mime: exporter.mime,
-                resolution: exporter.resolution,
-              },
-              '*'
-            );
-          };
-        }
-
-        Promise.race([
-          new Promise((resolve) => {
-            window.addEventListener('message', (e) => {
-              if (e.data.id === '$objkt:captured') {
-                console.log(`host 2 got ${e.data.id}`);
-                console.log('$objkt.capture() has been called', e.data);
-                const img = document.createElement('img');
-                img.setAttribute('src', e.data.detail.exported);
-                document.getElementById('captured').innerHTML = '<p>Preview generated:</p>';
-                document.getElementById('captured').appendChild(img);
-                resolve(true);
-              }
-            });
-          }),
-          new Promise((resolve) => setTimeout(() => resolve(false), RENDERED_TIMEOUT_MS)),
-        ]).then((success) => {
-          if (query.has('capture') && !success) {
-            console.error('$objkt.capture has not been called');
-          }
-        });
-      });
-    </script>
-  </head>
+  <head> </head>
 
   <body>
-    <p>Here's a sample generator in an iframe:</p>
-    <!--safe mode-->
-    <iframe
-      id="generator"
-      sandbox="allow-scripts allow-downloads"
-      allow="accelerometer; camera; gyroscope; microphone; xr-spatial-tracking; midi;"
-      scrolling=""
-      src="./generator.html"
-    ></iframe>
-    <!--advanced mode-->
-    <!-- <iframe
-      id="generator"
-      sandbox="allow-scripts allow-downloads allow-same-origin"
-      allow="accelerometer; camera; gyroscope; microphone; xr-spatial-tracking; midi;"
-      scrolling=""
-      src="./generator.html"
-    ></iframe> -->
-
-    <div id="controls">
-      <p>Here are the exporters it registered:</p>
-    </div>
-    <div id="captured"></div>
+    <ul>
+      <li><a href="./sample-host/">Sample host</a> (check source)</li>
+      <li><a href="./sample-generator/generator.html">Sample generator</a> (check source)</li>
+      <li>
+        <a href="./src/snippet.js">snippet</a>
+      </li>
+      <li>
+        <a href="./docs/API.md">API</a>
+      </li>
+      <li><a href="./test/test.html">tests</a> (<a href="./test/test.snippet.js">source</a>)</li>
+    </ul>
   </body>
 </html>
diff --git a/generator.html → sample-generator/generator.html b/generator.html → sample-generator/generator.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="./snippet.js"></script>
+    <script src="../src/snippet.js"></script>
     <script src="./generator.js"></script>
     <style>
       #my-canvas {

diff --git a/generator.js → sample-generator/generator.js b/generator.js → sample-generator/generator.js
@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 function initialize() {
   canvas = document.getElementById('my-canvas');
-
+  $objkt.rnd(null);
   window.addEventListener('resize', () => draw(), false);
   draw();
 }

diff --git a/sample-host/index.html b/sample-host/index.html
@@ -0,0 +1,107 @@
+<!-- the "host" page, showing a generator in an iframe -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      iframe {
+        width: 100%;
+        height: 80vh;
+        border: 2px dashed brown;
+      }
+    </style>
+
+    <script>
+      const RENDERED_TIMEOUT_MS = 10 * 1000;
+      const exporters = {};
+
+      document.addEventListener('DOMContentLoaded', () => {
+        // this sample host environment forwards its query params to its iframe to make it easier to test things
+        const query = new URLSearchParams(window.location.search);
+        const iframe = document.getElementById('generator');
+        const src = iframe.getAttribute('src');
+        iframe.setAttribute('src', src + '?' + query.toString());
+
+        window.addEventListener('message', (e) => {
+          const data = e.data;
+          if (data.id === '$objkt:register-export' && !exporters[data.mime]) {
+            console.log(`host 1 got ${data.id}`);
+            console.log(`${data.default ? 'default ' : ''}export registered for ${data.mime}`);
+            exporters[data.mime] = true;
+            createExporter(data);
+          }
+          if (data.id === '$objkt:exported') {
+            console.log(`got exported data for mime ${data.mime}`);
+            const link = document.createElement('a');
+            link.download = `image.${data.mime.split('/')[1]}`;
+            link.href = data.exported;
+            link.click();
+          }
+        });
+
+        function createExporter(exporter) {
+          const button = document.createElement('button');
+          button.textContent = `Export ${exporter.mime}, res: ${exporter.resolution.x}x${exporter.resolution.y}`;
+          document.getElementById('controls').appendChild(button);
+
+          button.onclick = () => {
+            console.log(`host asks for an export for mime ${exporter.mime}`);
+            iframe.contentWindow.postMessage(
+              {
+                id: '$objkt:export',
+                mime: exporter.mime,
+                resolution: exporter.resolution,
+              },
+              '*'
+            );
+          };
+        }
+
+        Promise.race([
+          new Promise((resolve) => {
+            window.addEventListener('message', (e) => {
+              if (e.data.id === '$objkt:captured') {
+                console.log(`host 2 got ${e.data.id}`);
+                console.log('$objkt.capture() has been called', e.data);
+                const img = document.createElement('img');
+                img.setAttribute('src', e.data.detail.exported);
+                document.getElementById('captured').innerHTML = '<p>Preview generated:</p>';
+                document.getElementById('captured').appendChild(img);
+                resolve(true);
+              }
+            });
+          }),
+          new Promise((resolve) => setTimeout(() => resolve(false), RENDERED_TIMEOUT_MS)),
+        ]).then((success) => {
+          if (query.has('capture') && !success) {
+            console.error('$objkt.capture has not been called');
+          }
+        });
+      });
+    </script>
+  </head>
+
+  <body>
+    <p>Here's a sample generator in an iframe:</p>
+    <!--safe mode-->
+    <iframe
+      id="generator"
+      sandbox="allow-scripts allow-downloads"
+      allow="accelerometer; camera; gyroscope; microphone; xr-spatial-tracking; midi;"
+      scrolling=""
+      src="../sample-generator/generator.html"
+    ></iframe>
+    <!--advanced mode-->
+    <!-- <iframe
+      id="generator"
+      sandbox="allow-scripts allow-downloads allow-same-origin"
+      allow="accelerometer; camera; gyroscope; microphone; xr-spatial-tracking; midi;"
+      scrolling=""
+      src="./generator.html"
+    ></iframe> -->
+
+    <div id="controls">
+      <p>Here are the exporters it registered:</p>
+    </div>
+    <div id="captured"></div>
+  </body>
+</html>
diff --git a/snippet.js → src/snippet.js b/snippet.js → src/snippet.js
diff --git a/test/test.html b/test/test.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Mocha Tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script src="../src/snippet.js"></script>
+
+    <script src="https://unpkg.com/[email protected]/chai.js"></script>
+    <script src="https://unpkg.com/[email protected]/mocha.js"></script>
+
+    <script class="mocha-init">
+      mocha.setup('bdd');
+      mocha.checkLeaks();
+    </script>
+    <script src="./test.snippet.js"></script>
+    <script class="mocha-exec">
+      mocha.run();
+    </script>
+  </body>
+</html>
diff --git a/test/test.snippet.js b/test/test.snippet.js
@@ -0,0 +1,25 @@
+let assert = chai.assert;
+
+describe('$objkt', function () {
+  describe('#rnd()', function () {
+    it('should be deterministic', function () {
+      $objkt.seed = 123;
+      $objkt.rnd(null);
+      assert.equal($objkt.rnd(), 0.21505506429821253);
+      assert.equal($objkt.rnd(), 0.7675276368390769);
+      assert.equal($objkt.rnd(), 0.33604247961193323);
+      assert.equal($objkt.rnd(), 0.03844817215576768);
+    });
+
+    it('can be reset by passing null', function () {
+      $objkt.seed = 928173;
+      for (let i = 0; i < 2; i++) {
+        $objkt.rnd(null);
+        assert.equal($objkt.rnd(), 0.7746125012636185);
+        assert.equal($objkt.rnd(), 0.3132142429240048);
+        assert.equal($objkt.rnd(), 0.5991196266841143);
+        assert.equal($objkt.rnd(), 0.590831205714494);
+      }
+    });
+  });
+});