Visual diff: check for rootSelector before making request API (#561)

Closes #521

Author: humitos

src/docdiff.js

@@ -147,8 +147,13 @@ export class DocDiffElement extends LitElement {
   }
 
   compare() {
-    let promiseData;
+    // First check the root selector is in the current body
+    if (document.querySelector(this.rootSelector) === null) {
+      console.error("Element not found in current document.");
+      return;
+    }
 
+    let promiseData;
     if (this.cachedRemoteResponse !== null) {
       promiseData = Promise.resolve(this.cachedRemoteResponse);
     } else {
@@ -186,8 +191,8 @@ export class DocDiffElement extends LitElement {
     );
     const newBody = document.querySelector(this.rootSelector);
 
-    if (oldBody == null || newBody == null) {
-      throw new Error("Element not found in both documents.");
+    if (oldBody === null) {
+      throw new Error("Element not found in base document.");
     }
 
     // Depending on the context, visualDomDiff function is found under a different path.

tests/docdiff.test.html

@@ -68,6 +68,25 @@
             const content = document.querySelector("main");
             await expect(content).dom.to.equalSnapshot();
           });
+
+          it("check root selector is in current document before making request", async () => {
+            config.addons.options.root_selector = "#non-existent-id";
+
+            const matchMockedUrl = new RegExp(`.+`, "g");
+            server.respondWith("GET", matchMockedUrl, [200, {}, "{}"]);
+
+            const addon = new docdiff.DocDiffAddon(config);
+            const element = document.querySelector("readthedocs-docdiff");
+
+            const event = new CustomEvent(
+              EVENT_READTHEDOCS_DOCDIFF_ADDED_REMOVED_SHOW,
+            );
+            document.dispatchEvent(event);
+
+            await elementUpdated(element);
+            // The request shouldn't be done because the root selector is not found in the current document.
+            expect(server.requests).to.have.length(0);
+          });
         });
       });
     </script>