browser_net_jsonp.js (5184B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Tests if JSONP responses are handled correctly. 8 */ 9 10 add_task(async function () { 11 const { 12 L10N, 13 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js"); 14 15 const { tab, monitor } = await initNetMonitor(JSONP_URL, { requestCount: 1 }); 16 info("Starting test... "); 17 18 const { document, store, windowRequire } = monitor.panelWin; 19 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 20 const { getDisplayedRequests, getSortedRequests } = windowRequire( 21 "devtools/client/netmonitor/src/selectors/index" 22 ); 23 24 store.dispatch(Actions.batchEnable(false)); 25 26 // Execute requests. 27 await performRequests(monitor, tab, 2); 28 29 const requestItems = document.querySelectorAll(".request-list-item"); 30 for (const requestItem of requestItems) { 31 requestItem.scrollIntoView(); 32 const requestsListStatus = requestItem.querySelector(".status-code"); 33 EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus); 34 await waitUntil(() => requestsListStatus.title); 35 await waitForDOMIfNeeded(requestItem, ".requests-list-timings-total"); 36 } 37 38 await verifyRequestItemTarget( 39 document, 40 getDisplayedRequests(store.getState()), 41 getSortedRequests(store.getState())[0], 42 "GET", 43 CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun", 44 { 45 status: 200, 46 statusText: "OK", 47 type: "json", 48 fullMimeType: "text/json; charset=utf-8", 49 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41), 50 time: true, 51 } 52 ); 53 await verifyRequestItemTarget( 54 document, 55 getDisplayedRequests(store.getState()), 56 getSortedRequests(store.getState())[1], 57 "GET", 58 CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad", 59 { 60 status: 200, 61 statusText: "OK", 62 type: "json", 63 fullMimeType: "text/json; charset=utf-8", 64 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 54), 65 time: true, 66 } 67 ); 68 69 info("Testing first request"); 70 let wait = waitForDOM(document, "#response-panel .data-header"); 71 let waitForPropsView = waitForDOM( 72 document, 73 "#response-panel .properties-view", 74 1 75 ); 76 77 store.dispatch(Actions.toggleNetworkDetails()); 78 clickOnSidebarTab(document, "response"); 79 await Promise.all([wait, waitForPropsView]); 80 81 testJsonSectionInResponseTab(`"Hello JSONP!"`); 82 83 wait = waitForDOM(document, "#response-panel .cm-content"); 84 let rawResponseToggle = document.querySelector( 85 "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle" 86 ); 87 clickElement(rawResponseToggle, monitor); 88 await wait; 89 90 testResponseTab("$_0123Fun"); 91 92 info("Testing second request"); 93 94 wait = waitForDOM(document, "#response-panel .data-header"); 95 EventUtils.sendMouseEvent( 96 { type: "mousedown" }, 97 document.querySelectorAll(".request-list-item")[1] 98 ); 99 100 await wait; 101 102 waitForPropsView = waitForDOM( 103 document, 104 "#response-panel .properties-view", 105 1 106 ); 107 rawResponseToggle = document.querySelector( 108 "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle" 109 ); 110 clickElement(rawResponseToggle, monitor); 111 112 await waitForPropsView; 113 114 testJsonSectionInResponseTab(`"Hello weird JSONP!"`); 115 116 wait = waitForDOM(document, "#response-panel .cm-content"); 117 rawResponseToggle = document.querySelector( 118 "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle" 119 ); 120 clickElement(rawResponseToggle, monitor); 121 await wait; 122 123 testResponseTab("$_4567Sad"); 124 125 await teardown(monitor); 126 127 function testJsonSectionInResponseTab(greeting) { 128 const tabpanel = document.querySelector("#response-panel"); 129 is( 130 tabpanel.querySelectorAll(".treeRow").length, 131 1, 132 "There should be 1 json properties displayed in this tabpanel." 133 ); 134 135 const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel"); 136 const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox"); 137 138 is( 139 labels[0].textContent, 140 "greeting", 141 "The first json property name was incorrect." 142 ); 143 is( 144 values[0].textContent, 145 greeting, 146 "The first json property value was incorrect." 147 ); 148 } 149 150 function testResponseTab(func) { 151 const tabpanel = document.querySelector("#response-panel"); 152 153 is( 154 tabpanel.querySelector(".response-error-header") === null, 155 true, 156 "The response error header doesn't have the intended visibility." 157 ); 158 is( 159 tabpanel.querySelector(".data-label").textContent, 160 L10N.getFormatStr("jsonpScopeName", func), 161 "The response json view has the intened visibility and correct title." 162 ); 163 is( 164 tabpanel.querySelector(".cm-content") === null, 165 false, 166 "The response editor has the intended visibility." 167 ); 168 is( 169 tabpanel.querySelector(".responseImageBox") === null, 170 true, 171 "The response image box doesn't have the intended visibility." 172 ); 173 is( 174 tabpanel.querySelectorAll(".empty-notice").length, 175 0, 176 "The empty notice should not be displayed in this tabpanel." 177 ); 178 } 179 });