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

test/browser/snippets.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 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: () => ""
   }
 };
 
 async function runSnippet(test, snippetName, ...args)
 {
@@ skipping 199 matching lines @@
 
   if (element && msg)
   {
     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();
+};