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, expectHidden, expectVisible} = require("./_utils");
+const {timeout} = require("./_utils");
 
 // We need this stub for the injector.
 window.browser = {
   runtime: {
     getURL: () => ""
   }
 };
+
+function expectHidden(test, element, id)
+{
+  let withId = "";
+  if (typeof id != "undefined")
+    withId = ` with ID '${id}'`;
+
+  test.equal(
+    window.getComputedStyle(element).display, "none",
+    `The element${withId}'s display property should be set to 'none'`);
+}
+
+function expectVisible(test, element, id)
+{
+  let withId = "";
+  if (typeof id != "undefined")
+    withId = ` with ID '${id}'`;
+
+  test.notEqual(
+    window.getComputedStyle(element).display, "none",
+    `The element${withId}'s display property should not be set to 'none'`);
+}
 
 async function runSnippet(test, snippetName, ...args)
 {
   let snippet = library[snippetName];
 
   test.ok(snippet);
 
   snippet(...args);
 
   // For snippets that run in the context of the document via a <script>
@@ skipping 229 matching lines @@
       .vis_hid {
         visibility: hidden;
       }
       .vis_collapse {
         visibility: collapse;
       }
       .same_colour {
         color: rgb(255,255,255);
         background-color: rgb(255,255,255);
       }
+      .transparent {
+        color: transparent;
+      }
       #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 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 transparent">Transparent</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");
+  expectVisible(test, element, "article");
   element = document.getElementById("article2");
   expectHidden(test, element, "article2");
   element = document.getElementById("article3");
   expectVisible(test, element, "article3");
 
   test.done();
 };