browser_net_sort-reset.js (8715B)
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 testHeaders(); 61 await testContents([0, 2, 4, 3, 1]); 62 63 EventUtils.sendMouseEvent( 64 { type: "click" }, 65 document.querySelector("#requests-list-status-button") 66 ); 67 info("Testing sort reset using middle click."); 68 EventUtils.sendMouseEvent( 69 { type: "click", button: 1 }, 70 document.querySelector("#requests-list-status-button") 71 ); 72 testHeaders(); 73 await testContents([0, 2, 4, 3, 1]); 74 75 EventUtils.sendMouseEvent( 76 { type: "click" }, 77 document.querySelector("#requests-list-status-button") 78 ); 79 info("Testing sort reset using context menu 'Reset Sorting'"); 80 EventUtils.sendMouseEvent( 81 { type: "contextmenu" }, 82 document.querySelector("#requests-list-contentSize-button") 83 ); 84 await selectContextMenuItem(monitor, "request-list-header-reset-sorting"); 85 testHeaders(); 86 await testContents([0, 2, 4, 3, 1]); 87 88 EventUtils.sendMouseEvent( 89 { type: "click" }, 90 document.querySelector("#requests-list-status-button") 91 ); 92 info("Testing sort reset using context menu 'Reset Columns'"); 93 EventUtils.sendMouseEvent( 94 { type: "contextmenu" }, 95 document.querySelector("#requests-list-contentSize-button") 96 ); 97 await selectContextMenuItem(monitor, "request-list-header-reset-columns"); 98 testHeaders(); 99 // add columns because verifyRequestItemTarget expects some extra columns 100 await showColumn(monitor, "protocol"); 101 await showColumn(monitor, "remoteip"); 102 await showColumn(monitor, "scheme"); 103 await showColumn(monitor, "duration"); 104 await showColumn(monitor, "latency"); 105 await testContents([0, 2, 4, 3, 1]); 106 107 return teardown(monitor); 108 109 function getSelectedIndex(state) { 110 if (!state.requests.selectedId) { 111 return -1; 112 } 113 return getSortedRequests(state).findIndex( 114 r => r.id === state.requests.selectedId 115 ); 116 } 117 118 function testHeaders(sortType, direction) { 119 const doc = monitor.panelWin.document; 120 const target = doc.querySelector("#requests-list-" + sortType + "-button"); 121 const headers = doc.querySelectorAll(".requests-list-header-button"); 122 123 for (const header of headers) { 124 if (header != target) { 125 ok( 126 !header.hasAttribute("data-sorted"), 127 "The " + 128 header.id + 129 " header does not have a 'data-sorted' attribute." 130 ); 131 ok( 132 !header 133 .getAttribute("title") 134 .includes(L10N.getStr("networkMenu.sortedAsc")) && 135 !header 136 .getAttribute("title") 137 .includes(L10N.getStr("networkMenu.sortedDesc")), 138 "The " + 139 header.id + 140 " header does not include any sorting in the 'title' attribute." 141 ); 142 } else { 143 is( 144 header.getAttribute("data-sorted"), 145 direction, 146 "The " + header.id + " header has a correct 'data-sorted' attribute." 147 ); 148 const sorted = 149 direction == "ascending" 150 ? L10N.getStr("networkMenu.sortedAsc") 151 : L10N.getStr("networkMenu.sortedDesc"); 152 ok( 153 header.getAttribute("title").includes(sorted), 154 "The " + 155 header.id + 156 " header includes the used sorting in the 'title' attribute." 157 ); 158 } 159 } 160 } 161 162 async function testContents([a, b, c, d, e]) { 163 await waitForAllNetworkUpdateEvents(); 164 isnot( 165 getSelectedRequest(store.getState()), 166 undefined, 167 "There should still be a selected item after sorting." 168 ); 169 is( 170 getSelectedIndex(store.getState()), 171 a, 172 "The first item should be still selected after sorting." 173 ); 174 is( 175 !!document.querySelector(".network-details-bar"), 176 true, 177 "The network details panel should still be visible after sorting." 178 ); 179 180 is( 181 getSortedRequests(store.getState()).length, 182 5, 183 "There should be a total of 5 items in the requests menu." 184 ); 185 is( 186 getDisplayedRequests(store.getState()).length, 187 5, 188 "There should be a total of 5 visible items in the requests menu." 189 ); 190 is( 191 document.querySelectorAll(".request-list-item").length, 192 5, 193 "The visible items in the requests menu are, in fact, visible!" 194 ); 195 196 const requestItems = document.querySelectorAll(".request-list-item"); 197 for (const requestItem of requestItems) { 198 requestItem.scrollIntoView(); 199 const requestsListStatus = requestItem.querySelector(".status-code"); 200 EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus); 201 await waitUntil(() => requestsListStatus.title); 202 } 203 204 await verifyRequestItemTarget( 205 document, 206 getDisplayedRequests(store.getState()), 207 getSortedRequests(store.getState())[a], 208 "GET1", 209 SORTING_SJS + "?index=1", 210 { 211 fuzzyUrl: true, 212 status: 101, 213 statusText: "Meh", 214 type: "1", 215 fullMimeType: "text/1", 216 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 198), 217 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), 218 } 219 ); 220 await verifyRequestItemTarget( 221 document, 222 getDisplayedRequests(store.getState()), 223 getSortedRequests(store.getState())[b], 224 "GET2", 225 SORTING_SJS + "?index=2", 226 { 227 fuzzyUrl: true, 228 status: 200, 229 statusText: "Meh", 230 type: "2", 231 fullMimeType: "text/2", 232 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 217), 233 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19), 234 } 235 ); 236 await verifyRequestItemTarget( 237 document, 238 getDisplayedRequests(store.getState()), 239 getSortedRequests(store.getState())[c], 240 "GET3", 241 SORTING_SJS + "?index=3", 242 { 243 fuzzyUrl: true, 244 status: 300, 245 statusText: "Meh", 246 type: "3", 247 fullMimeType: "text/3", 248 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 227), 249 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), 250 } 251 ); 252 await verifyRequestItemTarget( 253 document, 254 getDisplayedRequests(store.getState()), 255 getSortedRequests(store.getState())[d], 256 "GET4", 257 SORTING_SJS + "?index=4", 258 { 259 fuzzyUrl: true, 260 status: 400, 261 statusText: "Meh", 262 type: "4", 263 fullMimeType: "text/4", 264 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 237), 265 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39), 266 } 267 ); 268 await verifyRequestItemTarget( 269 document, 270 getDisplayedRequests(store.getState()), 271 getSortedRequests(store.getState())[e], 272 "GET5", 273 SORTING_SJS + "?index=5", 274 { 275 fuzzyUrl: true, 276 status: 500, 277 statusText: "Meh", 278 type: "5", 279 fullMimeType: "text/5", 280 transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 247), 281 size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49), 282 } 283 ); 284 } 285 });