tor-browser

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

browser_net_ws-json-payload.js (3788B)

      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 that WebSocket payloads containing a basic JSON message is parsed
      8 * correctly and displayed in a user friendly way
      9 */
     10 
     11 add_task(async function () {
     12  const { tab, monitor } = await initNetMonitor(WS_PAGE_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  // Wait for WS connections to be established + send messages
     23  const onNetworkEvents = waitForNetworkEvents(monitor, 1);
     24  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
     25    await content.wrappedJSObject.openConnection(0);
     26    content.wrappedJSObject.sendData(
     27      `{\"foo\":{\"x\":1,\"y\":2}, \"bar\":{\"x\":1,\"y\":2}}`
     28    );
     29  });
     30  await onNetworkEvents;
     31 
     32  const requests = document.querySelectorAll(".request-list-item");
     33  is(requests.length, 1, "There should be one request");
     34 
     35  // Wait for all sent/received messages to be displayed in DevTools
     36  let wait = waitForDOM(
     37    document,
     38    "#messages-view .message-list-table .message-list-item",
     39    2
     40  );
     41 
     42  // Select the first request
     43  EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]);
     44 
     45  // Click on the "Response" panel
     46  await clickOnSidebarTab(document, "response");
     47  await wait;
     48 
     49  // Get all messages present in the "Response" panel
     50  const frames = document.querySelectorAll(
     51    "#messages-view .message-list-table .message-list-item"
     52  );
     53 
     54  // Check expected results
     55  is(frames.length, 2, "There should be two frames");
     56 
     57  // Wait for next tick to do async stuff (The MessagePayload component uses the async function getMessagePayload)
     58  await waitForTick();
     59  const waitForData = waitForDOM(document, "#messages-view .properties-view");
     60  const [requestFrame] = frames;
     61  EventUtils.sendMouseEvent({ type: "mousedown" }, requestFrame);
     62 
     63  await waitForData;
     64 
     65  is(
     66    document.querySelector("#messages-view .data-label").innerText,
     67    "JSON",
     68    "The JSON payload panel should be displayed"
     69  );
     70 
     71  ok(
     72    document.querySelector("#messages-view .treeTable"),
     73    "A tree table should be used to display the formatted payload"
     74  );
     75 
     76  ok(document.getElementById("/foo"), "The 'foo' property should be displayed");
     77  ok(
     78    document.getElementById("/foo/x"),
     79    "The 'x' property in the `foo` object should be displayed"
     80  );
     81  ok(
     82    document.getElementById("/bar/y"),
     83    "The 'y' property in the `bar` object should be displayed"
     84  );
     85 
     86  // Toggle raw data display
     87  wait = waitForDOM(document, "#messages-view .message-rawData-payload");
     88  const rawDataToggle = document.querySelector(
     89    "#messages-view .devtools-checkbox-toggle"
     90  );
     91  clickElement(rawDataToggle, monitor);
     92  await wait;
     93 
     94  is(
     95    document.querySelector("#messages-view .data-label").innerText,
     96    "Raw Data (42 B)",
     97    "The raw data payload info should be displayed"
     98  );
     99 
    100  is(
    101    document.querySelector("#messages-view .message-rawData-payload").value,
    102    `{\"foo\":{\"x\":1,\"y\":2}, \"bar\":{\"x\":1,\"y\":2}}`,
    103    "The raw data must be shown correctly"
    104  );
    105 
    106  // Uncheck the toggle with the keyboard so we test Bug 1917296
    107  ok(rawDataToggle.checked, "Raw toggle is checked");
    108  wait = waitForDOM(document, "#messages-view .data-label");
    109  rawDataToggle.focus();
    110  EventUtils.synthesizeKey("VK_SPACE", {}, rawDataToggle.ownerGlobal);
    111  await wait;
    112  ok(!rawDataToggle.checked, "Raw toggle is unchecked");
    113 
    114  // Close WS connection
    115  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
    116    await content.wrappedJSObject.closeConnection();
    117  });
    118 
    119  await teardown(monitor);
    120 });