Bug 1308840 - Fixes expanding/collapsing stacktraces. r=linclark;

Fixes the "dispatch is not a function error", passing the dispatch prop from `PageError` to `Message`.
Make the message collapsible only if the message is a group or an error with a stacktrace.
Adds mocha tests.

MozReview-Commit-ID: CkvV2z4yfcV

--HG--
extra : rebase_source : 780c07dde74883ed7d3452040e3bac479eed70e9

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

@@ -83,7 +83,8 @@ function ConsoleApiCall(props) {
     collapseTitle = l10n.getStr("groupToggle");
   }
 
-  const collapsible = attachment !== null || isGroupType(type);
+  const collapsible = isGroupType(type)
+    || (type === "error" && Array.isArray(stacktrace));
   const topLevelClasses = ["cm-s-mozilla"];
 
   return Message({

devtools/client/webconsole/new-console-output/components/message-types/page-error.js

@@ -28,6 +28,7 @@ PageError.defaultProps = {
 
 function PageError(props) {
   const {
+    dispatch,
     message,
     open,
     serviceContainer,
@@ -45,9 +46,10 @@ function PageError(props) {
   } = message;
 
   const childProps = {
+    dispatch,
     messageId,
     open,
-    collapsible: true,
+    collapsible: Array.isArray(stacktrace),
     source,
     type,
     level,

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

@@ -123,6 +123,9 @@ describe("ConsoleAPICall component:", () => {
 
       expect(frameLinks.eq(2).find(".frame-link-function-display-name").text()).toBe("triggerPacket");
       expect(frameLinks.eq(2).find(".frame-link-filename").text()).toBe(filepath);
+
+      //it should not be collapsible.
+      expect(wrapper.find(`.theme-twisty`).length).toBe(0);
     });
   });
 

devtools/client/webconsole/new-console-output/test/components/page-error.test.js

@@ -4,10 +4,20 @@
 
 // Test utils.
 const expect = require("expect");
-const { render } = require("enzyme");
+const { render, mount } = require("enzyme");
+const sinon = require("sinon");
+
+// React
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const Provider = createFactory(require("react-redux").Provider);
+const { setupStore } = require("devtools/client/webconsole/new-console-output/test/helpers");
 
 // Components under test.
 const PageError = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
+const {
+  MESSAGE_OPEN,
+  MESSAGE_CLOSE,
+} = require("devtools/client/webconsole/new-console-output/constants");
 const { INDENT_WIDTH } = require("devtools/client/webconsole/new-console-output/components/message-indent");
 
 // Test fakes.
@@ -37,11 +47,50 @@ describe("PageError component:", () => {
     const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
     const wrapper = render(PageError({ message, serviceContainer, open: true }));
 
+    // There should be a collapse button.
+    expect(wrapper.find(".theme-twisty.open").length).toBe(1);
+
     // There should be three stacktrace items.
     const frameLinks = wrapper.find(`.stack-trace span.frame-link`);
     expect(frameLinks.length).toBe(3);
   });
 
+  it("toggle the stacktrace when the collapse button is clicked", () => {
+    const store = setupStore([]);
+    store.dispatch = sinon.spy();
+    const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
+
+    let wrapper = mount(Provider({store},
+      PageError({
+        message,
+        open: true,
+        dispatch: store.dispatch,
+        serviceContainer,
+      })
+    ));
+    wrapper.find(".theme-twisty.open").simulate("click");
+    let call = store.dispatch.getCall(0);
+    expect(call.args[0]).toEqual({
+      id: message.id,
+      type: MESSAGE_CLOSE
+    });
+
+    wrapper = mount(Provider({store},
+      PageError({
+        message,
+        open: false,
+        dispatch: store.dispatch,
+        serviceContainer,
+      })
+    ));
+    wrapper.find(".theme-twisty").simulate("click");
+    call = store.dispatch.getCall(1);
+    expect(call.args[0]).toEqual({
+      id: message.id,
+      type: MESSAGE_OPEN
+    });
+  });
+
   it("has the expected indent", () => {
     const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
     const indent = 10;