From a114e64fd703eaeec1314650b65f6590aafafdb8 Mon Sep 17 00:00:00 2001 From: Andres Rey Date: Wed, 8 Nov 2017 20:32:33 +0000 Subject: Fix test cases for the new code --- test/test-pages/002/expected-metadata.json | 2 +- test/test-pages/002/expected.html | 244 ++++++++++++++--------------- 2 files changed, 123 insertions(+), 123 deletions(-) (limited to 'test/test-pages/002') diff --git a/test/test-pages/002/expected-metadata.json b/test/test-pages/002/expected-metadata.json index d7b95e8..9b020e4 100644 --- a/test/test-pages/002/expected-metadata.json +++ b/test/test-pages/002/expected-metadata.json @@ -1,5 +1,5 @@ { - "title": "This API is so Fetching!", + "title": "This API is so Fetching! ✩ Mozilla Hacks – the Web developer blog", "byline": "Nikhil Marathe", "excerpt": "For more than a decade the Web has used XMLHttpRequest (XHR) to achieve asynchronous requests in JavaScript. While very useful, XHR is not a very ...", "readerable": true diff --git a/test/test-pages/002/expected.html b/test/test-pages/002/expected.html index 964d7d6..d836b60 100644 --- a/test/test-pages/002/expected.html +++ b/test/test-pages/002/expected.html @@ -1,4 +1,4 @@ -

For more than a decade the Web has used XMLHttpRequest (XHR) to achieve +

For more than a decade the Web has used XMLHttpRequest (XHR) to achieve asynchronous requests in JavaScript. While very useful, XHR is not a very nice API. It suffers from lack of separation of concerns. The input, output and state are all managed by interacting with one object, and state is @@ -30,37 +30,37 @@ In its simplest form it takes a URL and returns a promise that resolves to the response. The response is captured as a Response object.

- 
fetch("/data.json").then(function(res) {
-  // res instanceof Response == true.
-  if (res.ok) {
-    res.json().then(function(data) {
-      console.log(data.entries);
-    });
-  } else {
-    console.log("Looks like the response wasn't perfect, got status", res.status);
-  }
-}, function(e) {
-  console.log("Fetch failed!", e);
-});
+ 
fetch("/data.json").then(function(res) {
+  // res instanceof Response == true.
+  if (res.ok) {
+    res.json().then(function(data) {
+      console.log(data.entries);
+    });
+  } else {
+    console.log("Looks like the response wasn't perfect, got status", res.status);
+  }
+}, function(e) {
+  console.log("Fetch failed!", e);
+});

Submitting some parameters, it would look like this:

- 
fetch("http://www.example.org/submit.php", {
-  method: "POST",
-  headers: {
-    "Content-Type": "application/x-www-form-urlencoded"
-  },
-  body: "firstName=Nikhil&favColor=blue&password=easytoguess"
-}).then(function(res) {
-  if (res.ok) {
-    alert("Perfect! Your settings are saved.");
-  } else if (res.status == 401) {
-    alert("Oops! You are not authorized.");
-  }
-}, function(e) {
-  alert("Error submitting form!");
-});
+ 
fetch("http://www.example.org/submit.php", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/x-www-form-urlencoded"
+  },
+  body: "firstName=Nikhil&favColor=blue&password=easytoguess"
+}).then(function(res) {
+  if (res.ok) {
+    alert("Perfect! Your settings are saved.");
+  } else if (res.status == 401) {
+    alert("Oops! You are not authorized.");
+  }
+}, function(e) {
+  alert("Error submitting form!");
+});

The fetch() function’s arguments are the same as those passed @@ -79,36 +79,36 @@

The Headers interface is a simple multi-map of names to values:

- 
var content = "Hello World";
-var reqHeaders = new Headers();
-reqHeaders.append("Content-Type", "text/plain"
-reqHeaders.append("Content-Length", content.length.toString());
-reqHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ 
var content = "Hello World";
+var reqHeaders = new Headers();
+reqHeaders.append("Content-Type", "text/plain"
+reqHeaders.append("Content-Length", content.length.toString());
+reqHeaders.append("X-Custom-Header", "ProcessThisImmediately");

The same can be achieved by passing an array of arrays or a JS object literal

to the constructor:

- 
reqHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
+ 
reqHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});

