Bug 1307940 - Add mochitest to test open-in-inspector icon in the console. r=bgrins draft
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Mon, 13 Mar 2017 13:51:31 +0100
changeset 566992 31fbc42329627feefd436c6e11d8f09ae1757537
parent 566991 639c2e3c7f860d62ec4d111801d0c7f926fbdb48
child 566993 bcea8a34b484f6d53592ab72aebf234e75eb2830
push id55402
push userbmo:nchevobbe@mozilla.com
push dateMon, 24 Apr 2017 09:07:40 +0000
reviewersbgrins
bugs1307940
milestone55.0a1
Bug 1307940 - Add mochitest to test open-in-inspector icon in the console. r=bgrins MozReview-Commit-ID: 7tBt2KzOGnp
devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_nodes_select.js
devtools/client/webconsole/new-console-output/test/mochitest/head.js
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
@@ -33,14 +33,15 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_webconsole_filters_persist.js]
 [browser_webconsole_init.js]
 [browser_webconsole_input_focus.js]
 [browser_webconsole_keyboard_accessibility.js]
 [browser_webconsole_location_debugger_link.js]
 [browser_webconsole_location_scratchpad_link.js]
 [browser_webconsole_location_styleeditor_link.js]
 [browser_webconsole_nodes_highlight.js]
+[browser_webconsole_nodes_select.js]
 [browser_webconsole_observer_notifications.js]
 [browser_webconsole_stacktrace_location_debugger_link.js]
 [browser_webconsole_stacktrace_location_scratchpad_link.js]
 [browser_webconsole_string.js]
 [browser_webconsole_timestamps.js]
 [browser_webconsole_vview_close_on_esc_key.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_nodes_select.js
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check clicking on open-in-inspector icon does select the node in the inspector.
+
+const HTML = `
+  <!DOCTYPE html>
+  <html>
+    <body>
+      <h1>Select node in inspector test</h1>
+    </body>
+    <script>
+      function logNode(selector) {
+        console.log(document.querySelector(selector));
+      }
+    </script>
+  </html>
+`;
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(async function () {
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const toolbox = gDevTools.getToolbox(hud.target);
+
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+  await toolbox.loadTool("inspector");
+  const inspector = toolbox.getPanel("inspector");
+
+  await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
+    content.wrappedJSObject.logNode("h1");
+  });
+
+  let msg = await waitFor(() => findMessage(hud, "<h1>"));
+  let node = msg.querySelector(".objectBox-node");
+  ok(node !== null, "Node was logged as expected");
+
+  let openInInspectorIcon = node.querySelector(".open-inspector");
+  ok(openInInspectorIcon !== null, "The is an open in inspector icon");
+
+  info("Clicking on the inspector icon and waiting for the " +
+       "inspector to be selected");
+  let onInspectorSelected = toolbox.once("inspector-selected");
+  let onInspectorUpdated = inspector.once("inspector-updated");
+  let onNewNode = toolbox.selection.once("new-node-front");
+
+  openInInspectorIcon.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  let nodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(nodeFront.displayName, "h1", "The expected node was selected");
+});
--- a/devtools/client/webconsole/new-console-output/test/mochitest/head.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js
@@ -96,21 +96,19 @@ function waitForMessages({ hud, messages
  *        true in order to return the value.
  * @param string message [optional]
  *        A message to output if the condition failes.
  * @param number interval [optional]
  *        How often the predicate is invoked, in milliseconds.
  * @return object
  *         A promise that is resolved with the result of the condition.
  */
-function* waitFor(condition, message = "waitFor", interval = 10, maxTries = 500) {
-  return new Promise(resolve => {
-    BrowserTestUtils.waitForCondition(condition, message, interval, maxTries)
-      .then(() => resolve(condition()));
-  });
+async function waitFor(condition, message = "waitFor", interval = 10, maxTries = 500) {
+  await BrowserTestUtils.waitForCondition(condition, message, interval, maxTries);
+  return condition();
 }
 
 /**
  * Find a message in the output.
  *
  * @param object hud
  *        The web console.
  * @param string text