Show and hide elements based on consent

After refactoring this module, the functionality of showing/hiding elements based on consent wasnt working anymore. However, this feature doesnt seem to be used at the moment, since this usually handled by the website that uses this module, by looking at changes in the consent.

Nevertheless, the code in this module didn't work, so I fixed it, and also added tests for it, and cleaned up some code that wasnt doing anything usefull.

AC-728

src/cookie-consent.mjs

@@ -49,8 +49,6 @@ export default class Dialog extends HTMLElement {
     // initialize show and hide
     this.show = this.show();
     this.hide = this.hide();
-    // get all preferences
-    this.preferences.getAll();
 
     this.domToggler.toggle(this.preferences);
 
@@ -71,8 +69,7 @@ export default class Dialog extends HTMLElement {
       saveButtonText: Config().get("labels.aria.button"),
       defaultButtonLabel: Config().get("labels.button.default"),
       acceptAllButton:
-        Config().get("acceptAllButton")
-        && !Preferences().hasPreferences(),
+        Config().get("acceptAllButton") && !Preferences().hasPreferences(),
     };
     // custom content from data-attributes
     const customContent = {
@@ -174,7 +171,6 @@ export default class Dialog extends HTMLElement {
 
     // Dispatch values and hide the dialog.
     this.events.dispatch("submit", values);
-    // toggleDialogVisibility(this.firstElementChild).hide();
     this.hide();
   }
 
@@ -214,7 +210,7 @@ export default class Dialog extends HTMLElement {
   }
 
   initDomToggler() {
-    return DomToggler(Config());
+    return DomToggler(this.cookies);
   }
 
   show() {

src/dialog-tablist.mjs

@@ -95,7 +95,10 @@ const DialogTabList = (cookieInformation) => {
         : undefined,
     }));
     return `
-      <ul part="${PREFIX}__tab-list" class="${PREFIX}__tab-list" role="tablist" aria-label="${Config().get("labels.aria.tabList")}">
+      <ul part="${PREFIX}__tab-list" 
+        class="${PREFIX}__tab-list" 
+        role="tablist" 
+        aria-label="${Config().get("labels.aria.tabList")}">
         ${cookiesWithState.map(renderTab).join("")}
       </ul>
     `;

src/dom-toggler.mjs

@@ -5,7 +5,7 @@ const REJECTED_STATE_ATTRIBUTE = "data-cookie-consent-rejected";
 /**
  * DOM toggler, which enables conditional script tags or embedded content.
  */
-const DomToggler = (config) => {
+const DomToggler = (cookieData) => {
   /**
    * Append a single script.
    * @TODO append it to the same location and re-add classes and attributes.
@@ -103,7 +103,7 @@ const DomToggler = (config) => {
 
   return {
     toggle: (preferences) => {
-      const cookies = config.get("cookies") || [];
+      const cookies = cookieData || [];
       cookies.forEach((type) => {
         const accepted = preferences.getState(type.id);
         toggleScripts({ id: type.id, accepted });

test/cookie-consent.test.js

@@ -9,16 +9,8 @@ describe("CookieConsent", () => {
 
   const cookieConsent = document.createElement("cookie-consent");
 
-  cookieConsent.cookies = COOKIES;
-
   test("updatePreference", () => {
-    const input = [
-      { id: "foo", accepted: false },
-      { id: "bar", accepted: true },
-    ];
-
-    cookieConsent.updatePreference(input);
-
-    expect(cookieConsent.preferences.getAll("foo")).toEqual(input);
+    cookieConsent.updatePreference(COOKIES);
+    expect(cookieConsent.preferences.getAll()).toEqual(COOKIES);
   });
 });

test/dom-toggler.test.js

@@ -0,0 +1,80 @@
+import DomToggler from "../src/dom-toggler.mjs";
+import Preferences from "../src/preferences.mjs";
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <div class="test-elementA" data-cookie-consent-accepted="bar"></div>
+    <div class="test-elementB" data-cookie-consent-accepted="foo"></div>
+    <iframe class="iframe-elementA" data-cookie-consent="bar" data-src="dummysrc.js"></iframe>
+    <iframe class="iframe-elementB" data-cookie-consent="foo" data-src="dummysrc.js"></iframe>`;
+});
+
+afterEach(() => {
+  // Clean up the DOM after each test
+  document.body.innerHTML = "";
+});
+
+describe("Dom Toggler CookieConsent", () => {
+  const FOO = { id: "foo", accepted: true };
+  const BAR = { id: "bar", accepted: false };
+  const COOKIES = [FOO, BAR];
+
+  // Mock localStorage
+  const localStorageMock = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+    clear: jest.fn(),
+  };
+
+  // Replace the global localStorage with the mock
+  Object.defineProperty(global, "localStorage", {
+    value: localStorageMock,
+  });
+
+  // Set up the mock localstorage use in Preferences
+  localStorageMock.getItem.mockReturnValue(JSON.stringify(COOKIES));
+
+  const preferences = Preferences();
+  const domToggler = DomToggler(COOKIES);
+
+  test("element with attribute 'data-cookie-consent-accepted' should be hidden without consent", () => {
+    domToggler.toggle(preferences);
+    const elements = document.body.querySelectorAll(".test-elementA");
+
+    elements.forEach((element) => {
+      const attr = element.getAttribute("aria-hidden");
+      expect(attr).toBe("true");
+    });
+  });
+
+  test("element with attribute 'data-cookie-consent-accepted' should be visible with consent", () => {
+    domToggler.toggle(preferences);
+    const elements = document.body.querySelectorAll(".test-elementB");
+
+    elements.forEach((element) => {
+      const attr = element.getAttribute("aria-hidden");
+      expect(attr).toBe(null);
+    });
+  });
+
+  test("iframe with attribute 'data-cookie-consent-accepted' should not load without consent", () => {
+    domToggler.toggle(preferences);
+    const elements = document.body.querySelectorAll(".iframe-elementA");
+
+    elements.forEach((element) => {
+      const attr = element.getAttribute("src");
+      expect(attr).toBe(null);
+    });
+  });
+
+  test("iframe with attribute 'data-cookie-consent-accepted' should load with consent", () => {
+    domToggler.toggle(preferences);
+    const elements = document.body.querySelectorAll(".iframe-elementB");
+
+    elements.forEach((element) => {
+      const attr = element.getAttribute("src");
+      expect(attr).toEqual("dummysrc.js");
+    });
+  });
+});