Issue 5079, 5516 - Use webpack for browser tests, modules for content scripts

test/browser/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
-const {ElemHideEmulation} = require("content/elemHideEmulation");

[Wladimir Palant, 2017/08/17 10:05:38]

require("../../lib/content/elemHideEmulation")? Sure, this is quite a bit
longer, but it also doesn't rely on implicit module paths.

[kzar, 2017/08/17 12:40:22]

Done.

+const {ElemHideEmulation} = require("../../lib/content/elemHideEmulation");
 
 exports.tearDown = function(callback)
 {
   let styleElements = document.head.getElementsByTagName("style");
   while (styleElements.length)
     styleElements[0].parentNode.removeChild(styleElements[0]);
 
   let child;
   while (child = document.body.firstChild)
     child.parentNode.removeChild(child);
 
   callback();
 };
+
+function unexpectedError(error)
+{
+  console.error(error);
+  this.ok(false, "Unexpected error: " + error);
+}
 
 function expectHidden(test, element)
 {
   test.equal(window.getComputedStyle(element).display, "none",
              "The element's display property should be set to 'none'");
 }
 
 function expectVisible(test, element)
 {
   test.notEqual(window.getComputedStyle(element).display, "none",
@@ skipping 32 matching lines @@
     document.body.appendChild(element);
   else
     parent.appendChild(element);
   insertStyleRule("#" + element.id + " " + styleBlock);
   return element;
 }
 
 // Create a new ElemHideEmulation instance with @selectors.
 function applyElemHideEmulation(selectors)
 {
-  let elemHideEmulation = new ElemHideEmulation(
-    window,
-    callback =>
-    {
-      let patterns = [];
-      selectors.forEach(selector =>
+  return Promise.resolve().then(() =>
+  {
+    let elemHideEmulation = new ElemHideEmulation(
+      window,
+      callback =>
       {
-        patterns.push({selector});
-      });
-      callback(patterns);
-    },
-    newSelectors =>
-    {
-      if (!newSelectors.length)
-        return;
-      let selector = newSelectors.join(", ");
-      insertStyleRule(selector + "{display: none !important;}");
-    },
-    elems =>
-    {
-      for (let elem of elems)
-        elem.style.display = "none";
-    }
-  );
-
-  return elemHideEmulation.apply();

[Wladimir Palant, 2017/08/17 10:05:39]

elemHideEmulation.apply() doesn't return any result, you shouldn't make it look
like it does. As it is, `return` here is unnecessary.

Anyway, you shouldn't change this function towards being synchronous. Hubert is
currently implementing a change that will make element hiding emulation apply
asynchronously. So rather than change all tests to run synchronously, just make
this function return a promise. The following will do:

  return Promise.resolve().then(() =>
  {
    // actual function body here
  });

This way any errors thrown here will result in the promise being rejected and
handled by the same code path as all the other errors.

[kzar, 2017/08/17 12:40:22]

Done.

+        let patterns = [];
+        selectors.forEach(selector =>
+        {
+          patterns.push({selector});
+        });
+        callback(patterns);
+      },
+      newSelectors =>
+      {
+        if (!newSelectors.length)
+          return;
+        let selector = newSelectors.join(", ");
+        insertStyleRule(selector + "{display: none !important;}");
+      },
+      elems =>
+      {
+        for (let elem of elems)
+          elem.style.display = "none";
+      }
+    );
+
+    elemHideEmulation.apply();
+    return elemHideEmulation;
+  });
 }
 
 exports.testVerbatimPropertySelector = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(background-color: rgb(0, 0, 0))"]
