Bug 899753 - Part 2: Unit test for Table console output r=past

browser/devtools/webconsole/console-output.js

@@ -1935,6 +1935,7 @@ Messages.ConsoleTable.prototype = Heritage.extend(Messages.Extended.prototype,
         }
 
         result.scrollIntoView();
+        this.output.owner.emit("messages-table-rendered");
 
         // Release object actors
         if (Array.isArray(this._arguments)) {

browser/devtools/webconsole/test/browser.ini

@@ -67,6 +67,7 @@ support-files =
   test-console-extras.html
   test-console-replaced-api.html
   test-console.html
+  test-console-table.html
   test-console-output-02.html
   test-console-output-03.html
   test-console-output-04.html
@@ -305,6 +306,7 @@ skip-if = buildapp == 'mulet'
 [browser_webconsole_output_dom_elements_03.js]
 [browser_webconsole_output_dom_elements_04.js]
 [browser_webconsole_output_events.js]
+[browser_webconsole_output_table.js]
 [browser_console_variables_view_highlighter.js]
 [browser_webconsole_start_netmon_first.js]
 [browser_webconsole_console_trace_duplicates.js]

browser/devtools/webconsole/test/browser_webconsole_output_table.js

@@ -0,0 +1,158 @@
+ /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+ /* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that console.table() works as intended.
+
+ "use strict";
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console-table.html";
+
+const TEST_DATA = [
+  {
+    command: "console.table(languages1)",
+    data: [
+        { _index: "0", name: "\"JavaScript\"", fileExtension: "Array[1]" },
+        { _index: "1", name: "Object", fileExtension: "\".ts\"" },
+        { _index: "2", name: "\"CoffeeScript\"", fileExtension: "\".coffee\"" }
+    ],
+    columns: { _index: "(index)", name: "name", fileExtension: "fileExtension" }
+  },
+  {
+    command: "console.table(languages1, 'name')",
+    data: [
+        { _index: "0", name: "\"JavaScript\"", fileExtension: "Array[1]" },
+        { _index: "1", name: "Object", fileExtension: "\".ts\"" },
+        { _index: "2", name: "\"CoffeeScript\"", fileExtension: "\".coffee\"" }
+    ],
+    columns: { _index: "(index)", name: "name" }
+  },
+  {
+    command: "console.table(languages1, ['name'])",
+    data: [
+        { _index: "0", name: "\"JavaScript\"", fileExtension: "Array[1]" },
+        { _index: "1", name: "Object", fileExtension: "\".ts\"" },
+        { _index: "2", name: "\"CoffeeScript\"", fileExtension: "\".coffee\"" }
+    ],
+    columns: { _index: "(index)", name: "name" }
+  },
+  {
+    command: "console.table(languages2)",
+    data: [
+      { _index: "csharp", name: "\"C#\"", paradigm: "\"object-oriented\"" },
+      { _index: "fsharp", name: "\"F#\"", paradigm: "\"functional\"" }
+    ],
+    columns: { _index: "(index)", name: "name", paradigm: "paradigm" }
+  },
+  {
+    command: "console.table([[1, 2], [3, 4]])",
+    data: [
+      { _index: "0", 0: "1", 1: "2" },
+      { _index: "1", 0: "3", 1: "4" }
+    ],
+    columns: { _index: "(index)", 0: "0", 1: "1" }
+  },
+  {
+    command: "console.table({a: [1, 2], b: [3, 4]})",
+    data: [
+      { _index: "a", 0: "1", 1: "2" },
+      { _index: "b", 0: "3", 1: "4" }
+    ],
+    columns: { _index: "(index)", 0: "0", 1: "1" }
+  },
+  {
+    command: "console.table(family)",
+    data: [
+      { _index: "mother", firstName: "\"Susan\"", lastName: "\"Doyle\"", age: "32" },
+      { _index: "father", firstName: "\"John\"", lastName: "\"Doyle\"", age: "33" },
+      { _index: "daughter", firstName: "\"Lily\"", lastName: "\"Doyle\"", age: "5" },
+      { _index: "son", firstName: "\"Mike\"", lastName: "\"Doyle\"", age: "8" },
+    ],
+    columns: { _index: "(index)", firstName: "firstName", lastName: "lastName", age: "age" }
+  },
+  {
+    command: "console.table(family, [])",
+    data: [
+      { _index: "mother", firstName: "\"Susan\"", lastName: "\"Doyle\"", age: "32" },
+      { _index: "father", firstName: "\"John\"", lastName: "\"Doyle\"", age: "33" },
+      { _index: "daughter", firstName: "\"Lily\"", lastName: "\"Doyle\"", age: "5" },
+      { _index: "son", firstName: "\"Mike\"", lastName: "\"Doyle\"", age: "8" },
+    ],
+    columns: { _index: "(index)" }
+  },
+  {
+    command: "console.table(family, ['firstName', 'lastName'])",
+    data: [
+      { _index: "mother", firstName: "\"Susan\"", lastName: "\"Doyle\"", age: "32" },
+      { _index: "father", firstName: "\"John\"", lastName: "\"Doyle\"", age: "33" },
+      { _index: "daughter", firstName: "\"Lily\"", lastName: "\"Doyle\"", age: "5" },
+      { _index: "son", firstName: "\"Mike\"", lastName: "\"Doyle\"", age: "8" },
+    ],
+    columns: { _index: "(index)", firstName: "firstName", lastName: "lastName" }
+  },
+  {
+    command: "console.table(mySet)",
+    data: [
+      { _index: "0", _value: "1" },
+      { _index: "1", _value: "5" },
+      { _index: "2", _value: "\"some text\"" },
+      { _index: "3", _value: "null" },
+      { _index: "4", _value: "undefined" }
+    ],
+    columns: { _index: "(iteration index)", _value: "Values" }
+  },
+  {
+    command: "console.table(myMap)",
+    data: [
+      { _index: "0", _key: "\"a string\"", _value: "\"value associated with 'a string'\"" },
+      { _index: "1", _key: "5", _value: "\"value associated with 5\"" },
+    ],
+    columns: { _index: "(iteration index)", _key: "Key", _value: "Values" }
+  }
+];
+
+let test = asyncTest(function*() {
+  const {tab} = yield loadTab(TEST_URI);
+  let hud = yield openConsole(tab);
+
+  for (let testdata of TEST_DATA) {
+    hud.jsterm.clearOutput();
+
+    info("Executing " + testdata.command);
+
+    let onTableRender = once(hud.ui, "messages-table-rendered");
+    hud.jsterm.execute(testdata.command);
+    yield onTableRender;
+
+    let [result] = yield waitForMessages({
+      webconsole: hud,
+      messages: [{
+        name: testdata.command + " output",
+        consoleTable: true
+      }],
+    });
+
+    let node = [...result.matched][0];
+    ok(node, "found trace log node");
+
+    let obj = node._messageObject;
+    ok(obj, "console.trace message object");
+
+    ok(obj._data, "found table data object");
+
+    let data = obj._data.map(entries => {
+      let result = {};
+
+      for (let key of Object.keys(entries)) {
+        result[key] = entries[key] instanceof HTMLElement ?
+          entries[key].textContent : entries[key];
+      }
+
+      return result;
+    });
+
+    is(data.toSource(), testdata.data.toSource(), "table data is correct");
+    ok(obj._columns, "found table column object");
+    is(obj._columns.toSource(), testdata.columns.toSource(), "table column is correct");
+  }
+});

browser/devtools/webconsole/test/head.js

@@ -912,6 +912,8 @@ function openDebugger(aOptions = {})
  *            message.
  *            - consoleGroup: boolean, set to |true| to match a console.group()
  *            message.
+ *            - consoleTable: boolean, set to |true| to match a console.table()
+ *            message.
  *            - longString: boolean, set to |true} to match long strings in the
  *            message.
  *            - collapsible: boolean, set to |true| to match messages that can
@@ -970,6 +972,22 @@ function waitForMessages(aOptions)
     return result;
   }
 
+  function checkConsoleTable(aRule, aElement)
+  {
+    let elemText = aElement.textContent;
+    let table = aRule.consoleTable;
+
+    if (!checkText("console.table():", elemText)) {
+      return false;
+    }
+
+    aRule.category = CATEGORY_WEBDEV;
+    aRule.severity = SEVERITY_LOG;
+    aRule.type = Messages.ConsoleTable;
+
+    return true;
+  }
+
   function checkConsoleTrace(aRule, aElement)
   {
     let elemText = aElement.textContent;
@@ -1146,6 +1164,10 @@ function waitForMessages(aOptions)
       return false;
     }
 
+    if (aRule.consoleTable && !checkConsoleTable(aRule, aElement)) {
+      return false;
+    }
+
     if (aRule.consoleTrace && !checkConsoleTrace(aRule, aElement)) {
       return false;
     }
@@ -1593,3 +1615,34 @@ function checkOutputForInputs(hud, inputTests)
 
   return Task.spawn(runner);
 }
+
+/**
+ * Wait for eventName on target.
+ * @param {Object} target An observable object that either supports on/off or
+ * addEventListener/removeEventListener
+ * @param {String} eventName
+ * @param {Boolean} useCapture Optional, for addEventListener/removeEventListener
+ * @return A promise that resolves when the event has been handled
+ */
+function once(target, eventName, useCapture=false) {
+  info("Waiting for event: '" + eventName + "' on " + target + ".");
+
+  let deferred = promise.defer();
+
+  for (let [add, remove] of [
+    ["addEventListener", "removeEventListener"],
+    ["addListener", "removeListener"],
+    ["on", "off"]
+  ]) {
+    if ((add in target) && (remove in target)) {
+      target[add](eventName, function onEvent(...aArgs) {
+        target[remove](eventName, onEvent, useCapture);
+        deferred.resolve.apply(deferred, aArgs);
+      }, useCapture);
+      break;
+    }
+  }
+
+  return deferred.promise;
+}
+

browser/devtools/webconsole/test/test-console-extras.html

@@ -7,9 +7,6 @@
         console.log("start");
         console.clear()
         console.dirxml()
-        console.profile()
-        console.profileEnd()
-        console.table()
         console.log("end");
       }
     </script>

