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>

+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()");

+  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.");

+}
+</script>
+
+<section class="site-panel">
+  <h2>$ping</h2>
+  <p>Check that usage of the $ping filter option is working as expected.</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
+</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>
+    </div>
+  </div>
+  <h3>Filters</h3>
+  testpages.adblockplus.org/*^$ping
+</section>