The contents can be queried and retrieved:

- 
console.log(reqHeaders.has("Content-Type")); // true
-console.log(reqHeaders.has("Set-Cookie")); // false
-reqHeaders.set("Content-Type", "text/html");
-reqHeaders.append("X-Custom-Header", "AnotherValue");
+                
console.log(reqHeaders.has("Content-Type")); // true
+console.log(reqHeaders.has("Set-Cookie")); // false
+reqHeaders.set("Content-Type", "text/html");
+reqHeaders.append("X-Custom-Header", "AnotherValue");
  
-console.log(reqHeaders.get("Content-Length")); // 11
-console.log(reqHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+console.log(reqHeaders.get("Content-Length")); // 11
+console.log(reqHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
  
-reqHeaders.delete("X-Custom-Header");
-console.log(reqHeaders.getAll("X-Custom-Header")); // []

+reqHeaders.delete("X-Custom-Header");
+console.log(reqHeaders.getAll("X-Custom-Header")); // []
                             		
                         

             
Some of these operations are only useful in ServiceWorkers, but they provide
@@ -136,12 +136,12 @@ console.log(<
                 valid HTTP Header name. The mutation operations will throw TypeError
                     if there is an immutable guard. Otherwise they fail silently. For example:

             

-                
var res = Response.error();
-try {
-  res.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("Cannot pretend to be a bank!");
-}

+                
var res = Response.error();
+try {
+  res.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}

                             		
                         

         
@@ -153,9 +153,9 @@ console.log(<
         
The simplest Request is of course, just a URL, as you may do to GET a
             resource.

         

-            
var req = new Request("/index.html");
-console.log(req.method); // "GET"
-console.log(req.url); // "http://example.com/index.html"

+            
var req = new Request("/index.html");
+console.log(req.method); // "GET"
+console.log(req.url); // "http://example.com/index.html"

                         		
                     

         
You may also pass a Request to the Request() constructor to
@@ -164,9 +164,9 @@ console.log(<
             is covered in
             

the “Reading bodies” section.).

         

-            
var copy = new Request(req);
-console.log(copy.method); // "GET"
-console.log(copy.url); // "http://example.com/index.html"

+            
var copy = new Request(req);
+console.log(copy.method); // "GET"
+console.log(copy.url); // "http://example.com/index.html"

                         		
                     

         
Again, this form is probably only useful in ServiceWorkers.

@@ -174,13 +174,13 @@ console.log(<
             initial
             

values as a second argument to the constructor. This argument is a dictionary.

         

-            
var uploadReq = new Request("/uploadImage", {
-  method: "POST",
-  headers: {
-    "Content-Type": "image/png",
-  },
-  body: "image data"
-});

+            
var uploadReq = new Request("/uploadImage", {
+  method: "POST",
+  headers: {
+    "Content-Type": "image/png",
+  },
+  body: "image data"
+});

                         		
                     

             
The Request’s mode is used to determine if cross-origin requests lead
@@ -192,12 +192,12 @@ console.log(<
                 this to ensure that
                 

a request is always being made to your origin.

             

-                
var arbitraryUrl = document.getElementById("url-input").value;
-fetch(arbitraryUrl, { mode: "same-origin" }).then(function(res) {
-  console.log("Response succeeded?", res.ok);
-}, function(e) {
-  console.log("Please enter a same-origin URL!");
-});

+                
var arbitraryUrl = document.getElementById("url-input").value;
+fetch(arbitraryUrl, { mode: "same-origin" }).then(function(res) {
+  console.log("Response succeeded?", res.ok);
+}, function(e) {
+  console.log("Please enter a same-origin URL!");
+});

                             		
                         

             
The "no-cors" mode captures what the web platform does by default
@@ -218,31 +218,31 @@ fetch(arbitraryUrlmost interesting photos
                 today like this:

             

-                
var u = new URLSearchParams();
-u.append('method', 'flickr.interestingness.getList');
-u.append('api_key', '<insert api key here>');
-u.append('format', 'json');
-u.append('nojsoncallback', '1');
+                
var u = new URLSearchParams();
+u.append('method', 'flickr.interestingness.getList');
+u.append('api_key', '<insert api key here>');
+u.append('format', 'json');
+u.append('nojsoncallback', '1');
  
-var apiCall = fetch('https://api.flickr.com/services/rest?' + u);
+var apiCall = fetch('https://api.flickr.com/services/rest?' + u);
  
-apiCall.then(function(response) {
-  return response.json().then(function(json) {
-    // photo is a list of photos.
-    return json.photos.photo;
-  });
-}).then(function(photos) {
-  photos.forEach(function(photo) {
-    console.log(photo.title);
-  });
-});

+apiCall.then(function(response) {
+  return response.json().then(function(json) {
+    // photo is a list of photos.
+    return json.photos.photo;
+  });
+}).then(function(photos) {
+  photos.forEach(function(photo) {
+    console.log(photo.title);
+  });
+});
                             		
                         

             
You may not read out the “Date” header since Flickr does not allow it
                 via
                 

Access-Control-Expose-Headers.

             

-                
response.headers.get("Date"); // null

+                
response.headers.get("Date"); // null

                             		
                         

             
The credentials enumeration determines if cookies for the other
@@ -297,11 +297,11 @@ apiCall.then(
                 

idiomatic way to return a Response to an intercepted request in ServiceWorkers
                 is:

             

-                
addEventListener('fetch', function(event) {
-  event.respondWith(new Response("Response body", {
-    headers: { "Content-Type" : "text/plain" }
-  });
-});

+                
addEventListener('fetch', function(event) {
+  event.respondWith(new Response("Response body", {
+    headers: { "Content-Type" : "text/plain" }
+  });
+});

                             		
                         

             
As you can see, Response has a two argument constructor, where both arguments
@@ -348,17 +348,17 @@ apiCall.then(
                 non-text data!

             
Request bodies can be set by passing body parameters:

             

-                
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-})

+                
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})

                             		
                         

                 
Responses take the first argument as the body.

                 

-                    
var res = new Response(new File(["chunk", "chunk"], "archive.zip",
-                       { type: "application/zip" }));

+                    
var res = new Response(new File(["chunk", "chunk"], "archive.zip",
+                       { type: "application/zip" }));

                                 		
                             

                 
Both Request and Response (and by extension the fetch() function),
@@ -372,16 +372,16 @@ fetch("/login
                     read once! Both interfaces have a boolean attribute bodyUsed to
                     determine if it is safe to read or not.

                 

-                    
var res = new Response("one time use");
-console.log(res.bodyUsed); // false
-res.text().then(function(v) {
-  console.log(res.bodyUsed); // true
-});
-console.log(res.bodyUsed); // true
+                    
var res = new Response("one time use");
+console.log(res.bodyUsed); // false
+res.text().then(function(v) {
+  console.log(res.bodyUsed); // true
+});
+console.log(res.bodyUsed); // true
  
-res.text().catch(function(e) {
-  console.log("Tried to read already consumed Response");
-});

+res.text().catch(function(e) {
+  console.log("Tried to read already consumed Response");
+});
                                 		
                             

                 
This decision allows easing the transition to an eventual stream-based Fetch
@@ -398,20 +398,20 @@ res.text(clone() first, read later.

                 

-                    
addEventListener('fetch', function(evt) {
-  var sheep = new Response("Dolly");
-  console.log(sheep.bodyUsed); // false
-  var clone = sheep.clone();
-  console.log(clone.bodyUsed); // false
+                    
addEventListener('fetch', function(evt) {
+  var sheep = new Response("Dolly");
+  console.log(sheep.bodyUsed); // false
+  var clone = sheep.clone();
+  console.log(clone.bodyUsed); // false
  
-  clone.text();
-  console.log(sheep.bodyUsed); // false
-  console.log(clone.bodyUsed); // true
+  clone.text();
+  console.log(sheep.bodyUsed); // false
+  console.log(clone.bodyUsed); // true
  
-  evt.respondWith(cache.add(sheep.clone()).then(function(e) {
-    return sheep;
-  });
-});

+  evt.respondWith(cache.add(sheep.clone()).then(function(e) {
+    return sheep;
+  });
+});
                                 		
                             

                 
@@ -429,4 +429,4 @@ res.text(The author would like to thank Andrea Marchesini, Anne van Kesteren and Ben


 Kelly for helping with the specification and implementation.
                 

-                
\ No newline at end of file
+                
\ No newline at end of file
-- 
cgit v1.2.3