devtools/client/netmonitor/test/browser_net_ws-messages-navigation.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 WS messages can be navigated between using the keyboard.
   8  */
   9
  10 add_task(async function () {
  11   const { tab, monitor } = await initNetMonitor(WS_PAGE_URL, {
  12     requestCount: 1,
  13   });
  14   info("Starting test... ");
  15
  16   const { document, store, windowRequire } = monitor.panelWin;
  17   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  18
  19   store.dispatch(Actions.batchEnable(false));
  20
  21   // Wait for WS connections to be established + send messages
  22   const onNetworkEvents = waitForNetworkEvents(monitor, 1);
  23   await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
  24     await content.wrappedJSObject.openConnection(0);
  25     // Send 5 WS messages
  26     Array(5)
  27       .fill(undefined)
  28       .forEach((_, index) => {
  29         content.wrappedJSObject.sendData(index);
  30       });
  31   });
  32   await onNetworkEvents;
  33
  34   const requests = document.querySelectorAll(".request-list-item");
  35   is(requests.length, 1, "There should be one request");
  36
  37   // Wait for all sent/received messages to be displayed in DevTools
  38   const wait = waitForDOM(
  39     document,
  40     "#messages-view .message-list-table .message-list-item",
  41     10
  42   );
  43
  44   // Select the first request
  45   EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]);
  46
  47   // Click on the "Response" panel
  48   clickOnSidebarTab(document, "response");
  49   await wait;
  50
  51   // Get all messages present in the "Response" panel
  52   const frames = document.querySelectorAll(
  53     "#messages-view .message-list-table .message-list-item"
  54   );
  55
  56   // Check expected results
  57   is(frames.length, 10, "There should be ten frames");
  58   // Wait for next tick to do async stuff (The MessagePayload component uses the async function getMessagePayload)
  59   await waitForTick();
  60
  61   const waitForSelected = waitForDOM(
  62     document,
  63     // The first message is actually the second child, there is a hidden row.
  64     `.message-list-item:nth-child(${2}).selected`
  65   );
  66   EventUtils.sendMouseEvent({ type: "mousedown" }, frames[0]);
  67   await waitForSelected;
  68
  69   const checkSelected = messageRowNumber => {
  70     is(
  71       Array.from(frames).findIndex(el => el.matches(".selected")),
  72       messageRowNumber - 1,
  73       `Message ${messageRowNumber} should be selected.`
  74     );
  75   };
  76
  77   // Need focus for keyboard shortcuts to work
  78   frames[0].focus();
  79
  80   checkSelected(1);
  81
  82   EventUtils.sendKey("DOWN", window);
  83   checkSelected(2);
  84
  85   EventUtils.sendKey("UP", window);
  86   checkSelected(1);
  87
  88   EventUtils.sendKey("PAGE_DOWN", window);
  89   checkSelected(3);
  90
  91   EventUtils.sendKey("PAGE_UP", window);
  92   checkSelected(1);
  93
  94   EventUtils.sendKey("END", window);
  95   checkSelected(10);
  96
  97   EventUtils.sendKey("HOME", window);
  98   checkSelected(1);
  99
 100   // Close WS connection
 101   await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
 102     await content.wrappedJSObject.closeConnection();
 103   });
 104
 105   await teardown(monitor);
 106 });