browser/devtools/webconsole/test/test-console-table.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf8">
+    <!--
+    - Any copyright is dedicated to the Public Domain.
+    - http://creativecommons.org/publicdomain/zero/1.0/
+    -->
+    <title>Test for Bug 899753 - console.table support</title>
+    <script>
+      var languages1 = [
+        { name: "JavaScript", fileExtension: [".js"] },
+        { name: { a: "TypeScript" }, fileExtension: ".ts" },
+        { name: "CoffeeScript", fileExtension: ".coffee" }
+      ];
+
+      var languages2 = {
+        csharp: { name: "C#", paradigm: "object-oriented" },
+        fsharp: { name: "F#", paradigm: "functional" }
+      };
+
+      function Person(firstName, lastName, age)
+      {
+          this.firstName = firstName;
+          this.lastName = lastName;
+          this.age = age;
+      }
+
+      var family = {};
+      family.mother = new Person("Susan", "Doyle", 32);
+      family.father = new Person("John", "Doyle", 33);
+      family.daughter = new Person("Lily", "Doyle", 5);
+      family.son = new Person("Mike", "Doyle", 8);
+
+      var myMap = new Map();
+
+      myMap.set("a string", "value associated with 'a string'");
+      myMap.set(5, "value associated with 5");
+
+      var mySet = new Set();
+
+      mySet.add(1);
+      mySet.add(5);
+      mySet.add("some text");
+      mySet.add(null);
+      mySet.add(undefined);
+    </script>
+  </head>
+  <body>
+    <p>Hello world!</p>
+  </body>
+</html>