browser_net_sort-02.js (14895B)
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. 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 const 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]); 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]); 86 87 info("Testing status sort, descending."); 88 EventUtils.sendMouseEvent( 89 { type: "click" }, 90 document.querySelector("#requests-list-status-button") 91 ); 92 testHeaders("status", "descending"); 93 await testContents([4, 3, 2, 1, 0]); 94 95 info("Testing status sort, ascending. Checking sort loops correctly."); 96 EventUtils.sendMouseEvent( 97 { type: "click" }, 98 document.querySelector("#requests-list-status-button") 99 ); 100 testHeaders("status", "ascending"); 101 await testContents([0, 1, 2, 3, 4]); 102 103 info("Testing method sort, ascending."); 104 EventUtils.sendMouseEvent( 105 { type: "click" }, 106 document.querySelector("#requests-list-method-button") 107 ); 108 testHeaders("method", "ascending"); 109 await testContents([0, 1, 2, 3, 4]); 110 111 info("Testing method sort, descending."); 112 EventUtils.sendMouseEvent( 113 { type: "click" }, 114 document.querySelector("#requests-list-method-button") 115 ); 116 testHeaders("method", "descending"); 117 await testContents([4, 3, 2, 1, 0]); 118 119 info("Testing method sort, ascending. Checking sort loops correctly."); 120 EventUtils.sendMouseEvent( 121 { type: "click" }, 122 document.querySelector("#requests-list-method-button") 123 ); 124 testHeaders("method", "ascending"); 125 await testContents([0, 1, 2, 3, 4]); 126 127 info("Testing file sort, ascending."); 128 EventUtils.sendMouseEvent( 129 { type: "click" }, 130 document.querySelector("#requests-list-file-button") 131 ); 132 testHeaders("file", "ascending"); 133 await testContents([0, 1, 2, 3, 4]); 134 135 info("Testing file sort, descending."); 136 EventUtils.sendMouseEvent( 137 { type: "click" }, 138 document.querySelector("#requests-list-file-button") 139 ); 140 testHeaders("file", "descending"); 141 await testContents([4, 3, 2, 1, 0]); 142 143 info("Testing file sort, ascending. Checking sort loops correctly."); 144 EventUtils.sendMouseEvent( 145 { type: "click" }, 146 document.querySelector("#requests-list-file-button") 147 ); 148 testHeaders("file", "ascending"); 149 await testContents([0, 1, 2, 3, 4]); 150 151 await showColumn(monitor, "path"); 152 info("Testing path sort, ascending."); 153 EventUtils.sendMouseEvent( 154 { type: "click" }, 155 document.querySelector("#requests-list-path-button") 156 ); 157 testHeaders("path", "ascending"); 158 await testContents([0, 1, 2, 3, 4]); 159 160 info("Testing path sort, descending."); 161 EventUtils.sendMouseEvent( 162 { type: "click" }, 163 document.querySelector("#requests-list-path-button") 164 ); 165 testHeaders("path", "descending"); 166 await testContents([4, 3, 2, 1, 0]); 167 168 info("Testing path sort, ascending. Checking sort loops correctly."); 169 EventUtils.sendMouseEvent( 170 { type: "click" }, 171 document.querySelector("#requests-list-path-button") 172 ); 173 testHeaders("path", "ascending"); 174 await testContents([0, 1, 2, 3, 4]); 175 176 info("Testing URL sort, ascending."); 177 EventUtils.sendMouseEvent( 178 { type: "click" }, 179 document.querySelector("#requests-list-url-button") 180 ); 181 testHeaders("url", "ascending"); 182 await testContents([0, 1, 2, 3, 4]); 183 184 info("Testing URL sort, descending."); 185 EventUtils.sendMouseEvent( 186 { type: "click" }, 187 document.querySelector("#requests-list-url-button") 188 ); 189 testHeaders("url", "descending"); 190 await testContents([4, 3, 2, 1, 0]); 191 192 info("Testing URL sort, ascending. Checking sort loops correctly."); 193 EventUtils.sendMouseEvent( 194 { type: "click" }, 195 document.querySelector("#requests-list-url-button") 196 ); 197 testHeaders("url", "ascending"); 198 await testContents([0, 1, 2, 3, 4]); 199 200 info("Testing type sort, ascending."); 201 EventUtils.sendMouseEvent( 202 { type: "click" }, 203 document.querySelector("#requests-list-type-button") 204 ); 205 testHeaders("type", "ascending"); 206 await testContents([0, 1, 2, 3, 4]); 207 208 info("Testing type sort, descending."); 209 EventUtils.sendMouseEvent( 210 { type: "click" }, 211 document.querySelector("#requests-list-type-button") 212 ); 213 testHeaders("type", "descending"); 214 await testContents([4, 3, 2, 1, 0]); 215 216 info("Testing type sort, ascending. Checking sort loops correctly."); 217 EventUtils.sendMouseEvent( 218 { type: "click" }, 219 document.querySelector("#requests-list-type-button") 220 ); 221 testHeaders("type", "ascending"); 222 await testContents([0, 1, 2, 3, 4]); 223 224 info("Testing transferred sort, ascending."); 225 EventUtils.sendMouseEvent( 226 { type: "click" }, 227 document.querySelector("#requests-list-transferred-button") 228 ); 229 testHeaders("transferred", "ascending"); 230 await testContents([0, 1, 2, 3, 4]); 231 232 info("Testing transferred sort, descending."); 233 EventUtils.sendMouseEvent( 234 { type: "click" }, 235 document.querySelector("#requests-list-transferred-button") 236 ); 237 testHeaders("transferred", "descending"); 238 await testContents([4, 3, 2, 1, 0]); 239 240 info("Testing transferred sort, ascending. Checking sort loops correctly."); 241 EventUtils.sendMouseEvent( 242 { type: "click" }, 243 document.querySelector("#requests-list-transferred-button") 244 ); 245 testHeaders("transferred", "ascending"); 246 await testContents([0, 1, 2, 3, 4]); 247 248 info("Testing size sort, ascending."); 249 EventUtils.sendMouseEvent( 250 { type: "click" }, 251 document.querySelector("#requests-list-contentSize-button") 252 ); 253 testHeaders("contentSize", "ascending"); 254 await testContents([0, 1, 2, 3, 4]); 255 256 info("Testing size sort, descending."); 257 EventUtils.sendMouseEvent( 258 { type: "click" }, 259 document.querySelector("#requests-list-contentSize-button") 260 ); 261 testHeaders("contentSize", "descending"); 262 await testContents([4, 3, 2, 1, 0]); 263 264 info("Testing size sort, ascending. Checking sort loops correctly."); 265 EventUtils.sendMouseEvent( 266 { type: "click" }, 267 document.querySelector("#requests-list-contentSize-button") 268 ); 269 testHeaders("contentSize", "ascending"); 270 await testContents([0, 1, 2, 3, 4]); 271 272 info("Testing waterfall sort, ascending."); 273 274 // Because the waterfall column is hidden when the network details panel is 275 // opened, the waterfall button is not visible. Therefore we hide the network 276 // details panel 277 await store.dispatch(Actions.toggleNetworkDetails()); 278 EventUtils.sendMouseEvent( 279 { type: "click" }, 280 document.querySelector("#requests-list-waterfall-button") 281 ); 282 await store.dispatch(Actions.toggleNetworkDetails()); 283 testHeaders("waterfall", "ascending"); 284 await testContents([0, 2, 4, 3, 1]); 285 286 info("Testing waterfall sort, descending."); 287 await store.dispatch(Actions.toggleNetworkDetails()); 288 EventUtils.sendMouseEvent( 289 { type: "click" }, 290 document.querySelector("#requests-list-waterfall-button") 291 ); 292 testHeaders("waterfall", "descending"); 293 await store.dispatch(Actions.toggleNetworkDetails()); 294 await testContents([4, 2, 0, 1, 3], true); 295 296 info("Testing waterfall sort, ascending. Checking sort loops correctly."); 297 await store.dispatch(Actions.toggleNetworkDetails()); 298 EventUtils.sendMouseEvent( 299 { type: "click" }, 300 document.querySelector("#requests-list-waterfall-button") 301 ); 302 testHeaders("waterfall", "ascending"); 303 await store.dispatch(Actions.toggleNetworkDetails()); 304 await testContents([0, 2, 4, 3, 1]); 305 306 return teardown(monitor); 307 308 function getSelectedIndex(state) { 309 if (!state.requests.selectedId) { 310 return -1; 311 } 312 return getSortedRequests(state).findIndex( 313 r => r.id === state.requests.selectedId 314 ); 315 } 316 317 function testHeaders(sortType, direction) { 318 const doc = monitor.panelWin.document; 319 const target = doc.querySelector("#requests-list-" + sortType + "-button"); 320 const headers = doc.querySelectorAll(".requests-list-header-button"); 321 322 for (const header of headers) { 323 if (header != target) { 324 ok( 325 !header.hasAttribute("data-sorted"), 326 "The " + 327 header.id + 328 " header does not have a 'data-sorted' attribute." 329 ); 330 ok( 331 !header 332 .getAttribute("title") 333 .includes(L10N.getStr("networkMenu.sortedAsc")) && 334 !header 335 .getAttribute("title") 336 .includes(L10N.getStr("networkMenu.sortedDesc")), 337 "The " + 338 header.id + 339 " header does not include any sorting in the 'title' attribute." 340 ); 341 } else { 342 is( 343 header.getAttribute("data-sorted"), 344 direction, 345 "The " + header.id + " header has a correct 'data-sorted' attribute." 346 ); 347 const sorted = 348 direction == "ascending" 349 ? L10N.getStr("networkMenu.sortedAsc") 350 : L10N.getStr("networkMenu.sortedDesc"); 351 ok( 352 header.getAttribute("title").includes(sorted), 353 "The " + 354 header.id + 355 " header includes the used sorting in the 'title' attribute." 356 ); 357 } 358 } 359 } 360 361 async function testContents([a, b, c, d, e], waterfall = false) { 362 isnot( 363 getSelectedRequest(store.getState()), 364 undefined, 365 "There should still be a selected item after sorting." 366 ); 367 if (!waterfall) { 368 is( 369 getSelectedIndex(store.getState()), 370 a, 371 "The first item should be still selected after sorting." 372 ); 373 } 374 is( 375 !!document.querySelector(".network-details-bar"), 376 true, 377 "The network details panel should still be visible after sorting." 378 ); 379 380 is( 381 getSortedRequests(store.getState()).length, 382 5, 383 "There should be a total of 5 items in the requests menu." 384 ); 385 is( 386 getDisplayedRequests(store.getState()).length, 387 5, 388 "There should be a total of 5 visible items in the requests menu." 389 ); 390 is( 391 document.querySelectorAll(".request-list-item").length, 392 5, 393 "The visible items in the requests menu are, in fact, visible!" 394 ); 395 396 const requestItems = document.querySelectorAll(".request-list-item"); 397 for (const requestItem of requestItems) { 398 requestItem.scrollIntoView(); 399 const requestsListStatus = requestItem.querySelector(".status-code"); 400 EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus); 401 await waitUntil(() => requestsListStatus.title); 402 } 403 404 await verifyRequestItemTarget( 405 document, 406 getDisplayedRequests(store.getState()), 407 getSortedRequests(store.getState())[a], 408 "GET1", 409 SORTING_SJS + "?index=1", 410 { 411 fuzzyUrl: true, 412 status: 101, 413 statusText: "Meh", 414 type: "1", 415 fullMimeType: "text/1", 416 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 198), 417 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), 418 } 419 ); 420 await verifyRequestItemTarget( 421 document, 422 getDisplayedRequests(store.getState()), 423 getSortedRequests(store.getState())[b], 424 "GET2", 425 SORTING_SJS + "?index=2", 426 { 427 fuzzyUrl: true, 428 status: 200, 429 statusText: "Meh", 430 type: "2", 431 fullMimeType: "text/2", 432 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 217), 433 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19), 434 } 435 ); 436 await verifyRequestItemTarget( 437 document, 438 getDisplayedRequests(store.getState()), 439 getSortedRequests(store.getState())[c], 440 "GET3", 441 SORTING_SJS + "?index=3", 442 { 443 fuzzyUrl: true, 444 status: 300, 445 statusText: "Meh", 446 type: "3", 447 fullMimeType: "text/3", 448 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 227), 449 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), 450 } 451 ); 452 await verifyRequestItemTarget( 453 document, 454 getDisplayedRequests(store.getState()), 455 getSortedRequests(store.getState())[d], 456 "GET4", 457 SORTING_SJS + "?index=4", 458 { 459 fuzzyUrl: true, 460 status: 400, 461 statusText: "Meh", 462 type: "4", 463 fullMimeType: "text/4", 464 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 237), 465 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39), 466 } 467 ); 468 await verifyRequestItemTarget( 469 document, 470 getDisplayedRequests(store.getState()), 471 getSortedRequests(store.getState())[e], 472 "GET5", 473 SORTING_SJS + "?index=5", 474 { 475 fuzzyUrl: true, 476 status: 500, 477 statusText: "Meh", 478 type: "5", 479 fullMimeType: "text/5", 480 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 247), 481 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49), 482 } 483 ); 484 } 485 });