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
--- 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");