Web Inspector: Add tests for Fetch API Network Data (CORs, Opaque Responses, Filtered...
[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                 WebInspector.Frame.awaitEvent(WebInspector.Frame.Event.ResourceWasAdded).then((event) => {
16                     let resource = event.data.resource;
17                     InspectorTest.expectEqual(resource.type, WebInspector.Resource.Type.Fetch, "Resource should be Fetch type.");
18                     if (loadedHandler) {
19                         resource.awaitEvent(WebInspector.Resource.Event.LoadingDidFinish)
20                             .then(() => { InspectorTest.pass("Resource should have loaded successfully.") })
21                             .then(() => { loadedHandler(resource); })
22                             .then(resolve, reject);
23                         resource.awaitEvent(WebInspector.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(WebInspector.Resource.Event.LoadingDidFinish)
28                             .then(() => { InspectorTest.fail("Resource should not have loaded successfully.") })
29                             .then(resolve, reject);
30                         resource.awaitEvent(WebInspector.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         failedHandler(resource) {
56             InspectorTest.expectThat(resource.failed, "Load should have failed.");
57             InspectorTest.expectThat(resource.canceled, "Load should have canceled.");
58         }
59     });
60
61     addTestCase({
62         name: "Network.Fetch.ModeCORS.SameOrigin",
63         description: "Same Origin 'cors' fetch => type 'basic'.",
64         expression: `fetch("http://127.0.0.1:8000/inspector/network/resources/cors-data.pl", {mode: "cors"})`,
65         loadedHandler(resource) {
66             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
67             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
68             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
69         }
70     });
71
72     addTestCase({
73         name: "Network.Fetch.ModeCORS.CrossOrigin",
74         description: "Cross Origin 'cors' fetch => type 'cors'. Produces filtered headers.",
75         expression: `fetch("http://localhost:8000/inspector/network/resources/cors-data.pl", {mode: "cors"})`,
76         loadedHandler(resource) {
77             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
78             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
79             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header which would have otherwise been filtered.");
80         }
81     });
82
83     addTestCase({
84         name: "Network.Fetch.ModeSameOrigin.SameOrigin",
85         description: "Same Origin 'same-origin' fetch => type 'basic'.",
86         expression: `fetch("http://127.0.0.1:8000/inspector/network/resources/cors-data.pl", {mode: "same-origin"})`,
87         loadedHandler(resource) {
88             InspectorTest.expectEqual(resource.mimeType, "application/json", "MIMEType should be 'application/json'.");
89             InspectorTest.expectEqual(resource.statusCode, 200, "Status code should be 200.");
90             InspectorTest.expectEqual(resource.responseHeaders["X-Custom-Header"], "Custom-Header-Value", "Should be able to see X-Custom-Header.");
91         }
92     });
93
94     suite.addTestCase({
95         name: "Network.Fetch.ModeSameOrigin.CrossOrigin",
96         description: "Cross Origin 'same-origin' fetch => Error.",
97         description: "Attempting a fetch with mode: 'same-origin' will immediately TypeError for a cross origin request",
98         test(resolve, reject) {
99             InspectorTest.evaluateInPage(`
100                 fetch("http://localhost:8000/inspector/network/resources/cors-data.pl", {mode: "same-origin"}).then(
101                     function success() {
102                         TestPage.log("FAIL: Should produce a TypeError.");
103                         TestPage.dispatchEventToFrontend("Completed");
104                     },
105                     function error() {
106                         TestPage.log("PASS: Should produce a TypeError.");
107                         TestPage.dispatchEventToFrontend("Completed");
108                     }
109                 );
110             `);
111             InspectorTest.singleFireEventListener("Completed", () => {
112                 resolve();
113             });
114         }
115     });
116
117     suite.runTestCasesAndFinish();
118 }
119 </script>
120 </head>
121 <body onload="runTest()">
122 <p>Tests for Network data with different types of Fetch requests.</p>
123 </body>
124 </html>