From f1a2a826f847de1cbc4823540db5a19c53b24504 Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 14:09:13 +0100
Subject: [PATCH 1/8] Test: `readthedocs-addons-data-ready`

Closes #547
---
 src/readthedocs-config.js          | 28 +++++++++--------
 tests/readthedocs-config.test.html | 49 ++++++++++++++++++++++++------
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/readthedocs-config.js b/src/readthedocs-config.js
index 01fdb446..efb953e1 100644
--- a/src/readthedocs-config.js
+++ b/src/readthedocs-config.js
@@ -69,17 +69,19 @@ export function getReadTheDocsUserConfig(sendUrlParam) {
       // this data is ready to be consumed under `event.detail.data()`.
       const userApiUrl = _getApiUrl(sendUrlParam, metadataAddonsAPIVersion);
 
-      fetch(userApiUrl, {
-        method: "GET",
-      }).then((response) => {
-        if (!response.ok) {
-          return reject(
-            "Error hitting addons API endpoint for user api-version",
-          );
-        }
-        // Return the data in the API version requested.
-        return resolve(response.json());
-      });
+      return resolve(
+        fetch(userApiUrl, {
+          method: "GET",
+        }).then((response) => {
+          if (!response.ok) {
+            return reject(
+              "Error hitting addons API endpoint for user api-version",
+            );
+          }
+          // Return the data in the API version requested.
+          return response.json();
+        }),
+      );
     }
 
     // If the API versions match, we return `undefined`.
@@ -124,8 +126,8 @@ export function getReadTheDocsConfig(sendUrlParam) {
           // event was fired can still get access to the data
           globalThis.ReadTheDocsEventData = new ReadTheDocsEventData(dataEvent);
 
-          // Trigger the addons data ready CustomEvent to with the data the user is expecting.
-          return dispatchEvent(
+          // Trigger the addons data ready CustomEvent with the data the user is expecting.
+          dispatchEvent(
             EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,
             document,
             new ReadTheDocsEventData(dataEvent),
diff --git a/tests/readthedocs-config.test.html b/tests/readthedocs-config.test.html
index d0131e79..531badaa 100644
--- a/tests/readthedocs-config.test.html
+++ b/tests/readthedocs-config.test.html
@@ -20,6 +20,8 @@
         beforeEach(() => {
           // Create a sinon fake server to mock requests
           server = sinon.fakeServer.create();
+          server.respondImmediately = true;
+
           if (metadataAddonsAPIVersion) {
             metadataAddonsAPIVersion.remove();
           }
@@ -57,14 +59,11 @@
             server.respondWith("GET", matchMockedUrl, [
               200,
               {},
-              "fake response body",
+              '{}'
             ]);
 
             const config = readthedocsConfig.getReadTheDocsConfig(false);
 
-            // Respond to all the request waiting for a response
-            server.respond();
-
             expect(server.requests).to.have.length(1);
             expect(server.requests[0].status).to.be.equal(200);
             expect(server.requests[0].method).to.be.equal("GET");
@@ -78,18 +77,16 @@
             metadataAddonsAPIVersion.content = "2";
             document.head.appendChild(metadataAddonsAPIVersion);
 
-            // Response 204 on requests made to Read the Docs analytics' API
+            // Response 200 on requests made to Read the Docs analytics' API
             const matchMockedUrl = new RegExp(`^/_/addons/`, "g");
             server.respondWith("GET", matchMockedUrl, [
               200,
               {},
-              "fake response body",
+              '{"addons": {}, "builds": {"current": {"id": 12345}}, "projects": {}, "versions": {}}'
             ]);
 
-            const config = readthedocsConfig.getReadTheDocsUserConfig(true);
-
-            // Respond to all the request waiting for a response
-            server.respond();
+            const config = await readthedocsConfig.getReadTheDocsUserConfig(true);
+            expect(config).to.deep.equal({addons: {}, builds: {current: {id: 12345}}, projects: {}, versions: {}});
 
             expect(server.requests).to.have.length(1);
             expect(server.requests[0].status).to.be.equal(200);
@@ -98,8 +95,40 @@
               /^\/_\/addons\/\?client-version=.+&api-version=2&url=.+$/;
             expect(server.requests[0].url).to.match(matchApiUrl);
           });
+
+          it("check readthedocs-addons-data-ready event", async () => {
+            // Response 200 on requests made to Read the Docs analytics' API
+            const matchMockedUrl = new RegExp(`^/_/addons/`, "g");
+            server.respondWith("GET", matchMockedUrl, [
+              200,
+              {},
+              '{"test": "readthedocs-addons-data-ready", "builds": {"current": {"id": 12345}}}'
+            ]);
+
+            const config = await readthedocsConfig.getReadTheDocsConfig(true);
+            const element = document.querySelector("#injected-by-event");
+            expect(element).to.not.be.null;
+            expect(element).dom.to.be.equal("<span id='injected-by-event'>builds.current.id=12345</span>");
+
+            // Clean up injected tags
+            element.remove()
+          });
         });
       });
     </script>
