browser_net_sort-01.js (9869B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Test if sorting columns in the network table works correctly with new requests. 8 */ 9 10 add_task(async function () { 11 const { 12 L10N, 13 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js"); 14 15 const { monitor } = await initNetMonitor(SORTING_URL, { requestCount: 1 }); 16 info("Starting test... "); 17 18 // It seems that this test may be slow on debug builds. This could be because 19 // of the heavy dom manipulation associated with sorting. 20 requestLongerTimeout(2); 21 22 const { document, store, windowRequire } = monitor.panelWin; 23 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 24 const { getDisplayedRequests, getSelectedRequest, getSortedRequests } = 25 windowRequire("devtools/client/netmonitor/src/selectors/index"); 26 27 store.dispatch(Actions.batchEnable(false)); 28 29 // Loading the frame script and preparing the xhr request URLs so we can 30 // generate some requests later. 31 const requests = [ 32 { 33 url: "sjs_sorting-test-server.sjs?index=1&" + Math.random(), 34 method: "GET1", 35 }, 36 { 37 url: "sjs_sorting-test-server.sjs?index=5&" + Math.random(), 38 method: "GET5", 39 }, 40 { 41 url: "sjs_sorting-test-server.sjs?index=2&" + Math.random(), 42 method: "GET2", 43 }, 44 { 45 url: "sjs_sorting-test-server.sjs?index=4&" + Math.random(), 46 method: "GET4", 47 }, 48 { 49 url: "sjs_sorting-test-server.sjs?index=3&" + Math.random(), 50 method: "GET3", 51 }, 52 ]; 53 54 let wait = waitForNetworkEvents(monitor, 5); 55 await performRequestsInContent(requests); 56 await wait; 57 58 store.dispatch(Actions.toggleNetworkDetails()); 59 60 isnot( 61 getSelectedRequest(store.getState()), 62 undefined, 63 "There should be a selected item in the requests menu." 64 ); 65 is( 66 getSelectedIndex(store.getState()), 67 0, 68 "The first item should be selected in the requests menu." 69 ); 70 is( 71 !!document.querySelector(".network-details-bar"), 72 true, 73 "The network details panel should be visible after toggle button was pressed." 74 ); 75 76 testHeaders(); 77 await testContents([0, 2, 4, 3, 1], 0); 78 79 info("Testing status sort, ascending."); 80 EventUtils.sendMouseEvent( 81 { type: "click" }, 82 document.querySelector("#requests-list-status-button") 83 ); 84 testHeaders("status", "ascending"); 85 await testContents([0, 1, 2, 3, 4], 0); 86 87 info("Performing more requests."); 88 wait = waitForNetworkEvents(monitor, 5); 89 await performRequestsInContent(requests); 90 await wait; 91 92 info("Testing status sort again, ascending."); 93 testHeaders("status", "ascending"); 94 await testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0); 95 96 info("Testing status sort, descending."); 97 EventUtils.sendMouseEvent( 98 { type: "click" }, 99 document.querySelector("#requests-list-status-button") 100 ); 101 testHeaders("status", "descending"); 102 await testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9); 103 104 info("Performing more requests."); 105 wait = waitForNetworkEvents(monitor, 5); 106 await performRequestsInContent(requests); 107 await wait; 108 109 info("Testing status sort again, descending."); 110 testHeaders("status", "descending"); 111 await testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14); 112 113 info("Testing status sort yet again, ascending."); 114 EventUtils.sendMouseEvent( 115 { type: "click" }, 116 document.querySelector("#requests-list-status-button") 117 ); 118 testHeaders("status", "ascending"); 119 await testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0); 120 121 info("Testing status sort yet again, descending."); 122 EventUtils.sendMouseEvent( 123 { type: "click" }, 124 document.querySelector("#requests-list-status-button") 125 ); 126 testHeaders("status", "descending"); 127 await testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14); 128 129 return teardown(monitor); 130 131 function testHeaders(sortType, direction) { 132 const doc = monitor.panelWin.document; 133 const target = doc.querySelector("#requests-list-" + sortType + "-button"); 134 const headers = doc.querySelectorAll(".requests-list-header-button"); 135 136 for (const header of headers) { 137 if (header != target) { 138 ok( 139 !header.hasAttribute("data-sorted"), 140 "The " + 141 header.id + 142 " header does not have a 'data-sorted' attribute." 143 ); 144 ok( 145 !header 146 .getAttribute("title") 147 .includes(L10N.getStr("networkMenu.sortedAsc")) && 148 !header 149 .getAttribute("title") 150 .includes(L10N.getStr("networkMenu.sortedDesc")), 151 "The " + 152 header.id + 153 " header does not include any sorting in the 'title' attribute." 154 ); 155 } else { 156 is( 157 header.getAttribute("data-sorted"), 158 direction, 159 "The " + header.id + " header has a correct 'data-sorted' attribute." 160 ); 161 const sorted = 162 direction == "ascending" 163 ? L10N.getStr("networkMenu.sortedAsc") 164 : L10N.getStr("networkMenu.sortedDesc"); 165 ok( 166 header.getAttribute("title").includes(sorted), 167 "The " + 168 header.id + 169 " header includes the used sorting in the 'title' attribute." 170 ); 171 } 172 } 173 } 174 175 function getSelectedIndex(state) { 176 if (!state.requests.selectedId) { 177 return -1; 178 } 179 return getSortedRequests(state).findIndex( 180 r => r.id === state.requests.selectedId 181 ); 182 } 183 184 async function testContents(order, selection) { 185 isnot( 186 getSelectedRequest(store.getState()), 187 undefined, 188 "There should still be a selected item after sorting." 189 ); 190 is( 191 getSelectedIndex(store.getState()), 192 selection, 193 "The first item should be still selected after sorting." 194 ); 195 is( 196 !!document.querySelector(".network-details-bar"), 197 true, 198 "The network details panel should still be visible after sorting." 199 ); 200 201 is( 202 getSortedRequests(store.getState()).length, 203 order.length, 204 "There should be a specific number of items in the requests menu." 205 ); 206 is( 207 getDisplayedRequests(store.getState()).length, 208 order.length, 209 "There should be a specific number of visbile items in the requests menu." 210 ); 211 is( 212 document.querySelectorAll(".request-list-item").length, 213 order.length, 214 "The visible items in the requests menu are, in fact, visible!" 215 ); 216 217 const requestItems = document.querySelectorAll(".request-list-item"); 218 for (const requestItem of requestItems) { 219 requestItem.scrollIntoView(); 220 const requestsListStatus = requestItem.querySelector(".status-code"); 221 EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus); 222 await waitUntil(() => requestsListStatus.title); 223 } 224 225 for (let i = 0, len = order.length / 5; i < len; i++) { 226 await verifyRequestItemTarget( 227 document, 228 getDisplayedRequests(store.getState()), 229 getSortedRequests(store.getState())[order[i]], 230 "GET1", 231 SORTING_SJS + "?index=1", 232 { 233 fuzzyUrl: true, 234 status: 101, 235 statusText: "Meh", 236 type: "1", 237 fullMimeType: "text/1", 238 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 198), 239 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), 240 } 241 ); 242 } 243 for (let i = 0, len = order.length / 5; i < len; i++) { 244 await verifyRequestItemTarget( 245 document, 246 getDisplayedRequests(store.getState()), 247 getSortedRequests(store.getState())[order[i + len]], 248 "GET2", 249 SORTING_SJS + "?index=2", 250 { 251 fuzzyUrl: true, 252 status: 200, 253 statusText: "Meh", 254 type: "2", 255 fullMimeType: "text/2", 256 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 217), 257 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19), 258 } 259 ); 260 } 261 for (let i = 0, len = order.length / 5; i < len; i++) { 262 await verifyRequestItemTarget( 263 document, 264 getDisplayedRequests(store.getState()), 265 getSortedRequests(store.getState())[order[i + len * 2]], 266 "GET3", 267 SORTING_SJS + "?index=3", 268 { 269 fuzzyUrl: true, 270 status: 300, 271 statusText: "Meh", 272 type: "3", 273 fullMimeType: "text/3", 274 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 227), 275 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), 276 } 277 ); 278 } 279 for (let i = 0, len = order.length / 5; i < len; i++) { 280 await verifyRequestItemTarget( 281 document, 282 getDisplayedRequests(store.getState()), 283 getSortedRequests(store.getState())[order[i + len * 3]], 284 "GET4", 285 SORTING_SJS + "?index=4", 286 { 287 fuzzyUrl: true, 288 status: 400, 289 statusText: "Meh", 290 type: "4", 291 fullMimeType: "text/4", 292 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 237), 293 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39), 294 } 295 ); 296 } 297 for (let i = 0, len = order.length / 5; i < len; i++) { 298 await verifyRequestItemTarget( 299 document, 300 getDisplayedRequests(store.getState()), 301 getSortedRequests(store.getState())[order[i + len * 4]], 302 "GET5", 303 SORTING_SJS + "?index=5", 304 { 305 fuzzyUrl: true, 306 status: 500, 307 statusText: "Meh", 308 type: "5", 309 fullMimeType: "text/5", 310 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 247), 311 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49), 312 } 313 ); 314 } 315 } 316 });