-  );
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testVerbatimPropertySelectorWithPrefix = function(test)
 {
   let parent = createElementWithStyle("{background-color: #000}");
   let toHide = createElementWithStyle("{background-color: #000}", parent);
   applyElemHideEmulation(
     ["div > :-abp-properties(background-color: rgb(0, 0, 0))"]
-  );
-  expectVisible(test, parent);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testVerbatimPropertySelectorWithPrefixNoMatch = function(test)
 {
   let parent = createElementWithStyle("{background-color: #000}");
   let toHide = createElementWithStyle("{background-color: #fff}", parent);
   applyElemHideEmulation(
     ["div > :-abp-properties(background-color: rgb(0, 0, 0))"]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testVerbatimPropertySelectorWithSuffix = function(test)
 {
   let parent = createElementWithStyle("{background-color: #000}");
   let toHide = createElementWithStyle("{background-color: #000}", parent);
   applyElemHideEmulation(
     [":-abp-properties(background-color: rgb(0, 0, 0)) > div"]
-  );
-  expectVisible(test, parent);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testVerbatimPropertyPseudoSelectorWithPrefixAndSuffix = function(test)
 {
   let parent = createElementWithStyle("{background-color: #000}");
   let middle = createElementWithStyle("{background-color: #000}", parent);
   let toHide = createElementWithStyle("{background-color: #000}", middle);
   applyElemHideEmulation(
     ["div > :-abp-properties(background-color: rgb(0, 0, 0)) > div"]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, middle);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, middle);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPropertySelectorWithWildcard = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(*color: rgb(0, 0, 0))"]
-  );
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPropertySelectorWithRegularExpression = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(/.*color: rgb\\(0, 0, 0\\)/)"]
-  );
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPropertySelectorWithEscapedBrace = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(/background.\\x7B 0,6\\x7D : rgb\\(0, 0, 0\\)/)"]
-  );
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPropertySelectorWithImproperlyEscapedBrace = function(test)
 {
   let toHide = createElementWithStyle("{background-color: #000}");
   applyElemHideEmulation(
     [":-abp-properties(/background.\\x7B0,6\\x7D: rgb\\(0, 0, 0\\)/)"]
-  );
-  expectVisible(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testDynamicallyChangedProperty = function(test)
 {
   let toHide = createElementWithStyle("{}");
   applyElemHideEmulation(
     [":-abp-properties(background-color: rgb(0, 0, 0))"]
-  );
-
-  expectVisible(test, toHide);
-  insertStyleRule("#" + toHide.id + " {background-color: #000}");
-
-  // Re-evaluation will only happen after a few seconds
-  expectVisible(test, toHide);
-  window.setTimeout(() =>
-  {
-    expectHidden(test, toHide);
-    test.done();
-  }, 4000);
+  ).then(() =>
+  {
+    expectVisible(test, toHide);
+    insertStyleRule("#" + toHide.id + " {background-color: #000}");
+    return new Promise((resolve, reject) =>
+    {
+      // Re-evaluation will only happen after a few seconds
+      expectVisible(test, toHide);
+      window.setTimeout(() =>
+      {
+        expectHidden(test, toHide);
+        resolve();
+      }, 4000);
+    });
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassWithPropBeforeSelector = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{background-color: #000}", parent);
   insertStyleRule(`#${child.id}::before {content: "publicite"}`);
 
   applyElemHideEmulation(
     ["div:-abp-properties(content: \"publicite\")"]
-  );
-  expectHidden(test, child);
-  expectVisible(test, parent);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, child);
+    expectVisible(test, parent);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelector = function(test)
 {
   let toHide = createElementWithStyle("{}");
   applyElemHideEmulation(
     ["div:-abp-has(div)"]
-  );
-  expectVisible(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithPrefix = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{}", parent);
   applyElemHideEmulation(
     ["div:-abp-has(div)"]
-  );
-  expectHidden(test, parent);
-  expectVisible(test, child);
-  test.done();
+  ).then(() =>
+  {
+    expectHidden(test, parent);
+    expectVisible(test, child);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithSuffix = function(test)
 {
   let parent = createElementWithStyle("{}");
   let middle = createElementWithStyle("{}", parent);
   let child = createElementWithStyle("{}", middle);
   applyElemHideEmulation(
     ["div:-abp-has(div) > div"]
-  );
-  expectVisible(test, parent);
-  expectHidden(test, middle);
-  expectHidden(test, child);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectHidden(test, middle);
+    expectHidden(test, child);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithSuffixSibling = function(test)
 {
   let parent = createElementWithStyle("{}");
   let middle = createElementWithStyle("{}", parent);
   let toHide = createElementWithStyle("{}");
   applyElemHideEmulation(
     ["div:-abp-has(div) + div"]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, middle);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, middle);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithSuffixSiblingChild = function(test)
 {
   //  <div>
   //    <div></div>
   //    <div>
   //      <div>to hide</div>
   //    </div>
   //  </div>
   let parent = createElementWithStyle("{}");
   let middle = createElementWithStyle("{}", parent);
   let sibling = createElementWithStyle("{}");
   let toHide = createElementWithStyle("{}", sibling);
   applyElemHideEmulation(
     ["div:-abp-has(div) + div > div"]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, middle);
-  expectVisible(test, sibling);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, middle);
+    expectVisible(test, sibling);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 function runTestPseudoClassHasSelectorWithHasAndWithSuffixSibling(test, selector)
 {
   document.body.innerHTML = `<div id="parent">
       <div id="middle">
         <div id="middle1"><div id="inside" class="inside"></div></div>
       </div>
       <div id="sibling">
         <div id="tohide">to hide</div>
       </div>
       <div id="sibling2">
         <div id="sibling21"><div id="sibling211" class="inside"></div></div>
       </div>
     </div>`;
   let parent = document.getElementById("parent");
   let middle = document.getElementById("middle");
   let inside = document.getElementById("inside");
   let sibling = document.getElementById("sibling");
   let sibling2 = document.getElementById("sibling2");
   let toHide = document.getElementById("tohide");
 
   insertStyleRule(".inside {}");
 
   applyElemHideEmulation(
     [selector]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, middle);
-  expectVisible(test, inside);
-  expectVisible(test, sibling);
-  expectVisible(test, sibling2);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, middle);
+    expectVisible(test, inside);
+    expectVisible(test, sibling);
+    expectVisible(test, sibling2);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 }
 
 exports.testPseudoClassHasSelectorWithHasAndWithSuffixSibling = function(test)
 {
   runTestPseudoClassHasSelectorWithHasAndWithSuffixSibling(test, "div:-abp-has(:-abp-has(div.inside)) + div > div");
 };
 
 exports.testPseudoClassContains = function(test)
 {
   document.body.innerHTML = `<div id="parent">
       <div id="middle">
         <div id="middle1"><div id="inside" class="inside"></div></div>
       </div>
       <div id="sibling">
         <div id="tohide">to hide</div>
       </div>
       <div id="sibling2">
         <div id="sibling21"><div id="sibling211" class="inside"></div></div>
       </div>
     </div>`;
   let parent = document.getElementById("parent");
   let middle = document.getElementById("middle");
   let inside = document.getElementById("inside");
   let sibling = document.getElementById("sibling");
   let sibling2 = document.getElementById("sibling2");
   let toHide = document.getElementById("tohide");
 
   applyElemHideEmulation(
     ["#parent div:-abp-contains(to hide)"]
-  );
-  expectVisible(test, parent);
-  expectVisible(test, middle);
-  expectVisible(test, inside);
-  expectHidden(test, sibling);
-  expectVisible(test, sibling2);
-  expectHidden(test, toHide);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, parent);
+    expectVisible(test, middle);
+    expectVisible(test, inside);
+    expectHidden(test, sibling);
+    expectVisible(test, sibling2);
+    expectHidden(test, toHide);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithPropSelector = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{background-color: #000}", parent);
   applyElemHideEmulation(
     ["div:-abp-has(:-abp-properties(background-color: rgb(0, 0, 0)))"]
-  );
-  expectVisible(test, child);
-  expectHidden(test, parent);
-  test.done();
+  ).then(() =>
+  {
+    expectVisible(test, child);
+    expectHidden(test, parent);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
 };
 
 exports.testPseudoClassHasSelectorWithPropSelector2 = function(test)
 {
   let parent = createElementWithStyle("{}");
   let child = createElementWithStyle("{}", parent);
   insertStyleRule("body #" + parent.id + " > div { background-color: #000}");
   applyElemHideEmulation(
     ["div:-abp-has(:-abp-properties(background-color: rgb(0, 0, 0)))"]
-  );
-  expectVisible(test, child);
-  expectHidden(test, parent);
-  test.done();
-};
+  ).then(() =>
+  {
+    expectVisible(test, child);
+    expectHidden(test, parent);
+  }).catch(unexpectedError.bind(test)).then(() => test.done());
+};