devtools/client/netmonitor/test/browser_net_jsonp.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  * Tests if JSONP responses are handled 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 { tab, monitor } = await initNetMonitor(JSONP_URL, { requestCount: 1 });
  16   info("Starting test... ");
  17
  18   const { document, store, windowRequire } = monitor.panelWin;
  19   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  20   const { getDisplayedRequests, getSortedRequests } = windowRequire(
  21     "devtools/client/netmonitor/src/selectors/index"
  22   );
  23
  24   store.dispatch(Actions.batchEnable(false));
  25
  26   // Execute requests.
  27   await performRequests(monitor, tab, 2);
  28
  29   const requestItems = document.querySelectorAll(".request-list-item");
  30   for (const requestItem of requestItems) {
  31     requestItem.scrollIntoView();
  32     const requestsListStatus = requestItem.querySelector(".status-code");
  33     EventUtils.sendMouseEvent({ type: "mouseover" }, requestsListStatus);
  34     await waitUntil(() => requestsListStatus.title);
  35     await waitForDOMIfNeeded(requestItem, ".requests-list-timings-total");
  36   }
  37
  38   verifyRequestItemTarget(
  39     document,
  40     getDisplayedRequests(store.getState()),
  41     getSortedRequests(store.getState())[0],
  42     "GET",
  43     CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun",
  44     {
  45       status: 200,
  46       statusText: "OK",
  47       type: "json",
  48       fullMimeType: "text/json; charset=utf-8",
  49       size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
  50       time: true,
  51     }
  52   );
  53   verifyRequestItemTarget(
  54     document,
  55     getDisplayedRequests(store.getState()),
  56     getSortedRequests(store.getState())[1],
  57     "GET",
  58     CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad",
  59     {
  60       status: 200,
  61       statusText: "OK",
  62       type: "json",
  63       fullMimeType: "text/json; charset=utf-8",
  64       size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 54),
  65       time: true,
  66     }
  67   );
  68
  69   info("Testing first request");
  70   let wait = waitForDOM(document, "#response-panel .data-header");
  71   let waitForPropsView = waitForDOM(
  72     document,
  73     "#response-panel .properties-view",
  74     1
  75   );
  76
  77   store.dispatch(Actions.toggleNetworkDetails());
  78   clickOnSidebarTab(document, "response");
  79   await Promise.all([wait, waitForPropsView]);
  80
  81   testJsonSectionInResponseTab(`"Hello JSONP!"`);
  82
  83   wait = waitForDOM(document, "#response-panel .CodeMirror-code");
  84   let rawResponseToggle = document.querySelector(
  85     "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle"
  86   );
  87   clickElement(rawResponseToggle, monitor);
  88   await wait;
  89
  90   testResponseTab("$_0123Fun");
  91
  92   info("Testing second request");
  93
  94   wait = waitForDOM(document, "#response-panel .data-header");
  95   EventUtils.sendMouseEvent(
  96     { type: "mousedown" },
  97     document.querySelectorAll(".request-list-item")[1]
  98   );
  99
 100   await wait;
 101
 102   waitForPropsView = waitForDOM(
 103     document,
 104     "#response-panel .properties-view",
 105     1
 106   );
 107   rawResponseToggle = document.querySelector(
 108     "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle"
 109   );
 110   clickElement(rawResponseToggle, monitor);
 111
 112   await waitForPropsView;
 113
 114   testJsonSectionInResponseTab(`"Hello weird JSONP!"`);
 115
 116   wait = waitForDOM(document, "#response-panel .CodeMirror-code");
 117   rawResponseToggle = document.querySelector(
 118     "#response-panel .raw-data-toggle-input .devtools-checkbox-toggle"
 119   );
 120   clickElement(rawResponseToggle, monitor);
 121   await wait;
 122
 123   testResponseTab("$_4567Sad");
 124
 125   await teardown(monitor);
 126
 127   function testJsonSectionInResponseTab(greeting) {
 128     const tabpanel = document.querySelector("#response-panel");
 129     is(
 130       tabpanel.querySelectorAll(".treeRow").length,
 131       1,
 132       "There should be 1 json properties displayed in this tabpanel."
 133     );
 134
 135     const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
 136     const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
 137
 138     is(
 139       labels[0].textContent,
 140       "greeting",
 141       "The first json property name was incorrect."
 142     );
 143     is(
 144       values[0].textContent,
 145       greeting,
 146       "The first json property value was incorrect."
 147     );
 148   }
 149
 150   function testResponseTab(func) {
 151     const tabpanel = document.querySelector("#response-panel");
 152
 153     is(
 154       tabpanel.querySelector(".response-error-header") === null,
 155       true,
 156       "The response error header doesn't have the intended visibility."
 157     );
 158     is(
 159       tabpanel.querySelector(".data-label").textContent,
 160       L10N.getFormatStr("jsonpScopeName", func),
 161       "The response json view has the intened visibility and correct title."
 162     );
 163     is(
 164       tabpanel.querySelector(".CodeMirror-code") === null,
 165       false,
 166       "The response editor has the intended visibility."
 167     );
 168     is(
 169       tabpanel.querySelector(".responseImageBox") === null,
 170       true,
 171       "The response image box doesn't have the intended visibility."
 172     );
 173     is(
 174       tabpanel.querySelectorAll(".empty-notice").length,
 175       0,
 176       "The empty notice should not be displayed in this tabpanel."
 177     );
 178   }
 179 });