Bug 1367395 - Fix mocha filter component test. r=Honza
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 29 May 2017 10:30:32 +0200
changeset 409391 e05ee5231980a2056854f9b60227bf29a61e122f
parent 409390 b0382a33f8c452a5ff6ae03ad7d8d514d270e324
child 409392 df0ddb9c9befc73c6ee4c446087016f7597d2316
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1367395
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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");