[Fetch API] Response should keep all ResourceResponse information
[WebKit-https.git] / LayoutTests / http / tests / inspector / network / fetch-network-data.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="../resources/inspector-test.js"></script>
6 <script>
7 function test()
8 {
9     let suite = InspectorTest.createAsyncSuite("Network.Fetch");
10
11     function addTestCase({name, expression, loadedHandler, failedHandler}) {
12         suite.addTestCase({
13             name, test(resolve, reject) {
14                 InspectorTest.evaluateInPage(expression);
15                 WI.Frame.singleFireEventListener(WI.Frame.Event.ResourceWasAdded, (event) => {
16                     let resource = event.data.resource;
17                     InspectorTest.expectEqual(resource.type, WI.Resource.Type.Fetch, "Resource should be Fetch type.");
18                     if (loadedHandler) {
19                         resource.awaitEvent(WI.Resource.Event.LoadingDidFinish)
20                             .then(() => { InspectorTest.pass("Resource should have loaded successfully.") })
21                             .then(() => { loadedHandler(resource); })
22                             .then(resolve, reject);
23                         resource.awaitEvent(WI.Resource.Event.LoadingDidFail)
24                             .then(() => { InspectorTest.fail("Resource should not have failed to load.") })
25                             .then(reject, reject);
26                     } else if (failedHandler) {
27                         resource.awaitEvent(WI.Resource.Event.LoadingDidFinish)
28                             .then(() => { InspectorTest.fail("Resource should not have loaded successfully.") })
29                             .then(resolve, reject);
30                         resource.awaitEvent(WI.Resource.Event.LoadingDidFail)
31                             .then(() => { InspectorTest.pass("Resource should have failed to load.") })
32                             .then(() => { failedHandler(resource); })
33                             .then(resolve, reject);
34                     }
35                 });
36             }
37         });
38     }
39
40     addTestCase({
41         name: "Network.Fetch.ModeNoCORS.SameOrigin",
42         description: "Same Origin 'no-cors' fetch => type 'basic'.",
43         expression: `fetch("http://127.0.0.1:8000/inspector/network/resources/cors-data.pl", {mode: "no-cors"})`,
44         loadedHandler(resource) {
45             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
46             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
47             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
48         }
49     });
50
51     addTestCase({
52         name: "Network.Fetch.ModeNoCORS.CrossOrigin",
53         description: "Same Origin 'no-cors' fetch => type 'opaque'. Produces an opaque failure.",
54         expression: `fetch("http://localhost:8000/inspector/network/resources/cors-data.pl", {mode: "no-cors"})`,
55         loadedHandler(resource) {
56             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
57             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
58             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
59         }
60     });
61
62     addTestCase({
63         name: "Network.Fetch.ModeCORS.SameOrigin",
64         description: "Same Origin 'cors' fetch => type 'basic'.",
65         expression: `fetch("http://127.0.0.1:8000/inspector/network/resources/cors-data.pl", {mode: "cors"})`,
66         loadedHandler(resource) {
67             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
68             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
69             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
70         }
71     });
72
73     addTestCase({
74         name: "Network.Fetch.ModeCORS.CrossOrigin",
75         description: "Cross Origin 'cors' fetch => type 'cors'. Produces filtered headers.",
76         expression: `fetch("http://localhost:8000/inspector/network/resources/cors-data.pl", {mode: "cors"})`,
77         loadedHandler(resource) {
78             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
79             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
80             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header which would have otherwise been filtered.");
81         }
82     });
83
84     addTestCase({
85         name: "Network.Fetch.ModeSameOrigin.SameOrigin",
86         description: "Same Origin 'same-origin' fetch => type 'basic'.",
87         expression: `fetch("http://127.0.0.1:8000/inspector/network/resources/cors-data.pl", {mode: "same-origin"})`,
88         loadedHandler(resource) {
89             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
90             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
91             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
92         }
93     });
94
95     suite.addTestCase({
96         name: "Network.Fetch.ModeSameOrigin.CrossOrigin",
97         description: "Cross Origin 'same-origin' fetch => Error.",
98         description: "Attempting a fetch with mode: 'same-origin' will immediately TypeError for a cross origin request",
99         test(resolve, reject) {
100             InspectorTest.evaluateInPage(`
101                 fetch("http://localhost:8000/inspector/network/resources/cors-data.pl", {mode: "same-origin"}).then(
102                     function success() {
103                         TestPage.log("FAIL: Should produce a TypeError.");
104                         TestPage.dispatchEventToFrontend("Completed");
105                     },
106                     function error() {
107                         TestPage.log("PASS: Should produce a TypeError.");
108                         TestPage.dispatchEventToFrontend("Completed");
109                     }
110                 );
111             `);
112             InspectorTest.singleFireEventListener("Completed", () => {
113                 resolve();
114             });
115         }
116     });
117
118     suite.runTestCasesAndFinish();
119 }
120 </script>
121 </head>
122 <body onload="runTest()">
123 <p>Tests for Network data with different types of Fetch requests.</p>
124 </body>
125 </html>