Bug 1292322 - New console frontend: Clean up React warnings. r=bgrins

MozReview-Commit-ID: AhhSP61tl7w

devtools/client/webconsole/new-console-output/components/filter-bar.js

@@ -127,7 +127,7 @@ const FilterBar = createClass({
 
     return (
       dom.div({className: "webconsole-filteringbar-wrapper"},
-        children
+        ...children
       )
     );
   }

devtools/client/webconsole/new-console-output/components/grip-message-body.js

@@ -25,7 +25,11 @@ const { Grip } = require("devtools/client/shared/components/reps/grip");
 GripMessageBody.displayName = "GripMessageBody";
 
 GripMessageBody.propTypes = {
-  grip: PropTypes.object.isRequired,
+  grip: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ]).isRequired,
 };
 
 function GripMessageBody(props) {

devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js

@@ -30,14 +30,9 @@ function ConsoleApiCall(props) {
 
   let messageBody;
   if (type === "trace") {
-    messageBody = [
-      dom.span({className: "cm-variable"}, "console"),
-      ".",
-      dom.span({className: "cm-property"}, "trace"),
-      "():"
-    ];
+    messageBody = dom.span({className: "cm-variable"}, "console.trace()");
   } else if (message.parameters) {
-    messageBody = message.parameters.map((grip) => GripMessageBody({grip}));
+    messageBody = message.parameters.map((grip, key) => GripMessageBody({grip, key}));
   } else {
     messageBody = message.messageText;
   }

devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js

@@ -2,19 +2,22 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
-const { stubConsoleMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs");
-const { ConsoleApiCall } = require("devtools/client/webconsole/new-console-output/components/message-types/console-api-call");
+// Test utils.
 const expect = require("expect");
+const { renderComponent } = require("devtools/client/webconsole/new-console-output/test/helpers");
 
-const {
-  renderComponent
-} = require("devtools/client/webconsole/new-console-output/test/helpers");
+// Components under test.
+const { ConsoleApiCall } = require("devtools/client/webconsole/new-console-output/components/message-types/console-api-call");
+
+// Test fakes.
+const { stubConsoleMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs");
+const onViewSourceInDebugger = () => {};
 
 describe("ConsoleAPICall component:", () => {
   describe("console.log", () => {
     it("renders string grips", () => {
       const message = stubConsoleMessages.get("console.log('foobar', 'test')");
-      const rendered = renderComponent(ConsoleApiCall, {message});
+      const rendered = renderComponent(ConsoleApiCall, {message, onViewSourceInDebugger});
 
       const messageBody = getMessageBody(rendered);
       // @TODO should output: foobar test
@@ -27,7 +30,7 @@ describe("ConsoleAPICall component:", () => {
       const message =
         stubConsoleMessages.get("console.log('foobar', 'test')")
         .set("repeat", 107);
-      const rendered = renderComponent(ConsoleApiCall, {message});
+      const rendered = renderComponent(ConsoleApiCall, {message, onViewSourceInDebugger});
 
       const repeatNode = getRepeatNode(rendered);
       expect(repeatNode[0].textContent).toBe("107");
@@ -37,7 +40,7 @@ describe("ConsoleAPICall component:", () => {
   describe("console.count", () => {
     it("renders", () => {
       const message = stubConsoleMessages.get("console.count('bar')");
-      const rendered = renderComponent(ConsoleApiCall, {message});
+      const rendered = renderComponent(ConsoleApiCall, {message, onViewSourceInDebugger});
 
       const messageBody = getMessageBody(rendered);
       expect(messageBody.textContent).toBe(message.messageText);

devtools/client/webconsole/new-console-output/test/components/message-container.test.js

@@ -2,24 +2,27 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
-const { stubConsoleMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs");
-
-const { MessageContainer } = require("devtools/client/webconsole/new-console-output/components/message-container");
-const { ConsoleApiCall } = require("devtools/client/webconsole/new-console-output/components/message-types/console-api-call");
-const { EvaluationResult } = require("devtools/client/webconsole/new-console-output/components/message-types/evaluation-result");
-const { PageError } = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
-
+// Test utils.
 const expect = require("expect");
-
 const {
   renderComponent,
   shallowRenderComponent
 } = require("devtools/client/webconsole/new-console-output/test/helpers");
 
+// Components under test.
+const { MessageContainer } = require("devtools/client/webconsole/new-console-output/components/message-container");
+const { ConsoleApiCall } = require("devtools/client/webconsole/new-console-output/components/message-types/console-api-call");
+const { EvaluationResult } = require("devtools/client/webconsole/new-console-output/components/message-types/evaluation-result");
+const { PageError } = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
+
+// Test fakes.
+const { stubConsoleMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs");
+const onViewSourceInDebugger = () => {};
+
 describe("MessageContainer component:", () => {
   it("pipes data to children as expected", () => {
     const message = stubConsoleMessages.get("console.log('foobar', 'test')");
-    const rendered = renderComponent(MessageContainer, {message});
+    const rendered = renderComponent(MessageContainer, {message, onViewSourceInDebugger});
 
     expect(rendered.textContent.includes("foobar")).toBe(true);
   });
@@ -40,8 +43,12 @@ describe("MessageContainer component:", () => {
     ];
 
     messageTypes.forEach(info => {
-      const rendered = shallowRenderComponent(MessageContainer, {message: info.message});
-      expect(rendered.type).toBe(info.component);
+      const { component, message } = info;
+      const rendered = shallowRenderComponent(MessageContainer, {
+        message,
+        onViewSourceInDebugger,
+      });
+      expect(rendered.type).toBe(component);
     });
   });
 });