+
+    <!-- TODO: this should only be injected in the test "check readthedocs-addons-data-ready event",
+         to not interfere with the other tests, but I didn't find a good way to do that yet. -->
+    <script id="script-event" type="text/javascript">
+      document.addEventListener("readthedocs-addons-data-ready", function (event) {
+        const data = event.detail.data(true);
+        if (data?.test === "readthedocs-addons-data-ready") {
+          const span = document.createElement("span");
+          span.id = "injected-by-event";
+          span.innerHTML = `builds.current.id=${data.builds.current.id}`;
+          document.body.appendChild(span);
+        }
+      });
+    </script>`;
   </body>
 </html>

From 27cb0b9b7a2161122d4298f402895fcc41a10bab Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 14:11:21 +0100
Subject: [PATCH 2/8] Format

---
 tests/readthedocs-config.test.html | 50 +++++++++++++++++-------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/tests/readthedocs-config.test.html b/tests/readthedocs-config.test.html
index 531badaa..fbb655d4 100644
--- a/tests/readthedocs-config.test.html
+++ b/tests/readthedocs-config.test.html
@@ -56,11 +56,7 @@
 
           it("fetch config from API endpoint", async () => {
             const matchMockedUrl = new RegExp(`^/_/addons/`, "g");
-            server.respondWith("GET", matchMockedUrl, [
-              200,
-              {},
-              '{}'
-            ]);
+            server.respondWith("GET", matchMockedUrl, [200, {}, "{}"]);
 
             const config = readthedocsConfig.getReadTheDocsConfig(false);
 
@@ -82,11 +78,17 @@
             server.respondWith("GET", matchMockedUrl, [
               200,
               {},
-              '{"addons": {}, "builds": {"current": {"id": 12345}}, "projects": {}, "versions": {}}'
+              '{"addons": {}, "builds": {"current": {"id": 12345}}, "projects": {}, "versions": {}}',
             ]);
 
-            const config = await readthedocsConfig.getReadTheDocsUserConfig(true);
-            expect(config).to.deep.equal({addons: {}, builds: {current: {id: 12345}}, projects: {}, versions: {}});
+            const config =
+              await readthedocsConfig.getReadTheDocsUserConfig(true);
+            expect(config).to.deep.equal({
+              addons: {},
+              builds: { current: { id: 12345 } },
+              projects: {},
+              versions: {},
+            });
 
             expect(server.requests).to.have.length(1);
             expect(server.requests[0].status).to.be.equal(200);
@@ -102,16 +104,18 @@
             server.respondWith("GET", matchMockedUrl, [
               200,
               {},
-              '{"test": "readthedocs-addons-data-ready", "builds": {"current": {"id": 12345}}}'
+              '{"test": "readthedocs-addons-data-ready", "builds": {"current": {"id": 12345}}}',
             ]);
 
             const config = await readthedocsConfig.getReadTheDocsConfig(true);
             const element = document.querySelector("#injected-by-event");
             expect(element).to.not.be.null;
-            expect(element).dom.to.be.equal("<span id='injected-by-event'>builds.current.id=12345</span>");
+            expect(element).dom.to.be.equal(
+              "<span id='injected-by-event'>builds.current.id=12345</span>",
+            );
 
             // Clean up injected tags
-            element.remove()
+            element.remove();
           });
         });
       });
@@ -120,15 +124,19 @@
     <!-- TODO: this should only be injected in the test "check readthedocs-addons-data-ready event",
          to not interfere with the other tests, but I didn't find a good way to do that yet. -->
     <script id="script-event" type="text/javascript">
-      document.addEventListener("readthedocs-addons-data-ready", function (event) {
-        const data = event.detail.data(true);
-        if (data?.test === "readthedocs-addons-data-ready") {
-          const span = document.createElement("span");
-          span.id = "injected-by-event";
-          span.innerHTML = `builds.current.id=${data.builds.current.id}`;
-          document.body.appendChild(span);
-        }
-      });
-    </script>`;
+      document.addEventListener(
+        "readthedocs-addons-data-ready",
+        function (event) {
+          const data = event.detail.data(true);
+          if (data?.test === "readthedocs-addons-data-ready") {
+            const span = document.createElement("span");
+            span.id = "injected-by-event";
+            span.innerHTML = `builds.current.id=${data.builds.current.id}`;
+            document.body.appendChild(span);
+          }
+        },
+      );
+    </script>
+    `;
   </body>
 </html>

From 111198ebe322ea2d40be01be83c2bba4e5e989bd Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 15:17:40 +0100
Subject: [PATCH 3/8] `readthedocs-addons-data-ready` event was fired

---
 tests/readthedocs-config.test.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/readthedocs-config.test.html b/tests/readthedocs-config.test.html
index fbb655d4..380d8b63 100644
--- a/tests/readthedocs-config.test.html
+++ b/tests/readthedocs-config.test.html
@@ -107,7 +107,18 @@
               '{"test": "readthedocs-addons-data-ready", "builds": {"current": {"id": 12345}}}',
             ]);
 
+            const fakeFunction = sinon.fake();
+            document.addEventListener(
+              "readthedocs-addons-data-ready",
+              (event) => {
+                // Call the `fakeFunction` inside the event listener to check later it was called once.
+                fakeFunction();
+              },
+            );
+
             const config = await readthedocsConfig.getReadTheDocsConfig(true);
+
+            expect(fakeFunction.calledOnce).to.be.true;
             const element = document.querySelector("#injected-by-event");
             expect(element).to.not.be.null;
             expect(element).dom.to.be.equal(

From f607fd1575dd1ecc4770b826cff0c98df1bb7b19 Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 15:24:12 +0100
Subject: [PATCH 4/8] Better way to check if the event was triggered

---
 tests/readthedocs-config.test.html | 39 +++++++++---------------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/tests/readthedocs-config.test.html b/tests/readthedocs-config.test.html
index 380d8b63..9222119c 100644
--- a/tests/readthedocs-config.test.html
+++ b/tests/readthedocs-config.test.html
@@ -107,47 +107,32 @@
               '{"test": "readthedocs-addons-data-ready", "builds": {"current": {"id": 12345}}}',
             ]);
 
+            let eventData;
             const fakeFunction = sinon.fake();
             document.addEventListener(
               "readthedocs-addons-data-ready",
               (event) => {
+                // Store the event data to check later
+                eventData = event.detail.data(true);
+
                 // Call the `fakeFunction` inside the event listener to check later it was called once.
                 fakeFunction();
               },
             );
 
             const config = await readthedocsConfig.getReadTheDocsConfig(true);
-
             expect(fakeFunction.calledOnce).to.be.true;
-            const element = document.querySelector("#injected-by-event");
-            expect(element).to.not.be.null;
-            expect(element).dom.to.be.equal(
-              "<span id='injected-by-event'>builds.current.id=12345</span>",
-            );
-
-            // Clean up injected tags
-            element.remove();
+            expect(eventData).to.deep.equal({
+              test: "readthedocs-addons-data-ready",
+              builds: {
+                current: {
+                  id: 12345,
+                },
+              },
+            });
           });
         });
       });
     </script>
-
-    <!-- TODO: this should only be injected in the test "check readthedocs-addons-data-ready event",
-         to not interfere with the other tests, but I didn't find a good way to do that yet. -->
-    <script id="script-event" type="text/javascript">
-      document.addEventListener(
-        "readthedocs-addons-data-ready",
-        function (event) {
-          const data = event.detail.data(true);
-          if (data?.test === "readthedocs-addons-data-ready") {
-            const span = document.createElement("span");
-            span.id = "injected-by-event";
-            span.innerHTML = `builds.current.id=${data.builds.current.id}`;
-            document.body.appendChild(span);
-          }
-        },
-      );
-    </script>
-    `;
   </body>
 </html>

