diff options
Diffstat (limited to 'devtools/client/webconsole/test/node/components/filter-bar.test.js')
-rw-r--r-- | devtools/client/webconsole/test/node/components/filter-bar.test.js | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/node/components/filter-bar.test.js b/devtools/client/webconsole/test/node/components/filter-bar.test.js new file mode 100644 index 0000000000..15fb026d9f --- /dev/null +++ b/devtools/client/webconsole/test/node/components/filter-bar.test.js @@ -0,0 +1,226 @@ +/* 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, shallow } = require("enzyme"); + +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const Provider = createFactory( + require("resource://devtools/client/shared/vendor/react-redux.js").Provider +); + +const actions = require("resource://devtools/client/webconsole/actions/index.js"); +const FilterButton = require("resource://devtools/client/webconsole/components/FilterBar/FilterButton.js"); +const FilterBar = createFactory( + require("resource://devtools/client/webconsole/components/FilterBar/FilterBar.js") +); +const { + FILTERBAR_DISPLAY_MODES, +} = require("resource://devtools/client/webconsole/constants.js"); +const { + MESSAGES_CLEAR, + FILTERS, +} = require("resource://devtools/client/webconsole/constants.js"); + +const { + setupStore, + clearPrefs, +} = require("resource://devtools/client/webconsole/test/node/helpers.js"); +const serviceContainer = require("resource://devtools/client/webconsole/test/node/fixtures/serviceContainer.js"); + +function getFilterBar(overrides = {}) { + return FilterBar({ + serviceContainer, + attachRefToWebConsoleUI: () => {}, + webConsoleUI: { + document, + wrapper: {}, + }, + ...overrides, + }); +} + +describe("FilterBar component:", () => { + afterEach(() => { + clearPrefs(); + }); + + it("initial render", () => { + const store = setupStore(); + + const wrapper = render(Provider({ store }, getFilterBar())); + const toolbar = wrapper.find( + ".devtools-toolbar.webconsole-filterbar-primary" + ); + + // Clear button + const clearButton = toolbar.children().eq(0); + expect(clearButton.attr("class")).toBe( + "devtools-button devtools-clear-icon" + ); + expect(clearButton.attr("title")).toBe("Clear the Web Console output"); + + // Separator + expect(toolbar.children().eq(1).attr("class")).toBe("devtools-separator"); + + // Text filter + const textInput = toolbar.children().eq(2); + expect(textInput.attr("class")).toBe("devtools-searchbox"); + + // Text filter input + const textFilter = textInput.children().eq(0); + expect(textFilter.attr("class")).toBe("devtools-filterinput"); + expect(textFilter.attr("placeholder")).toBe("Filter Output"); + expect(textFilter.attr("type")).toBe("search"); + expect(textFilter.attr("value")).toBe(""); + + // Text filter input clear button + const textFilterClearButton = textInput.children().eq(1); + expect(textFilterClearButton.attr("class")).toBe( + "devtools-searchinput-clear" + ); + + // Settings menu icon + expect( + wrapper.find(".webconsole-console-settings-menu-button").length + ).toBe(1); + }); + + it("displays the number of hidden messages when a search hide messages", () => { + const store = setupStore([ + "console.log('foobar', 'test')", + "console.info('info message');", + "console.warn('danger, will robinson!')", + "console.debug('debug message');", + "console.error('error message');", + ]); + store.dispatch(actions.filterTextSet("qwerty")); + + const wrapper = mount(Provider({ store }, getFilterBar())); + + const message = wrapper.find(".devtools-searchinput-summary"); + expect(message.text()).toBe("5 hidden"); + expect(message.prop("title")).toBe("5 items hidden by text filter"); + }); + + it("displays the number of hidden messages when a search hide 1 message", () => { + const store = setupStore([ + "console.log('foobar', 'test')", + "console.info('info message');", + ]); + store.dispatch(actions.filterTextSet("foobar")); + + const wrapper = mount(Provider({ store }, getFilterBar())); + + const message = wrapper.find(".devtools-searchinput-summary"); + expect(message.text()).toBe("1 hidden"); + expect(message.prop("title")).toBe("1 item hidden by text filter"); + }); + + it("displays the expected number of hidden messages when multiple filters", () => { + const store = setupStore([ + "console.log('foobar', 'test')", + "console.info('info message');", + "console.warn('danger, will robinson!')", + "console.debug('debug message');", + "console.error('error message');", + ]); + store.dispatch(actions.filterTextSet("qwerty")); + store.dispatch(actions.filterToggle(FILTERS.ERROR)); + store.dispatch(actions.filterToggle(FILTERS.INFO)); + + const wrapper = mount(Provider({ store }, getFilterBar())); + + const message = wrapper.find(".devtools-searchinput-summary"); + expect(message.text()).toBe("3 hidden"); + expect(message.prop("title")).toBe("3 items hidden by text filter"); + }); + + it("does not display the number of hidden messages when there are no messages", () => { + const store = setupStore(); + store.dispatch(actions.filterTextSet("qwerty")); + const wrapper = mount(Provider({ store }, getFilterBar())); + + const toolbar = wrapper.find(".devtools-searchinput-summary"); + expect(toolbar.exists()).toBeFalsy(); + }); + + it("Displays a filter buttons bar on its own element in narrow displayMode", () => { + const store = setupStore(); + + const wrapper = mount( + Provider( + { store }, + getFilterBar({ + displayMode: FILTERBAR_DISPLAY_MODES.NARROW, + }) + ) + ); + + 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 + ) + ); + + const buttons = [ + filterBtn({ label: "Errors", filterKey: FILTERS.ERROR }), + filterBtn({ label: "Warnings", filterKey: FILTERS.WARN }), + filterBtn({ label: "Logs", filterKey: FILTERS.LOG }), + filterBtn({ label: "Info", filterKey: FILTERS.INFO }), + filterBtn({ label: "Debug", filterKey: FILTERS.DEBUG }), + dom.div({ + className: "devtools-separator", + }), + filterBtn({ + label: "CSS", + filterKey: "css", + active: false, + title: + "Stylesheets will be reparsed to check for errors. Refresh the page to also see errors from stylesheets modified from Javascript.", + }), + filterBtn({ label: "XHR", filterKey: "netxhr", active: false }), + filterBtn({ label: "Requests", filterKey: "net", active: false }), + ]; + + 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 }, getFilterBar())); + wrapper.find(".devtools-clear-icon").simulate("click"); + const call = store.dispatch.getCall(0); + expect(call.args[0]).toEqual({ + type: MESSAGES_CLEAR, + }); + }); + + it("sets filter text when text is typed", () => { + const store = setupStore(); + + const wrapper = mount(Provider({ store }, getFilterBar())); + const input = wrapper.find(".devtools-filterinput"); + input.simulate("change", { target: { value: "a" } }); + expect(store.getState().filters.text).toBe("a"); + }); +}); |