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