From 9f9ca98cfca9b0ff93defaa851127532db5ffdff Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 15:31:38 +0100
Subject: [PATCH 5/8] Simplify

---
 tests/readthedocs-config.test.html |  3 ++-
 tests/utils.test.html              | 10 ++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/tests/readthedocs-config.test.html b/tests/readthedocs-config.test.html
index 9222119c..ecaa6dd7 100644
--- a/tests/readthedocs-config.test.html
+++ b/tests/readthedocs-config.test.html
@@ -9,6 +9,7 @@
       import { expect, elementUpdated } from "@open-wc/testing";
       import { runTests } from "@web/test-runner-mocha";
       import * as readthedocsConfig from "../src/readthedocs-config";
+      import * as events from "../src/events";
       import * as utils from "../src/utils";
 
       let server;
@@ -110,7 +111,7 @@
             let eventData;
             const fakeFunction = sinon.fake();
             document.addEventListener(
-              "readthedocs-addons-data-ready",
+              events.EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,
               (event) => {
                 // Store the event data to check later
                 eventData = event.detail.data(true);
diff --git a/tests/utils.test.html b/tests/utils.test.html
index e140f889..4c42a6db 100644
--- a/tests/utils.test.html
+++ b/tests/utils.test.html
@@ -42,10 +42,7 @@
             document.head.appendChild(element);
 
             eventListener = function func(event) {
-              // We need to use `JSON.stringify` because objects are not equal in javascript
-              expect(JSON.stringify(event.detail.data())).to.be.equal(
-                JSON.stringify({ addons: "data" }),
-              );
+              expect(event.detail.data()).to.deep.equal({addons: "data"});
               expect(event.detail.httpStatus()).to.be.equal("200");
             };
 
@@ -87,10 +84,7 @@
 
           it("use readthedocs-addons-data-ready without META tag and internal=true", async () => {
             eventListener = function func(event) {
-              // We need to use `JSON.stringify` because objects are not equal in javascript
-              expect(JSON.stringify(event.detail.data(true))).to.be.equal(
-                JSON.stringify({ addons: "data" }),
-              );
+              expect(event.detail.data(true)).to.deep.equal({addons: "data"});
             };
             document.addEventListener(
               events.EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,

From 5888dc97dc6d5b1d02c6a8bffd12dcdd9055a393 Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 15:48:04 +0100
Subject: [PATCH 6/8] Test `setupHistoryEvents()`

---
 tests/utils.test.html | 45 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/tests/utils.test.html b/tests/utils.test.html
index 4c42a6db..079bc430 100644
--- a/tests/utils.test.html
+++ b/tests/utils.test.html
@@ -4,8 +4,10 @@
   </head>
   <body>
     <script type="module">
+      import { default as sinon } from "sinon";
       import { expect, elementUpdated } from "@open-wc/testing";
       import { runTests } from "@web/test-runner-mocha";
+      import * as docdiff from "../src/docdiff";
       import * as utils from "../src/utils";
       import * as events from "../src/events";
       import * as readthedocsConfig from "../src/readthedocs-config";
@@ -31,6 +33,8 @@
             );
             eventListener = null;
           }
+
+          sinon.restore();
         });
 
         describe("DocumentationTool tests", () => {
@@ -42,7 +46,7 @@
             document.head.appendChild(element);
 
             eventListener = function func(event) {
-              expect(event.detail.data()).to.deep.equal({addons: "data"});
+              expect(event.detail.data()).to.deep.equal({ addons: "data" });
               expect(event.detail.httpStatus()).to.be.equal("200");
             };
 
@@ -84,7 +88,7 @@
 
           it("use readthedocs-addons-data-ready without META tag and internal=true", async () => {
             eventListener = function func(event) {
-              expect(event.detail.data(true)).to.deep.equal({addons: "data"});
+              expect(event.detail.data(true)).to.deep.equal({ addons: "data" });
             };
             document.addEventListener(
               events.EVENT_READTHEDOCS_ADDONS_USER_DATA_READY,
@@ -98,6 +102,43 @@
             );
           });
 
+          it("trigger URL_CHANGED on SPA without GET parameters", async () => {
+            utils.setupHistoryEvents();
+
+            const fakeFunction = sinon.fake();
+            window.addEventListener(
+              events.EVENT_READTHEDOCS_URL_CHANGED,
+              (event) => {
+                fakeFunction();
+              },
+            );
+
+            expect(fakeFunction.notCalled).to.be.true;
+            history.pushState({}, "", "#newpage");
+            expect(fakeFunction.calledOnce).to.be.true;
+          });
+
+          it("trigger URL_CHANGED on SPA with `?readthedocs-diff-chunk` parameter", async () => {
+            utils.setupHistoryEvents();
+
+            const fakeFunction = sinon.fake();
+            window.addEventListener(
+              events.EVENT_READTHEDOCS_URL_CHANGED,
+              (event) => {
+                fakeFunction();
+              },
+            );
+
+            expect(fakeFunction.notCalled).to.be.true;
+
+            const url = new URL(window.location.href);
+            url.searchParams.set(docdiff.DOCDIFF_CHUNK_URL_PARAM, 1);
+            history.pushState({}, "", url);
+
+            expect(fakeFunction.notCalled).to.be.true;
+            expect(fakeFunction.calledOnce).to.be.false;
+          });
+
           it("Sphinx Alabaster", async () => {
             element = document.createElement("link");
             element.href = "_static/alabaster.css";

From 144422acd190d6e0131c7cb459b622c66a051db2 Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 16:18:33 +0100
Subject: [PATCH 7/8] Some tests for hotkeys

---
 tests/hotkeys.test.html | 88 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 tests/hotkeys.test.html

diff --git a/tests/hotkeys.test.html b/tests/hotkeys.test.html
new file mode 100644
index 00000000..89d71468
--- /dev/null
+++ b/tests/hotkeys.test.html
@@ -0,0 +1,88 @@
+<html>
+  <head>
+    <meta name="readthedocs-http-status" content="200" />
+  </head>
+  <body>
+    <script type="module">
+      import { default as sinon } from "sinon";
+      import { expect, elementUpdated } from "@open-wc/testing";
+      import { runTests } from "@web/test-runner-mocha";
+      import * as events from "../src/events";
+      import * as hotkeys from "../src/hotkeys";
+
+      let config;
+
+      runTests(async () => {
+        beforeEach(() => {
+          config = {
+            addons: {
+              hotkeys: {
+                enabled: true,
+                doc_diff: {
+                  enabled: true,
+                  trigger: "KeyD",
+                },
+                search: {
+                  enabled: true,
+                  trigger: "Slash",
+                },
+              },
+            },
+          };
+        });
+
+        afterEach(() => {
+          sinon.restore();
+        });
+
+        describe("HotKeys tests", () => {
+          it("trigger docdiff when pressing 'd'", async () => {
+            const addon = new hotkeys.HotKeysAddon(config);
+            const element = document.querySelector("readthedocs-hotkeys");
+            await elementUpdated(element);
+
+            // Empty shadowDom
+            await expect(element).shadowDom.to.equal("");
+
+            const fakeFunction = sinon.fake();
+            document.addEventListener(
+              events.EVENT_READTHEDOCS_DOCDIFF_ADDED_REMOVED_SHOW,
+              (event) => {
+                fakeFunction();
+              },
+            );
+
+            const event = new Event("keydown");
+            event.code = "KeyD";
+            document.dispatchEvent(event);
+
+            expect(fakeFunction.calledOnce).to.be.true;
+          });
+
+          it("trigger search modal when pressing '/'", async () => {
+            const addon = new hotkeys.HotKeysAddon(config);
+            const element = document.querySelector("readthedocs-hotkeys");
+            await elementUpdated(element);
+
+            // Empty shadowDom
+            await expect(element).shadowDom.to.equal("");
+
+            const fakeFunction = sinon.fake();
+            document.addEventListener(
+              events.EVENT_READTHEDOCS_SEARCH_SHOW,
+              (event) => {
+                fakeFunction();
+              },
+            );
+
+            const event = new Event("keydown");
+            event.code = "Slash";
+            document.dispatchEvent(event);
+
+            expect(fakeFunction.calledOnce).to.be.true;
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

From 71a405e6348a1b2cd1c301e682b858b3e16b22fc Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 25 Feb 2025 16:27:48 +0100
Subject: [PATCH 8/8] Minor search snapshot fix

---
 tests/__snapshots__/search.test.snap.js | 3 +--
 tests/search.test.html                  | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/__snapshots__/search.test.snap.js b/tests/__snapshots__/search.test.snap.js
index 0c8514de..c268cd51 100644
--- a/tests/__snapshots__/search.test.snap.js
+++ b/tests/__snapshots__/search.test.snap.js
@@ -1,12 +1,11 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
-
 snapshots["Search tests initial trigger by event and DOM check"] = 
 `<div role="search">
   <div class="background">
   </div>
   <div class="content">
-    <form class="focus">
+    <form>
       <label>
       </label>
       <input
diff --git a/tests/search.test.html b/tests/search.test.html
index 01b0a454..98bbbc0c 100644
--- a/tests/search.test.html
+++ b/tests/search.test.html
@@ -60,7 +60,9 @@
             document.dispatchEvent(searchEvent);
 
             await elementUpdated(element);
-            await expect(element).shadowDom.to.equalSnapshot();
+            await expect(element).shadowDom.to.equalSnapshot({
+              ignoreAttributes: [{ tags: ["form"], attributes: ["class"] }],
+            });
           });
 
           it("initial trigger by event and DOM check with filters", async () => {