tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_net_complex-params.js (8394B)

      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 whether complex request params and payload sent via POST are
      8 * displayed correctly.
      9 */
     10 
     11 add_task(async function () {
     12  const { tab, monitor } = await initNetMonitor(PARAMS_URL, {
     13    requestCount: 1,
     14  });
     15  info("Starting test... ");
     16 
     17  const { document, store, windowRequire } = monitor.panelWin;
     18  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
     19 
     20  store.dispatch(Actions.batchEnable(false));
     21 
     22  // Execute requests.
     23  await performRequests(monitor, tab, 12);
     24 
     25  const requestListItems = document.querySelectorAll(
     26    ".network-monitor .request-list-item"
     27  );
     28 
     29  // Select the Request tab.
     30  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItems[0]);
     31  clickOnSidebarTab(document, "request");
     32 
     33  await testRequestWithFormattedView(
     34    monitor,
     35    requestListItems[0],
     36    '{ "foo": "bar" }',
     37    "",
     38    '{ "foo": "bar" }',
     39    1
     40  );
     41  await testRequestWithFormattedView(
     42    monitor,
     43    requestListItems[1],
     44    '{ "foo": "bar" }',
     45    "",
     46    '{ "foo": "bar" }',
     47    1
     48  );
     49  await testRequestWithFormattedView(
     50    monitor,
     51    requestListItems[2],
     52    "?foo",
     53    "bar=123=xyz",
     54    "?foo=bar=123=xyz",
     55    1
     56  );
     57  await testRequestWithFormattedView(
     58    monitor,
     59    requestListItems[3],
     60    "foo",
     61    "bar",
     62    '{ "foo": "bar" }',
     63    2
     64  );
     65  await testRequestWithFormattedView(
     66    monitor,
     67    requestListItems[4],
     68    "foo",
     69    "bar",
     70    '{ "foo": "bar" }',
     71    2
     72  );
     73  await testRequestWithOnlyRawDataView(
     74    monitor,
     75    requestListItems[5],
     76    "?foo=bar"
     77  );
     78  await testRequestWithoutRequestData(monitor, requestListItems[6]);
     79  await testRequestWithFormattedView(
     80    monitor,
     81    requestListItems[7],
     82    '{ "foo": "bar" }',
     83    "",
     84    '{ "foo": "bar" }',
     85    1
     86  );
     87  await testRequestWithFormattedView(
     88    monitor,
     89    requestListItems[8],
     90    '{ "foo": "bar" }',
     91    "",
     92    '{ "foo": "bar" }',
     93    1
     94  );
     95 
     96  await teardown(monitor);
     97 });
     98 
     99 async function testRequestWithFormattedView(
    100  monitor,
    101  requestListItem,
    102  paramName,
    103  paramValue,
    104  rawValue,
    105  dataType
    106 ) {
    107  const { document, windowRequire } = monitor.panelWin;
    108  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");
    109 
    110  // Wait for header and properties view to be displayed
    111  const wait = waitForDOM(document, "#request-panel .data-header");
    112  let waitForContent = waitForDOM(document, "#request-panel .properties-view");
    113  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
    114  await Promise.all([wait, waitForContent]);
    115 
    116  const tabpanel = document.querySelector("#request-panel");
    117  let headerLabel;
    118  switch (dataType) {
    119    case 1:
    120      headerLabel = L10N.getStr("paramsFormData");
    121      break;
    122 
    123    case 2:
    124      headerLabel = L10N.getStr("jsonScopeName");
    125      break;
    126  }
    127 
    128  is(
    129    tabpanel.querySelectorAll(".raw-data-toggle").length,
    130    1,
    131    "The raw request data toggle should be displayed in this tabpanel."
    132  );
    133  is(
    134    tabpanel.querySelectorAll("tr.treeRow").length,
    135    1,
    136    "The number of param rows displayed in this tabpanel is incorrect."
    137  );
    138  Assert.strictEqual(
    139    tabpanel.querySelector(".empty-notice"),
    140    null,
    141    "The empty notice should not be displayed in this tabpanel."
    142  );
    143 
    144  ok(
    145    tabpanel.querySelector(".treeTable"),
    146    "The request params box should be displayed."
    147  );
    148  Assert.strictEqual(
    149    tabpanel.querySelector(".cm-content"),
    150    null,
    151    "The request post data editor should not be displayed."
    152  );
    153 
    154  const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
    155  const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
    156 
    157  is(
    158    tabpanel.querySelector(".data-label").textContent,
    159    headerLabel,
    160    "The form data section doesn't have the correct title."
    161  );
    162 
    163  is(
    164    labels[0].textContent,
    165    paramName,
    166    "The first form data param name was incorrect."
    167  );
    168  is(
    169    values[0].textContent,
    170    `"${paramValue}"`,
    171    "The first form data param value was incorrect."
    172  );
    173 
    174  // Toggle the raw data display. This should hide the formatted display.
    175  waitForContent = waitForDOM(document, "#request-panel .cm-content");
    176  let rawDataToggle = document.querySelector(
    177    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
    178  );
    179  clickElement(rawDataToggle, monitor);
    180  await waitForContent;
    181 
    182  const dataLabel = tabpanel.querySelector(".data-label") ?? {};
    183  is(
    184    dataLabel.textContent,
    185    L10N.getStr("paramsPostPayload"),
    186    "The label for the raw request payload is correct."
    187  );
    188  is(
    189    tabpanel.querySelector(".raw-data-toggle-input .devtools-checkbox-toggle")
    190      .checked,
    191    true,
    192    "The raw request toggle should be on."
    193  );
    194  is(
    195    tabpanel.querySelector(".properties-view") === null,
    196    true,
    197    "The formatted display should be hidden."
    198  );
    199  is(
    200    tabpanel.querySelector(".cm-content") !== null,
    201    true,
    202    "The raw payload data display is shown."
    203  );
    204  is(
    205    getCodeMirrorValue(monitor),
    206    rawValue,
    207    "The raw payload data string needs to be correct."
    208  );
    209  Assert.strictEqual(
    210    tabpanel.querySelector(".empty-notice"),
    211    null,
    212    "The empty notice should not be displayed in this tabpanel."
    213  );
    214 
    215  // Toggle the raw data display off again. This should show the formatted display.
    216  // This is required to reset the original state
    217  waitForContent = waitForDOM(document, "#request-panel .properties-view");
    218  rawDataToggle = document.querySelector(
    219    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
    220  );
    221 
    222  // Use keyboard to uncheck the toggle so we test Bug 1917296
    223  rawDataToggle.focus();
    224  EventUtils.synthesizeKey("VK_SPACE", {}, rawDataToggle.ownerGlobal);
    225  await waitForContent;
    226  ok(!rawDataToggle.checked, "Raw toggle is unchecked");
    227 }
    228 
    229 async function testRequestWithOnlyRawDataView(
    230  monitor,
    231  requestListItem,
    232  paramName
    233 ) {
    234  const { document, windowRequire } = monitor.panelWin;
    235  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");
    236 
    237  // Wait for header and CodeMirror editor to be displayed
    238  const wait = waitForDOM(document, "#request-panel .data-header");
    239  const waitForContent = waitForDOM(document, "#request-panel .cm-content");
    240  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
    241  await Promise.all([wait, waitForContent]);
    242 
    243  const tabpanel = document.querySelector("#request-panel");
    244 
    245  const dataLabel = tabpanel.querySelector(".data-label") ?? {};
    246  is(
    247    dataLabel.textContent,
    248    L10N.getStr("paramsPostPayload"),
    249    "The label for the raw request payload is correct."
    250  );
    251  is(
    252    tabpanel.querySelectorAll(".raw-data-toggle").length,
    253    0,
    254    "The raw request data toggle should not be displayed in this tabpanel."
    255  );
    256  is(
    257    tabpanel.querySelector(".properties-view") === null,
    258    true,
    259    "The formatted display should be hidden."
    260  );
    261  is(
    262    tabpanel.querySelector(".cm-content") !== null,
    263    true,
    264    "The raw payload data display is shown."
    265  );
    266  is(
    267    getCodeMirrorValue(monitor),
    268    paramName,
    269    "The raw payload data string needs to be correct."
    270  );
    271  Assert.strictEqual(
    272    tabpanel.querySelector(".empty-notice"),
    273    null,
    274    "The empty notice should not be displayed in this tabpanel."
    275  );
    276 }
    277 
    278 async function testRequestWithoutRequestData(monitor, requestListItem) {
    279  const { document } = monitor.panelWin;
    280 
    281  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
    282 
    283  const tabpanel = document.querySelector("#request-panel");
    284 
    285  is(
    286    tabpanel.querySelector(".data-label") === null,
    287    true,
    288    "There must be no label for the request payload."
    289  );
    290  is(
    291    tabpanel.querySelectorAll(".raw-data-toggle").length,
    292    0,
    293    "The raw request data toggle should not be displayed in this tabpanel."
    294  );
    295  is(
    296    tabpanel.querySelector(".properties-view") === null,
    297    true,
    298    "The formatted display should be hidden."
    299  );
    300  is(
    301    tabpanel.querySelector(".cm-content") === null,
    302    true,
    303    "The raw payload data display should be hidden."
    304  );
    305  is(
    306    tabpanel.querySelector(".empty-notice") !== null,
    307    true,
    308    "The empty notice should be displayed in this tabpanel."
    309  );
    310  is(
    311    tabpanel.querySelector(".empty-notice").textContent,
    312    L10N.getStr("paramsNoPayloadText"),
    313    "The empty notice should be correct."
    314  );
    315 }