adding failing test cases for tracking focus dom event

adobe · Dec 12, 2024 · b4578e0 · b4578e0
1 parent 9d21c60
commit b4578e0
Showing 1 changed file with 165 additions and 0 deletions.
diff --git a/test/it/focus.test.html b/test/it/focus.test.html
@@ -0,0 +1,165 @@
+  <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;
+    window.hlx = {
+      RUM_MASK_URL: '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) => {
+          console.log(JSON.parse(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/fixtures/fire.jpg" height="200" width="200">
+  </div>
+  <div id="focusable-element" tabindex="0">
+    Focusable element
+  </div>
+  <form action="javascript:false;" method="POST">
+    <input type="text" name="name" value="John Doe">
+    <input type="email" name="email" value="[email protected]">
+    <input type="submit" value="Submit">
+    <div id="focusable-element-inside-form" tabindex="0">
+      Focusable element inside form
+    </div>
+  </form>
+  <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 Focus Tracking', () => {
+        beforeEach(async () => {
+          window.called = [];
+        });
+
+        it('Can observe focus on form fields', async () => {
+          const form = document.querySelector('form');
+
+          form.querySelector('input[type="text"]').focus();
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+          });
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+          assert(window.called.some((call) => call.checkpoint === 'click'), 'click checkpoint missing');
+        });
+
+        it('Can not observe focus on focusable elements', async () => {
+          const focusableElement = document.querySelector('#focusable-element');
+
+          focusableElement.focus();
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+          });
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+          assert(window.called.every((call) => call.checkpoint !== 'click'), 'click checkpoint missing');
+        });
+
+        it('Can observe focus when tabbing between form fields', async () => {
+          const form = document.querySelector('form');
+          const textInput = form.querySelector('input[type="text"]');
+          const emailInput = form.querySelector('input[type="email"]');
+
+          // Focus the text input first
+          textInput.focus();
+
+          // Simulate tab key by focusing the next element
+          const tabEvent = new KeyboardEvent('keydown', {
+            key: 'Tab',
+            code: 'Tab',
+            bubbles: true,
+            cancelable: true
+          });
+          textInput.dispatchEvent(tabEvent);
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+
+          assert(window.called.some((call) => call.checkpoint === 'click'), 'click checkpoint missing');
+        });
+
+        it('can observe focus when focusing a non field element inside a form', async () => {
+          const focusableElementInsideForm = document.querySelector('#focusable-element-inside-form');
+
+          // Focus the text input first
+          focusableElementInsideForm.focus();
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+
+          assert(window.called.some((call) => call.checkpoint === 'click'), 'click checkpoint missing');
+        });
+
+        it('only one click should be sent on click of a field', async () => {
+          const textInput = document.querySelector('input[type="text"]');
+          const rect = textInput.getBoundingClientRect();
+          await sendMouse({
+            type: 'click',
+            position: [
+              Math.floor(rect.left + rect.width/2),
+              Math.floor(rect.top + rect.height/2)
+            ]
+          });
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+          const clicks = window.called.filter((call) => call.checkpoint === 'click');
+          assert(clicks.length === 1, `click is called ${clicks.length} times on a field`);
+        });
+
+        it('only one click should be sent on click of a button', async () => {
+          const submitButton = document.querySelector('input[type="submit"]');
+          const rect = submitButton.getBoundingClientRect();
+          await sendMouse({
+            type: 'click',
+            position: [
+              Math.floor(rect.left + rect.width/2),
+              Math.floor(rect.top + rect.height/2)
+            ]
+          });
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+          const clicks = window.called.filter((call) => call.checkpoint === 'click');
+          assert(clicks.length === 1, `click is called ${clicks.length} times on a button`);
+        });
+      });
+    });
+  </script>
+</body>