Bug 1367395 - Fix mocha filter component test. r=Honza draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 29 May 2017 10:30:32 +0200
changeset 586300 9f15782b64657eb6a31eefcabbcf9775d706cc07
parent 585631 66c73b65bf2d02c59f361b89135dc56553c3e4eb
child 630950 379b5821fd8b3c88474b053989adf77a78008666
push id61362
push userbmo:nchevobbe@mozilla.com
push dateTue, 30 May 2017 07:22:29 +0000
reviewersHonza
bugs1367395
milestone55.0a1
Bug 1367395 - Fix mocha filter component test. r=Honza Since the FilterButton component is now only a function that returns a React Element, it looks like Enzyme can't do the comparison we were doing before. Checking directly the resulting html, even if non-optimal, fixes the test. MozReview-Commit-ID: 5fAk8WyYCaF
devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
--- a/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
@@ -1,20 +1,20 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 const expect = require("expect");
 const sinon = require("sinon");
-const { render, mount } = require("enzyme");
+const { render, mount, shallow } = require("enzyme");
 
 const { createFactory, DOM } = require("devtools/client/shared/vendor/react");
 const Provider = createFactory(require("react-redux").Provider);
 
-const FilterButton = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-button"));
+const FilterButton = require("devtools/client/webconsole/new-console-output/components/filter-button");
 const FilterBar = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-bar"));
 const { getAllUi } = require("devtools/client/webconsole/new-console-output/selectors/ui");
 const {
   MESSAGES_CLEAR,
   MESSAGE_LEVEL
 } = require("devtools/client/webconsole/new-console-output/constants");
 
 const { setupStore } = require("devtools/client/webconsole/new-console-output/test/helpers");
@@ -52,16 +52,19 @@ describe("FilterBar component:", () => {
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(false);
 
     const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
     wrapper.find(".devtools-filter-icon").simulate("click");
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(true);
 
+    const secondaryBar = wrapper.find(".webconsole-filterbar-secondary");
+    expect(secondaryBar.length).toBe(1);
+
     // Buttons are displayed
     const filterBtn = props => FilterButton(
       Object.assign({}, {
         active: true,
         dispatch: store.dispatch
       }, props)
     );
 
@@ -74,17 +77,19 @@ describe("FilterBar component:", () => {
       DOM.span({
         className: "devtools-separator",
       }),
       filterBtn({ label: "CSS", filterKey: "css" }),
       filterBtn({ label: "XHR", filterKey: "netxhr", active: false }),
       filterBtn({ label: "Requests", filterKey: "net", active: false }),
     ];
 
-    expect(wrapper.containsAllMatchingElements(buttons)).toBe(true);
+    secondaryBar.children().forEach((child, index) => {
+      expect(child.html()).toEqual(shallow(buttons[index]).html());
+    });
   });
 
   it("fires MESSAGES_CLEAR action when clear button is clicked", () => {
     const store = setupStore([]);
     store.dispatch = sinon.spy();
 
     const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
     wrapper.find(".devtools-clear-icon").simulate("click");