devtools/client/netmonitor/test/browser_net_pane-network-details.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 the action of request details panel when filters are applied.
   8  * If there are any visible requests, the first request from the
   9  * list of visible requests should be displayed in the network
  10  * details panel
  11  * If there are no visible requests the panel should remain closed
  12  */
  13
  14 const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = [
  15   {
  16     url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined&text=Sample",
  17   },
  18   { url: "sjs_content-type-test-server.sjs?fmt=css&text=sample" },
  19   { url: "sjs_content-type-test-server.sjs?fmt=js&text=sample" },
  20   { url: "sjs_content-type-test-server.sjs?fmt=font" },
  21   { url: "sjs_content-type-test-server.sjs?fmt=image" },
  22   { url: "sjs_content-type-test-server.sjs?fmt=audio" },
  23   { url: "sjs_content-type-test-server.sjs?fmt=video" },
  24   { url: "sjs_content-type-test-server.sjs?fmt=flash" },
  25   { url: "sjs_content-type-test-server.sjs?fmt=ws" },
  26 ];
  27
  28 add_task(async function () {
  29   const { monitor } = await initNetMonitor(FILTERING_URL, { requestCount: 1 });
  30   const { document, store, windowRequire } = monitor.panelWin;
  31   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  32   const { getSelectedRequest, getSortedRequests } = windowRequire(
  33     "devtools/client/netmonitor/src/selectors/index"
  34   );
  35
  36   store.dispatch(Actions.batchEnable(false));
  37
  38   function setFreetextFilter(value) {
  39     store.dispatch(Actions.setRequestFilterText(value));
  40   }
  41
  42   info("Starting test... ");
  43
  44   const wait = waitForNetworkEvents(monitor, 9);
  45   await performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
  46   await wait;
  47
  48   info("Test with the first request in the list visible");
  49   EventUtils.sendMouseEvent(
  50     { type: "click" },
  51     document.querySelector(".requests-list-filter-all-button")
  52   );
  53   testDetailsPanel(true, 0);
  54
  55   info("Test with first request in the list not visible");
  56   EventUtils.sendMouseEvent(
  57     { type: "click" },
  58     document.querySelector(".requests-list-filter-all-button")
  59   );
  60   EventUtils.sendMouseEvent(
  61     { type: "click" },
  62     document.querySelector(".requests-list-filter-js-button")
  63   );
  64   testFilterButtons(monitor, "js");
  65   testDetailsPanel(true, 2);
  66
  67   info(
  68     "Test with no request in the list visible i.e. no request match the filters"
  69   );
  70   EventUtils.sendMouseEvent(
  71     { type: "click" },
  72     document.querySelector(".requests-list-filter-all-button")
  73   );
  74   setFreetextFilter("foobar");
  75   // The network details panel should not open as there are no available requests visible
  76   testDetailsPanel(false);
  77
  78   await teardown(monitor);
  79
  80   function getSelectedIndex(state) {
  81     if (!state.requests.selectedId) {
  82       return -1;
  83     }
  84     return getSortedRequests(state).findIndex(
  85       r => r.id === state.requests.selectedId
  86     );
  87   }
  88
  89   function testDetailsPanel(shouldPanelOpen, selectedItemIndex = 0) {
  90     // Expected default state should be panel closed
  91     ok(
  92       !document.querySelector(".sidebar-toggle"),
  93       "The pane toggle button should not be visible."
  94     );
  95     is(
  96       !!document.querySelector(".network-details-bar"),
  97       false,
  98       "The details pane should still be hidden."
  99     );
 100     is(
 101       getSelectedRequest(store.getState()),
 102       undefined,
 103       "There should still be no selected item in the requests menu."
 104     );
 105
 106     // Trigger the details panel toggle action
 107     store.dispatch(Actions.toggleNetworkDetails());
 108
 109     const toggleButton = document.querySelector(".sidebar-toggle");
 110
 111     if (shouldPanelOpen) {
 112       is(
 113         toggleButton.classList.contains("pane-collapsed"),
 114         false,
 115         "The pane toggle button should now indicate that the details pane is " +
 116           "not collapsed anymore after being pressed."
 117       );
 118       is(
 119         !!document.querySelector(".network-details-bar"),
 120         true,
 121         "The details pane should not be hidden after toggle button was pressed."
 122       );
 123       isnot(
 124         getSelectedRequest(store.getState()),
 125         undefined,
 126         "There should be a selected item in the requests menu."
 127       );
 128       is(
 129         getSelectedIndex(store.getState()),
 130         selectedItemIndex,
 131         `The item index ${selectedItemIndex} should be selected in the requests menu.`
 132       );
 133       // Close the panel
 134       EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
 135     } else {
 136       ok(!toggleButton, "The pane toggle button should be not visible.");
 137       is(
 138         !!document.querySelector(".network-details-bar"),
 139         false,
 140         "The details pane should still be hidden."
 141       );
 142       is(
 143         getSelectedRequest(store.getState()),
 144         undefined,
 145         "There should still be no selected item in the requests menu."
 146       );
 147     }
 148   }
 149 });