feat(tests): add history dropdown menu tests

ui/src/Components/NavBar/FilterInput/History.test.js

@@ -1,11 +1,10 @@
 import React from "react";
-import renderer from "react-test-renderer";
 
-import { mount } from "enzyme";
+import { mount, shallow } from "enzyme";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { History, ReduceFilter } from "./History";
+import { History, HistoryMenu, ReduceFilter } from "./History";
 
 let alertStore;
 let settingsStore;
@@ -15,12 +14,28 @@ beforeEach(() => {
   settingsStore = new Settings();
 });
 
-const FakeHistory = () => {
-  return renderer.create(
+const MountedHistory = () => {
+  return mount(
     <History alertStore={alertStore} settingsStore={settingsStore} />
   );
 };
 
+const ShallowHistoryMenu = historyTree => {
+  const tree = shallow(
+    <HistoryMenu
+      popperPlacement={null}
+      popperRef={null}
+      popperStyle={null}
+      filters={historyTree.instance().history.filters}
+      onClear={historyTree.instance().clearHistory}
+      alertStore={historyTree.props().alertStore}
+      settingsStore={historyTree.props().settingsStore}
+      afterClick={historyTree.instance().collapse.hide}
+    />
+  );
+  return tree;
+};
+
 const AppliedFilter = (name, matcher, value) => {
   const filter = NewUnappliedFilter(`${name}${matcher}${value}`);
   filter.applied = true;
@@ -32,9 +47,9 @@ const AppliedFilter = (name, matcher, value) => {
 
 describe("<History />", () => {
   it("renders dropdown button when menu is hidden", () => {
-    const component = FakeHistory();
-    const dropdown = component.root.findByType("button");
-    expect(dropdown.props.className.split(" ")).toContain(
+    const tree = MountedHistory();
+    const dropdown = tree.find("button");
+    expect(dropdown.props().className.split(" ")).toContain(
       "components-navbar-history"
     );
   });
@@ -42,10 +57,8 @@ describe("<History />", () => {
   // Due to https://github.com/FezVrasta/popper.js/issues/478 we can't test
   // rendered dropdown content, only the fact that toggle value is updated
   it("renders dropdown button when menu is visible", () => {
-    const tree = mount(
-      <History alertStore={alertStore} settingsStore={settingsStore} />
-    );
-    const toggle = tree.find("button.components-navbar-history");
+    const tree = MountedHistory();
+    const toggle = tree.find("button");
 
     expect(tree.instance().collapse.value).toBe(true);
     toggle.simulate("click");
@@ -58,10 +71,10 @@ describe("<History />", () => {
       NewUnappliedFilter("foo=unapplied"),
       AppliedFilter("baz", "!=", "bar")
     ];
-    const tree = FakeHistory().toTree();
-    tree.instance.appendToHistory();
-    expect(tree.instance.history.filters).toHaveLength(1);
-    expect(JSON.stringify(tree.instance.history.filters[0])).toBe(
+    const tree = MountedHistory();
+    tree.instance().appendToHistory();
+    expect(tree.instance().history.filters).toHaveLength(1);
+    expect(JSON.stringify(tree.instance().history.filters[0])).toBe(
       JSON.stringify([
         ReduceFilter(AppliedFilter("foo", "=", "bar")),
         ReduceFilter(AppliedFilter("baz", "!=", "bar"))
@@ -69,3 +82,27 @@ describe("<History />", () => {
     );
   });
 });
+
+describe("<HistoryMenu />", () => {
+  it("renders correctly when rendered with empty history", () => {
+    const historyTree = MountedHistory();
+    const tree = ShallowHistoryMenu(historyTree);
+    expect(tree.text()).toBe(
+      "<FontAwesomeIcon />Last used filtersEmpty<ActionButton /><ActionButton /><ActionButton />"
+    );
+  });
+
+  it("renders correctly when rendered with a filter in history", () => {
+    alertStore.filters.values = [AppliedFilter("foo", "=~", "bar")];
+    const historyTree = MountedHistory();
+    historyTree.instance().appendToHistory();
+
+    const tree = ShallowHistoryMenu(historyTree);
+    expect(tree.text()).toBe(
+      "<FontAwesomeIcon />Last used filters<HistoryLabel /><ActionButton /><ActionButton /><ActionButton />"
+    );
+
+    const label = tree.find("HistoryLabel");
+    expect(label.html()).toMatch(/>foo=~bar</);
+  });
+});