devtools/client/netmonitor/test/browser_net_ws-json-stomp-payload.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 that WebSocket payloads containing an array of STOMP 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(
  27       `[\"SEND\\nx-firefox-test:true\\ncontent-length:17\\n\\n[{\\\"key\\\":\\\"value\\\"}]\\u0000\"]`
  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   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(
  77     document.getElementById("/0/command"),
  78     "The message 'command' should be displayed"
  79   );
  80   ok(
  81     document.getElementById("/0/headers"),
  82     "The message 'headers' should be displayed"
  83   );
  84   ok(
  85     document.getElementById("/0/body"),
  86     "The message 'body' should be displayed"
  87   );
  88
  89   // Toggle raw data display
  90   wait = waitForDOM(document, "#messages-view .message-rawData-payload");
  91   const rawDataToggle = document.querySelector(
  92     "#messages-view .devtools-checkbox-toggle"
  93   );
  94   clickElement(rawDataToggle, monitor);
  95   await wait;
  96
  97   is(
  98     document.querySelector("#messages-view .data-label").innerText,
  99     "Raw Data (79 B)",
 100     "The raw data payload info should be displayed"
 101   );
 102
 103   is(
 104     document.querySelector("#messages-view .message-rawData-payload").value,
 105     `[\"SEND\\nx-firefox-test:true\\ncontent-length:17\\n\\n[{\\\"key\\\":\\\"value\\\"}]\\u0000\"]`,
 106     "The raw data must be shown correctly"
 107   );
 108
 109   // Close WS connection
 110   await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
 111     await content.wrappedJSObject.closeConnection();
 112   });
 113
 114   await teardown(monitor);
 115 });