tor-browser

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

browser_net_ws-json-action-cable-payload.js (3285B)

      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 action cable messages are 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(`{"data":"{\\"x\\":2}"}`);
     27  });
     28  await onNetworkEvents;
     29 
     30  const requests = document.querySelectorAll(".request-list-item");
     31  is(requests.length, 1, "There should be one request");
     32 
     33  // Wait for all sent/received messages to be displayed in DevTools
     34  let wait = waitForDOM(
     35    document,
     36    "#messages-view .message-list-table .message-list-item",
     37    2
     38  );
     39 
     40  // Select the first request
     41  EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]);
     42 
     43  // Click on the "Response" panel
     44  await clickOnSidebarTab(document, "response");
     45  await wait;
     46 
     47  // Get all messages present in the "Response" panel
     48  const frames = document.querySelectorAll(
     49    "#messages-view .message-list-table .message-list-item"
     50  );
     51 
     52  // Check expected results
     53  is(frames.length, 2, "There should be two frames");
     54 
     55  // Wait for next tick to do async stuff (The MessagePayload component uses the async function getMessagePayload)
     56  await waitForTick();
     57  const waitForData = waitForDOM(document, "#messages-view .properties-view");
     58  const [requestFrame] = frames;
     59  EventUtils.sendMouseEvent({ type: "mousedown" }, requestFrame);
     60 
     61  await waitForData;
     62 
     63  is(
     64    document.querySelector("#messages-view .data-label").innerText,
     65    "Action Cable",
     66    "The Action Cable payload panel should be displayed"
     67  );
     68 
     69  ok(
     70    document.querySelector("#messages-view .treeTable"),
     71    "A tree table should be used to display the formatted payload"
     72  );
     73 
     74  ok(
     75    document.getElementById("/data"),
     76    "The 'data' property should be displayed"
     77  );
     78  ok(
     79    document.getElementById("/data/x"),
     80    "The 'x' property in the 'data' object should be displayed"
     81  );
     82 
     83  // Toggle raw data display
     84  wait = waitForDOM(document, "#messages-view .message-rawData-payload");
     85  const rawDataToggle = document.querySelector(
     86    "#messages-view .devtools-checkbox-toggle"
     87  );
     88  clickElement(rawDataToggle, monitor);
     89  await wait;
     90 
     91  is(
     92    document.querySelector("#messages-view .data-label").innerText,
     93    "Raw Data (20 B)",
     94    "The raw data payload info should be displayed"
     95  );
     96 
     97  is(
     98    document.querySelector("#messages-view .message-rawData-payload").value,
     99    `{"data":"{\\"x\\":2}"}`,
    100    "The raw data must be shown correctly"
    101  );
    102 
    103  // Close WS connection
    104  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
    105    await content.wrappedJSObject.closeConnection();
    106  });
    107 
    108  await teardown(monitor);
    109 });