Issue 7450 - Implement hide-if-contains-visible-text snippet

test/browser/snippets.js

Index: test/browser/snippets.js
===================================================================
--- a/test/browser/snippets.js
+++ b/test/browser/snippets.js
@@ -13,17 +13,17 @@
  *
  * 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 library = require("../../lib/content/snippets.js");
-const {timeout} = require("./_utils");
+const {timeout, expectHidden, expectVisible} = require("./_utils");
 
 // We need this stub for the injector.
 window.browser = {
   runtime: {
     getURL: () => ""
   }
 };
 
@@ -233,8 +233,93 @@
   {
     test.equals(element.textContent, "", "Result element should be empty");
     test.equals(msg.textContent, "ReferenceError",
                 "There should have been an error");
   }
 
   test.done();
 };
+
+exports.testHideIfContainsVisibleText = async function(test)
+{
+  document.body.innerHTML = `
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      .transparent {
+        opacity: 0;
+        position: absolute;
+        display: block;
+      }
+      .zerosize {
+        font-size: 0;
+      }
+      div {
+        display: block;
+      }
+      .a {
+        display: inline-block;
+        white-space: pre-wrap;
+      }
+      .disp_none {
+        display: none;
+      }
+      .vis_hid {
+        visibility: hidden;
+      }
+      .vis_collapse {
+        visibility: collapse;
+      }
+      .same_colour {
+        color: rgb(255,255,255);
+        background-color: rgb(255,255,255);
+      }
+      #label {
+        overflow-wrap: break-word;
+      }
+    </style>
+    <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 \ud83d\ude42!</div>
+      </div>
+      <div id="sibling2">
+        <div id="sibling21"><div id="sibling211" class="inside">Ad*</div></div>
+      </div>
+      <div id="label"><div id="content"><div class="a transparent">Sp</div><div class="a">Sp</div><div class="a zerosize">S</div><div class="a transparent">on</div><div class="a">on</div><div class="a zerosize">S</div></div></div>
+      <div id="label2"><div class="a vis_hid">Visibility: hidden</div><div class="a">S</div><div class="a vis_collapse">Visibility: collapse</div><div class="a">p</div><div class="a disp_none">Display: none</div><div class="a">o</div><div class="a same_colour">Same colour</div><div class="a">n</div></div>
+      <article id="article"><div style="display: none"><a href="foo"><div>Spon</div></a>Visit us</div></article>
+      <article id="article2"><div><a href="foo"><div>Spon</div></a>By this</div></article>
+      <article id="article3"><div><a href="foo"><div>by Writer</div></a> about the Sponsorship.</div></article>
+    </div>`;
+
+  await runSnippet(
+    test, "hide-if-contains-visible-text", "Spon", "#parent > div"

[Manish Jethani, 2019/04/18 08:40:43]

Why not just test for "Sponsored" (updating the code above), since that is
literally what we're going to target anyway?

[hub, 2019/04/18 17:48:40]

I don't think it matters. Also "Sponsored" is only in English. So just any
string will work.

[Manish Jethani, 2019/04/19 09:23:14]

That's true, a string like "12fd2810" would also work as far as we're interested
in testing the functionality. But one of the benefits of having a test case that
is close to the problem we're trying to solve in reality is that it doubles up
as documentation. i.e. you and I know that "Sponsored", "Spon", and "12fd2810"
are all the same, but the person who maintains this code two years from now
could benefit from realistic examples in the test file itself.

+  );
+
+  let element = document.getElementById("label");
+  expectHidden(test, element, "label");
+  element = document.getElementById("label2");
+  expectHidden(test, element, "label2");
+
+  element = document.getElementById("article");
+  expectVisible(test, element, "article");
+  element = document.getElementById("article2");
+  expectVisible(test, element, "article2");
+
+  await runSnippet(
+    test, "hide-if-contains-visible-text", "Spon", "#parent > article", "#parent > article a"
+  );
+
+  element = document.getElementById("article");
+  expectHidden(test, element, "article");
+  element = document.getElementById("article2");
+  expectHidden(test, element, "article2");
+  element = document.getElementById("article3");
+  expectVisible(test, element, "article3");
+
+  test.done();
+};