Bug 1575274 - WebSocket Inspector Test: Filtering using free text. r=Honza
authortanhengyeow <E0032242@u.nus.edu>
Fri, 30 Aug 2019 17:04:15 +0000
changeset 490882 a57d69ecbda8442e798d51cf8ecbd465737508c8
parent 490881 ae73cf1c7395dda33313fb7dbb56c8060be6174c
child 490883 a7cbaad4c9b2ac19904fe72177930a3e3a49b477
push id36514
push usermalexandru@mozilla.com
push dateFri, 30 Aug 2019 21:54:33 +0000
treeherdermozilla-central@cae93ef1993e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1575274
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1575274 - WebSocket Inspector Test: Filtering using free text. r=Honza Test for filtering messages using the filter input. Differential Revision: https://phabricator.services.mozilla.com/D42694
devtools/client/netmonitor/src/components/websockets/Toolbar.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net-ws-filter-freetext.js
--- a/devtools/client/netmonitor/src/components/websockets/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/websockets/Toolbar.js
@@ -47,16 +47,21 @@ class Toolbar extends Component {
       searchboxRef: PropTypes.object.isRequired,
       toggleFrameFilterType: PropTypes.func.isRequired,
       clearFrames: PropTypes.func.isRequired,
       setFrameFilterText: PropTypes.func.isRequired,
       frameFilterType: PropTypes.string.isRequired,
     };
   }
 
+  componentWillUnmount() {
+    const { setFrameFilterText } = this.props;
+    setFrameFilterText("");
+  }
+
   /**
    * Render a separator.
    */
   renderSeparator() {
     return span({ className: "devtools-separator" });
   }
 
   /**
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -233,8 +233,9 @@ skip-if = (os == 'win' && os_version == 
 [browser_net_truncate.js]
 [browser_net_view-source-debugger.js]
 [browser_net_waterfall-click.js]
 [browser_net_websocket_stacks.js]
 [browser_net_worker_stacks.js]
 [browser_net_ws-basic.js]
 [browser_net_ws-clear.js]
 [browser_net_ws-filter-dropdown.js]
+[browser_net-ws-filter-freetext.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net-ws-filter-freetext.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that WS connection is established successfully and filtering messages using freetext works correctly.
+ */
+
+add_task(async function() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["devtools.netmonitor.features.webSockets", true]],
+  });
+  const { tab, monitor } = await initNetMonitor(WS_PAGE_URL);
+  info("Starting test... ");
+
+  const { document, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  const { getDisplayedFrames } = windowRequire(
+    "devtools/client/netmonitor/src/selectors/web-sockets"
+  );
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Wait for WS connection(s) to be established + send messages
+  await ContentTask.spawn(tab.linkedBrowser, {}, async () => {
+    await content.wrappedJSObject.openConnection(3);
+    await content.wrappedJSObject.openConnection(1);
+  });
+
+  const requests = document.querySelectorAll(".request-list-item");
+  is(requests.length, 2, "There should be two requests");
+
+  // Wait for all sent/received messages to be displayed in DevTools
+  wait = waitForDOM(
+    document,
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item",
+    6
+  );
+
+  // Select the first request
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]);
+
+  // Click on the "Messages" panel
+  EventUtils.sendMouseEvent(
+    { type: "click" },
+    document.querySelector("#messages-tab")
+  );
+  await wait;
+
+  // Get all messages present in the "Messages" panel
+  const frames = document.querySelectorAll(
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item"
+  );
+
+  // Check expected results
+  is(frames.length, 6, "There should be six frames");
+
+  // Fill filter input with text and check displayed messages
+  const type = string => {
+    for (const ch of string) {
+      EventUtils.synthesizeKey(ch, {}, monitor.panelWin);
+    }
+  };
+  const filterInput = document.querySelector(
+    "#messages-panel .devtools-filterinput"
+  );
+  filterInput.focus();
+  type("Payload 2");
+
+  // Wait till the text filter is applied.
+  await waitUntil(() => getDisplayedFrames(store.getState()).length == 2);
+
+  const filteredFrames = document.querySelectorAll(
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item"
+  );
+  is(filteredFrames.length, 2, "There should be two frames");
+
+  // Select the second request and check that the filter input is cleared
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requests[1]);
+  // Wait till the text filter is applied. There should be two frames rendered
+  await waitUntil(
+    () =>
+      document.querySelectorAll(
+        "#messages-panel .ws-frames-list-table .ws-frame-list-item"
+      ).length == 2
+  );
+  const secondRequestFrames = document.querySelectorAll(
+    "#messages-panel .ws-frames-list-table .ws-frame-list-item"
+  );
+  is(secondRequestFrames.length, 2, "There should be two frames");
+  is(filterInput.value, "", "The filter input is cleared");
+
+  // Close WS connection
+  await ContentTask.spawn(tab.linkedBrowser, {}, async () => {
+    await content.wrappedJSObject.closeConnection();
+  });
+
+  await teardown(monitor);
+});