Test: EthicalAds HTML content checks (#191)

Initial tests for auto-injected ad placement.
readthedocs · Nov 17, 2023 · ae9f929 · ae9f929
1 parent ce4dff0
commit ae9f929
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 6 deletions.
diff --git a/dist/readthedocs-addons.js b/dist/readthedocs-addons.js
diff --git a/dist/readthedocs-addons.js.map b/dist/readthedocs-addons.js.map
diff --git a/src/ethicalads.js b/src/ethicalads.js
@@ -103,9 +103,12 @@ export class EthicalAdsAddon extends AddonBase {
     //   console.log("EthicalAd placement injected.");
     // }
 
-    // Always load the ad manually after ethicalad library is injected.
-    // This ensure us that all the `data-ea-*` attributes are already set in the HTML tag.
-    placement.setAttribute("data-ea-manual", "true");
+    if (placement) {
+      // Always load the ad manually after ethicalad library is injected.
+      // This ensure us that all the `data-ea-*` attributes are already set in the HTML tag.
+      placement.setAttribute("data-ea-manual", "true");
+    }
+
     return placement;
   }
 

diff --git a/tests/__snapshots__/ethicalads.test.snap.js b/tests/__snapshots__/ethicalads.test.snap.js
@@ -0,0 +1,13 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["EthicalAd addon ad placement defined by the user"] = `<div
+  class="ad-flat ethical-alabaster"
+  data-ea-manual="true"
+  data-ea-publisher="readthedocs"
+  data-ea-type="readthedocs-sidebar"
+  id="ethical-ad-placement"
+>
+</div>
+`;
+/* end snapshot EthicalAd addon ad placement defined by the user */
diff --git a/tests/ethicalads.test.html b/tests/ethicalads.test.html
@@ -0,0 +1,75 @@
+<html>
+  <body>
+    <script type="module">
+      import { expect, fixture, fixtureCleanup } from "@open-wc/testing";
+      import { runTests } from "@web/test-runner-mocha";
+      import * as ethicalads from "../src/ethicalads.js";
+
+      // Define the config globally to be able to override on ``beforeEach`` and inside each test
+      let config;
+
+      runTests(async () => {
+        beforeEach(() => {
+          config = {
+            addons: {
+              ethicalads: {
+                enabled: true,
+                ad_free: false,
+                campaign_types: ["community", "paid"],
+                keywords: ["docs", "data-science"],
+                publisher: "readthedocs",
+              },
+            },
+          };
+        });
+
+        afterEach(() => {
+          // Remove all the fixtures added by each test.
+          fixtureCleanup();
+        });
+
+        describe("EthicalAd addon", () => {
+          it("ad placement defined by the user", async () => {
+            await fixture(
+              '<div id="ethical-ad-placement" class="ad-flat"></div>',
+            );
+            const addon = new ethicalads.EthicalAdsAddon(config);
+
+            const element = document.querySelector("#ethical-ad-placement");
+
+            expect(element).to.have.attribute(
+              "data-ea-publisher",
+              "readthedocs",
+            );
+            expect(element).to.have.attribute(
+              "data-ea-type",
+              "readthedocs-sidebar",
+            );
+
+            // It's not a Read the Docs-like theme
+            expect(element).to.have.class("ethical-alabaster");
+
+            // Keep the CSS classes added manually by the user
+            expect(element).to.have.class("ad-flat");
+
+            // Required `await` on this to generate the snapshot file
+            await expect(element).dom.to.equalSnapshot();
+          });
+
+          it("inject ethicalads.min.js", async () => {
+            const addon = new ethicalads.EthicalAdsAddon(config);
+
+            const element = document.querySelector("#ethicaladsjs");
+            expect(element).to.exist;
+            expect(element).to.have.attribute(
+              "src",
+              "https://media.ethicalads.io/media/client/ethicalads.min.js",
+            );
+            expect(element).to.have.attribute("type", "text/javascript");
+            expect(element).to.have.attribute("async", "true");
+          });
+        });
+      });
+    </script>
+  </body>
+</html>