Issue 2148 - Rewrite the testpages test suite

pages/filters/ping.tmpl

-title = $ping - ABP Test Pages

[kzar, 2018/04/19 13:08:20]

Nit: Instead of hard-coding " - ABP Test Pages" on the end of all the titles,
why not do that in default.tmpl and the other templates? Something like this:

<title>{{ title }} - ABP Test Pages</title>

+title = $ping
 template = testcase
 
 {% set testcase_moreinfo = [
   ("Filter Options", "https://adblockplus.org/filters#options"),
 ] %}
 
 
 <script>
-function pagelog(message) {
-  var log = document.getElementById("testcase-fo-ping");
-  log.innerText = log.innerText + message + "\n";
-  console.log(message);
-}
-
 function do_ping() {
   var button = document.getElementById("ping-button");
   button.parentNode.removeChild(button);
 
-  pagelog( "Calling navigator.sendBeacon()" );

[kzar, 2018/04/19 13:08:21]

Nit: In JavaScript code we generally don't put whitespace directly after ( or
before ). 

In other words, instead of:

pagelog( "Calling navigator.sendBeacon()" );

please do:

pagelog("Calling navigator.sendBeacon()");

+  pagelog("Calling navigator.sendBeacon()");
   var res = navigator.sendBeacon("/en/filters/ping", "Testdata" );
   pagelog("navigator.sendBeacon() called.");
 
-  (res ? pagelog("navigator.sendBeacon() returned true.") : pagelog("Beacon could not be queued."));

[kzar, 2018/04/19 13:08:20]

Nit: Please use a regular if... else here, since you're not actually using the
return value of the pagelog calls (untested):

if (res)
  pagelog("navigator.sendBeacon() returned true.");
else
  pagelog("Beacon could not be queued.");

Alternatively you could put the inline conditional inside the pagelog call
(untested):

pagelog(res ? "navigator.sendBeacon() returned true." : "Beacon could not be
queued.");

+  if (res)
+    pagelog("navigator.sendBeacon() returned true.");
+  else
+    pagelog("Beacon could not be queued.");
+
 }
 </script>
 
 <section class="site-panel">
   <h2>$ping</h2>
   <p>Check that usage of the $ping filter option is working as expected.</p>
+  <p>With the filter displayed below each test case added to ABP (or with the testcase subscription installed and active), the pings triggered in the test case panels below should be blocked.</p>
   <p>Note: Browsers will always return true if the ping is successfully queued, not if sent. Check with the Adblock Plus DevTools panel to check if it was actually blocked.</p>
 </section>
 
 <section class="site-panel">
   <h2>Test case</h2>
   <div class="testcase-container">
     <div class="testcase-row"><h3>Ping</h3>
       <a href="http://example.com" target="_blank" ping="/en/filters/ping">Link based ping</a>
     </div>
   </div>
   <h3>Filters</h3>
-  testpages.adblockplus.org/*^$ping
+  <pre>testpages.adblockplus.org/*^$ping</pre>
 </section>
 
 <section class="site-panel">
   <h2>navigator.sendBeacon()</h2>
   <div class="testcase-container">
     <div class="testcase-row"><h3>Ping</h3>
       <div id="testcase-fo-ping">
         <button id="ping-button" onclick="do_ping()">Send Ping</button>
+        <div id="testcase-output"></div>
       </div>
     </div>
   </div>
   <h3>Filters</h3>
-  testpages.adblockplus.org/*^$ping
+  <pre>testpages.adblockplus.org/*^$ping</pre>
 </section>