adobe · trieloff · Jul 4, 2024 · Jul 4, 2024 · kptdobe · Jul 8, 2024
diff --git a/test/it/block.plain.html b/test/it/block.plain.html
@@ -0,0 +1,4 @@
+<div>
+  <img src="/test/it/fire.jpg" height="100" width="100">
+  I'm a fragment
+</div>
diff --git a/test/it/fire.jpg b/test/it/fire.jpg
diff --git a/test/it/loadblock.test.html b/test/it/loadblock.test.html
@@ -0,0 +1,127 @@
+<html>
+
+<head>
+  <title>Test Runner</title>
+  <script>
+    // we load from localhost, and have the ability to
+    // change the scripts that are being served. Check the
+    // web-test-runner.config.js file for details
+    window.RUM_BASE = window.origin;
+    // we log what's being sent to the "server"
+    window.called = [];
+    // and navigator.sendBeacon has been replaced with
+    // a call to fakeSendBeacon
+    window.fakeSendBeacon = function (url, payload) {
+      // if payload is a string, we assume it's a JSON string
+      if (typeof payload === 'string') {
+        window.called.push(JSON.parse(payload));
+      } else {
+        // it's a blob
+        payload.text().then((text) => {
+          window.called.push(JSON.parse(text));
+        });
+      }
+    };
+  </script>
+  <script defer type="text/javascript" src="/.rum/@adobe/helix-rum-js@^2/dist/rum-standalone.js"></script>
+</head>
+
+<body>
+  <div class="block" data-block-status="loaded">
+    The first block
+    <img src="/test/it/fire.jpg" height="200" width="200">
+  </div>
+  <div class="block" data-block-status="loaded">
+    <form action="javascript:false;" method="POST">
+      <input type="text" name="name" value="John Doe">
+      <input type="submit" value="Submit">
+    </form>
+    <script>
+      document.querySelector('form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        // turn the contents uppercase
+        e.target.name.value = e.target.name.value.toUpperCase();
+      });
+    </script>
+  </div>
+  <script type="module">
+    import { runTests } from '@web/test-runner-mocha';
+    import { sendMouse, setViewport } from '@web/test-runner-commands';
+    import { assert } from '@esm-bundle/chai';
+
+    runTests(async () => {
+      describe('Test Block Loading', () => {
+        it('Can observe blocks that enter the viewport', async () => {
+
+          await setViewport({ width: 800, height: 600 });
+
+          await sendMouse({ type: 'click', position: [100, 100] });
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+          });
+
+          // let's start injecting "blocks", "forms", and "media" 
+          // into the page
+
+          const block = document.createElement('div');
+          block.className = 'block';
+
+          const contents = await fetch('/test/it/block.plain.html');
+          block.innerHTML = await contents.text();
+
+          block.dataset.blockStatus = 'loaded';
+
+          document.body.appendChild(block);
+
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+
+          await sendMouse({ type: 'click', position: [10, 10] });
+
+          assert(window.called.some((call) => call.checkpoint === 'viewmedia'), 'viewmedia checkpoint missing');
+          assert(window.called.some((call) => call.checkpoint === 'viewblock'), 'viewblock checkpoint missing');
+          assert(window.called.some((call) => call.checkpoint === 'loadresource'), 'loadresource checkpoint missing');
+          assert(window.called.some((call) => call.checkpoint === 'click'), 'click checkpoint missing');
+        });
+
+        it('Can track missing resources', async function test() {
+          // if user agent is webkit, we skip this test
+          if (navigator.userAgent.includes('WebKit') && !navigator.userAgent.includes('Chrome')) {
+            this.skip();
+          }
+          // same for firefox
+          if (navigator.userAgent.includes('Firefox')) {
+            this.skip();
+          }
+
+          const placeholders = await fetch('/test/it/placeholders.json');
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+
+          assert(window.called.some((call) => call.checkpoint === 'missingresource'), 'missingresource checkpoint missing');
+        });
+      });
+
+      it('Can track form submit events', async function test() {
+        const form = document.querySelector('form');
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 2000);
+        });
+
+        // find the form field
+        form.querySelector('input[type="submit"]').click();
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 2000);
+        });
+        assert(window.called.some((call) => call.checkpoint === 'formsubmit'), 'formsubmit checkpoint missing');
+      });
+    });
+  </script>
+</body>