Issue 2148 - Rewrite the testpages test suite

pages/exceptions/xmlhttprequest.tmpl

-title = $xmlhttprequest Exception - ABP Test Pages
+title = $xmlhttprequest Exception
 template = testcase
 
 {% set testcase_moreinfo = [
   ("Filter Options", "https://adblockplus.org/filters#options"),
 ] %}
 
 <script>
-function pagelog(message) {

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

This function is in the code 5 times in different places. Perhaps create a file
like common.js and put shared JavaScript code in that?

[kzar, 2018/04/23 09:57:27]

I think the code duplication is a bigger problem than an extra request. I mean
if you need to tweak that function it's already going to be a pain and this
is going to get worse as we add further test cases.

If you think the extra request matters (I don't personally) you could put the
common JavaScript code inline in the shared template.

[kzar, 2018/06/04 17:17:28]

I still think it would be better if we avoided duplicating this code.

[rossg, 2018/06/07 10:30:23]

I have inlined the function into the testcases template for now and updated the
test pages that use it.

[kzar, 2018/06/07 11:43:03]

Great, thanks.

-  var log = document.getElementById("testcase-ex-xmlhttprequest");
-  log.innerText = log.innerText + message + "\n";
-  console.log(message);
-}
-
 function aborted(evt) {
   pagelog("XMLHTTPRequest was aborted.");
 }
 
 function failed(evt) {
   pagelog("XMLHTTPRequest failed.");
 }
 
 function makerequest() {
   var req = new XMLHttpRequest();
   req.addEventListener("error", failed);
   req.addEventListener("abort", aborted);
   req.open("GET", "http://testpages.adblockplus.org/testcasefiles/xmlhttprequestexception/text.txt", true);
   req.onload = function(e) {
     if (this.status == 200) {
       pagelog(this.responseText);
        }
     };
   req.send();
 }
 
 document.addEventListener('DOMContentLoaded', makerequest, false);
 </script>
 
 <section class="site-panel">
   <h2>$xmlhttprequest Exception</h2>
   <p>Check that usage of the $xmlhttprequest filter option in an exception filter works as expected.</p>
+  <p>With the filter(s) displayed below each test case added to ABP (or with the testcase subscription installed and active), the XMLHTTPRequest should not be blocked while the image should be.</p>
 </section>
 
 <section class="site-panel">
   <h2>Test case</h2>
   <p>The XMLHTTPRequest should not be blocked. The Image should be blocked.</p>
   <div class="testcase-container">
     <div class="testcase-row">
-      <h3>XMLHTTPRequest</h3><div id="testcase-ex-xmlhttprequest"></div>
+      <h3>XMLHTTPRequest</h3><div id="testcase-output"></div>
     </div>
     <div class="testcase-row">
       <h3>Image</h3><img class="testcase-image" src="/testcasefiles/xmlhttprequestexception/image.jpg"/>
     </div>
   </div>
   <h3>Filters</h3>
-  ||testpages.adblockplus.org/testcasefiles/xmlhttprequestexception/*<br>
-  @@testpages.adblockplus.org/testcasefiles/xmlhttprequestexception/$xmlhttprequest
+  <pre>||testpages.adblockplus.org/testcasefiles/xmlhttprequestexception/*</pre>
+  <pre>@@testpages.adblockplus.org/testcasefiles/xmlhttprequestexception/$xmlhttprequest</pre>
 </section>