devtools/client/netmonitor/test/browser_net_sort-02.js

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