From 186039474361e0f1fc56bd413a4ae4c35ed1d818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 25 Aug 2018 22:15:49 +0100
Subject: [PATCH 01/16] feat(tests): add missing tests for main modal

---
 ui/src/Components/MainModal/index.test.js | 41 +++++++++++++++++++----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/src/Components/MainModal/index.test.js b/ui/src/Components/MainModal/index.test.js
index 79b6e5ee6..fc0a699d6 100644
--- a/ui/src/Components/MainModal/index.test.js
+++ b/ui/src/Components/MainModal/index.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -14,27 +14,33 @@ beforeEach(() => {
   settingsStore = new Settings();
 });
 
-const RenderMainModal = () => {
+const ShallowMainModal = () => {
   return shallow(
     <MainModal alertStore={alertStore} settingsStore={settingsStore} />
   );
 };
 
+const MountedMainModal = () => {
+  return mount(
+    <MainModal alertStore={alertStore} settingsStore={settingsStore} />
+  );
+};
+
 describe("<MainModal />", () => {
   it("only renders FontAwesomeIcon when modal is not shown", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     expect(tree.text()).toBe("<FontAwesomeIcon />");
   });
 
   it("renders the modal when it is shown", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
   });
 
   it("hides the modal when toggle() is called twice", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     toggle.simulate("click");
@@ -42,7 +48,7 @@ describe("<MainModal />", () => {
   });
 
   it("hides the modal when hide() is called", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
@@ -50,4 +56,27 @@ describe("<MainModal />", () => {
     instance.toggle.hide();
     expect(tree.text()).toBe("<FontAwesomeIcon />");
   });
+
+  it("'modal-open' class is appended to body node when modal is visible", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is hidden", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is unmounted", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    tree.unmount();
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
 });

From 3dfeb7e360230dc3dbbf62cb8c932d793fbcea05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 25 Aug 2018 22:21:46 +0100
Subject: [PATCH 02/16] feat(tests): add tests for the root SilenceModal
 component

---
 ui/src/Components/SilenceModal/index.test.js | 81 ++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/index.test.js

diff --git a/ui/src/Components/SilenceModal/index.test.js b/ui/src/Components/SilenceModal/index.test.js
new file mode 100644
index 000000000..272925fa9
--- /dev/null
+++ b/ui/src/Components/SilenceModal/index.test.js
@@ -0,0 +1,81 @@
+import React from "react";
+
+import { shallow, mount } from "enzyme";
+
+import { AlertStore } from "Stores/AlertStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { SilenceModal } from ".";
+
+let alertStore;
+let silenceFormStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+  silenceFormStore = new SilenceFormStore();
+});
+
+const ShallowSilenceModal = () => {
+  return shallow(
+    <SilenceModal alertStore={alertStore} silenceFormStore={silenceFormStore} />
+  );
+};
+
+const MountedSilenceModal = () => {
+  return mount(
+    <SilenceModal alertStore={alertStore} silenceFormStore={silenceFormStore} />
+  );
+};
+
+describe("<SilenceModal />", () => {
+  it("only renders FontAwesomeIcon when modal is not shown", () => {
+    const tree = ShallowSilenceModal();
+    expect(tree.text()).toBe("<FontAwesomeIcon />");
+  });
+
+  it("renders the modal when it is shown", () => {
+    const tree = ShallowSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    expect(tree.text()).toBe("<FontAwesomeIcon /><SilenceModalContent />");
+  });
+
+  it("hides the modal when toggle() is called twice", () => {
+    const tree = ShallowSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    toggle.simulate("click");
+    expect(tree.text()).toBe("<FontAwesomeIcon />");
+  });
+
+  it("hides the modal when hide() is called", () => {
+    const tree = ShallowSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    expect(tree.text()).toBe("<FontAwesomeIcon /><SilenceModalContent />");
+    silenceFormStore.toggle.hide();
+    expect(tree.text()).toBe("<FontAwesomeIcon />");
+  });
+
+  it("'modal-open' class is appended to body node when modal is visible", () => {
+    const tree = MountedSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is hidden", () => {
+    const tree = MountedSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is unmounted", () => {
+    const tree = MountedSilenceModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    tree.unmount();
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
+});

From a99b453337c7b4632ff83776d47b711266a0c582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 25 Aug 2018 22:58:03 +0100
Subject: [PATCH 03/16] feat(tests): add tests for SilencePreview

---
 .../SilenceModal/SilencePreview.test.js       | 21 ++++++
 .../__snapshots__/SilencePreview.test.js.snap | 73 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/SilencePreview.test.js
 create mode 100644 ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap

diff --git a/ui/src/Components/SilenceModal/SilencePreview.test.js b/ui/src/Components/SilenceModal/SilencePreview.test.js
new file mode 100644
index 000000000..43be7a081
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilencePreview.test.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { render } from "enzyme";
+
+import moment from "moment";
+
+import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { SilencePreview } from "./SilencePreview";
+
+describe("<SilencePreview />", () => {
+  it("matches snapshot", () => {
+    const silenceFormStore = new SilenceFormStore();
+    silenceFormStore.data.startsAt = moment([2000, 1, 1, 0, 0, 0]);
+    silenceFormStore.data.endsAt = moment([2000, 1, 1, 1, 0, 0]);
+    silenceFormStore.data.createdBy = "me@example.com";
+    silenceFormStore.data.comment = "SilencePreview test";
+
+    const tree = render(<SilencePreview silenceFormStore={silenceFormStore} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap
new file mode 100644
index 000000000..d884d9fff
--- /dev/null
+++ b/ui/src/Components/SilenceModal/__snapshots__/SilencePreview.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SilencePreview /> matches snapshot 1`] = `
+<div
+  class="mt-3"
+>
+  <pre
+    class="json-pretty"
+  >
+    {
+      "
+    <span
+      class="json-key"
+    >
+      matchers
+    </span>
+    ": [],
+      "
+    <span
+      class="json-key"
+    >
+      startsAt
+    </span>
+    ": 
+    <span
+      class="json-string"
+    >
+      "2000-02-01T00:00:00.000Z"
+    </span>
+    ,
+      "
+    <span
+      class="json-key"
+    >
+      endsAt
+    </span>
+    ": 
+    <span
+      class="json-string"
+    >
+      "2000-02-01T01:00:00.000Z"
+    </span>
+    ,
+      "
+    <span
+      class="json-key"
+    >
+      createdBy
+    </span>
+    ": 
+    <span
+      class="json-string"
+    >
+      ""
+    </span>
+    ,
+      "
+    <span
+      class="json-key"
+    >
+      comment
+    </span>
+    ": 
+    <span
+      class="json-string"
+    >
+      "SilencePreview test"
+    </span>
+    
+    }
+  </pre>
+</div>
+`;

From 2f04d61abed7be5aabe6cb14426529300cbc2da3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 25 Aug 2018 23:54:04 +0100
Subject: [PATCH 04/16] refactor(tests): migrate tests to enzyme

---
 .../Labels/FilterInputLabel/index.test.js     | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js
index 0f5e19c92..0fab42590 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.test.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js
@@ -1,5 +1,6 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { shallow, mount } from "enzyme";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 
@@ -22,7 +23,7 @@ const MockColors = () => {
   };
 };
 
-const FakeLabel = (matcher, applied) => {
+const ShallowLabel = (matcher, applied) => {
   const name = "foo";
   const value = "bar";
   const filter = NewUnappliedFilter(`${name}${matcher}${value}`);
@@ -30,27 +31,22 @@ const FakeLabel = (matcher, applied) => {
   filter.name = name;
   filter.matcher = matcher;
   filter.value = value;
-  return renderer.create(
-    <FilterInputLabel alertStore={alertStore} filter={filter} />
-  );
+  return shallow(<FilterInputLabel alertStore={alertStore} filter={filter} />);
 };
 
 const ValidateClass = (matcher, applied, expectedClass) => {
-  const tree = FakeLabel(matcher, applied).toJSON();
-  expect(tree.props.className.split(" ")).toContain(expectedClass);
+  const tree = ShallowLabel(matcher, applied);
+  expect(tree.props().className.split(" ")).toContain(expectedClass);
 };
 
 const ValidateOnChange = newRaw => {
-  const component = renderer.create(
+  const tree = shallow(
     <FilterInputLabel
       alertStore={alertStore}
       filter={alertStore.filters.values[0]}
     />
   );
-  const tree = component.toTree();
-
-  // call onChange with new raw value
-  tree.instance.onChange({ raw: newRaw });
+  tree.instance().onChange({ raw: newRaw });
 
   return tree;
 };
@@ -92,40 +88,40 @@ describe("<FilterInputLabel /> className", () => {
 describe("<FilterInputLabel /> style", () => {
   it("unapplied filter with color information and '=' matcher should have empty style", () => {
     MockColors();
-    const tree = FakeLabel("=", false).toJSON();
-    expect(tree.props.style).toMatchObject({});
+    const tree = ShallowLabel("=", false);
+    expect(tree.props().style).toMatchObject({});
   });
 
   it("unapplied filter with no color information and '=' matcher should have empty style", () => {
-    const tree = FakeLabel("=", false).toJSON();
-    expect(tree.props.style).toMatchObject({});
+    const tree = ShallowLabel("=", false);
+    expect(tree.props().style).toMatchObject({});
   });
 
   it("unapplied filter with no color information and any matcher other than '=' should have empty style", () => {
     for (const matcher of NonEqualMatchers) {
-      const tree = FakeLabel(matcher, false).toJSON();
-      expect(tree.props.style).toMatchObject({});
+      const tree = ShallowLabel(matcher, false);
+      expect(tree.props().style).toMatchObject({});
     }
   });
 
   it("applied filter with color information and '=' matcher should have non empty style", () => {
     MockColors();
-    const tree = FakeLabel("=", true).toJSON();
-    expect(tree.props.style).toMatchObject({
+    const tree = ShallowLabel("=", true);
+    expect(tree.props().style).toMatchObject({
       color: "rgba(1, 2, 3, 100)",
       backgroundColor: "rgba(4, 5, 6, 200)"
     });
   });
 
   it("applied filter with no color information and '=' matcher should have empty style", () => {
-    const tree = FakeLabel("=", true).toJSON();
-    expect(tree.props.style).toMatchObject({});
+    const tree = ShallowLabel("=", true);
+    expect(tree.props().style).toMatchObject({});
   });
 
   it("applied filter with no color information and any matcher other than '=' should have empty style", () => {
     for (const matcher of NonEqualMatchers) {
-      const tree = FakeLabel(matcher, true).toJSON();
-      expect(tree.props.style).toMatchObject({});
+      const tree = ShallowLabel(matcher, true);
+      expect(tree.props().style).toMatchObject({});
     }
   });
 });
@@ -168,14 +164,14 @@ describe("<FilterInputLabel /> onChange", () => {
       NewUnappliedFilter("foo=bar"),
       NewUnappliedFilter("bar=baz")
     ];
-    const component = renderer.create(
+    const tree = mount(
       <FilterInputLabel
         alertStore={alertStore}
         filter={alertStore.filters.values[0]}
       />
     );
-    const button = component.root.findByType("button");
-    button.props.onClick();
+    const button = tree.find("button");
+    button.simulate("click");
     expect(alertStore.filters.values).toHaveLength(1);
     expect(alertStore.filters.values).toContainEqual(
       NewUnappliedFilter("bar=baz")

From 10f841c7de0c2bcc7b7968033ba30bca79be073c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 00:03:54 +0100
Subject: [PATCH 05/16] refactor(tests): missing test coverage

---
 .../Labels/FilterInputLabel/index.test.js     | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js
index 0fab42590..ac0daa404 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.test.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js
@@ -23,7 +23,7 @@ const MockColors = () => {
   };
 };
 
-const ShallowLabel = (matcher, applied) => {
+const ShallowLabel = (matcher, applied, valid) => {
   const name = "foo";
   const value = "bar";
   const filter = NewUnappliedFilter(`${name}${matcher}${value}`);
@@ -31,11 +31,12 @@ const ShallowLabel = (matcher, applied) => {
   filter.name = name;
   filter.matcher = matcher;
   filter.value = value;
+  filter.isValid = valid;
   return shallow(<FilterInputLabel alertStore={alertStore} filter={filter} />);
 };
 
 const ValidateClass = (matcher, applied, expectedClass) => {
-  const tree = ShallowLabel(matcher, applied);
+  const tree = ShallowLabel(matcher, applied, true);
   expect(tree.props().className.split(" ")).toContain(expectedClass);
 };
 
@@ -88,25 +89,25 @@ describe("<FilterInputLabel /> className", () => {
 describe("<FilterInputLabel /> style", () => {
   it("unapplied filter with color information and '=' matcher should have empty style", () => {
     MockColors();
-    const tree = ShallowLabel("=", false);
+    const tree = ShallowLabel("=", false, true);
     expect(tree.props().style).toMatchObject({});
   });
 
   it("unapplied filter with no color information and '=' matcher should have empty style", () => {
-    const tree = ShallowLabel("=", false);
+    const tree = ShallowLabel("=", false, true);
     expect(tree.props().style).toMatchObject({});
   });
 
   it("unapplied filter with no color information and any matcher other than '=' should have empty style", () => {
     for (const matcher of NonEqualMatchers) {
-      const tree = ShallowLabel(matcher, false);
+      const tree = ShallowLabel(matcher, false, true);
       expect(tree.props().style).toMatchObject({});
     }
   });
 
   it("applied filter with color information and '=' matcher should have non empty style", () => {
     MockColors();
-    const tree = ShallowLabel("=", true);
+    const tree = ShallowLabel("=", true, true);
     expect(tree.props().style).toMatchObject({
       color: "rgba(1, 2, 3, 100)",
       backgroundColor: "rgba(4, 5, 6, 200)"
@@ -114,13 +115,13 @@ describe("<FilterInputLabel /> style", () => {
   });
 
   it("applied filter with no color information and '=' matcher should have empty style", () => {
-    const tree = ShallowLabel("=", true);
+    const tree = ShallowLabel("=", true, true);
     expect(tree.props().style).toMatchObject({});
   });
 
   it("applied filter with no color information and any matcher other than '=' should have empty style", () => {
     for (const matcher of NonEqualMatchers) {
-      const tree = ShallowLabel(matcher, true);
+      const tree = ShallowLabel(matcher, true, true);
       expect(tree.props().style).toMatchObject({});
     }
   });
@@ -178,3 +179,13 @@ describe("<FilterInputLabel /> onChange", () => {
     );
   });
 });
+
+describe("<FilterInputLabel /> render", () => {
+  it("invalid filter matches snapshot", () => {
+    const tree = ShallowLabel("=", true, false);
+    const errorSpan = tree.find(".text-danger");
+    expect(errorSpan).toHaveLength(1);
+    const errorIcon = errorSpan.find("FontAwesomeIcon");
+    expect(errorIcon).toHaveLength(1);
+  });
+});

From dced537adb38b2d306cc6224c5463ced9be54001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 16:18:21 +0100
Subject: [PATCH 06/16] feat(tests): add missing navbar test for resize events

---
 ui/src/Components/NavBar/index.js      |  8 ++++----
 ui/src/Components/NavBar/index.test.js | 20 +++++++++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 7d9c551c5..92e617587 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -15,8 +15,8 @@ import { SilenceModal } from "Components/SilenceModal";
 
 import "./index.css";
 
-const navbarResize = function(width, height) {
-  document.body.style["padding-top"] = height + 4 + "px";
+const NavbarOnResize = function(width, height) {
+  document.body.style["padding-top"] = `${height + 4}px`;
 };
 
 const NavBar = observer(
@@ -41,7 +41,7 @@ const NavBar = observer(
       return (
         <div className="container">
           <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
-            <ReactResizeDetector handleHeight onResize={navbarResize} />
+            <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
             <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
               {alertStore.info.totalAlerts}
               <FetchIndicator status={alertStore.status.value.toString()} />
@@ -67,4 +67,4 @@ const NavBar = observer(
   }
 );
 
-export { NavBar };
+export { NavBar, NavbarOnResize };
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index ca76b2367..8cb85595d 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -7,7 +7,7 @@ import moment from "moment";
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
-import { NavBar } from ".";
+import { NavBar, NavbarOnResize } from ".";
 
 let alertStore;
 let settingsStore;
@@ -76,3 +76,21 @@ describe("<NavBar />", () => {
     ValidateNavClass(3, "flex-column");
   });
 });
+
+describe("NavbarOnResize()", () => {
+  it("body 'padding-top' style is updated after calling NavbarOnResize()", () => {
+    NavbarOnResize(0, 10);
+    expect(
+      window
+        .getComputedStyle(document.body, null)
+        .getPropertyValue("padding-top")
+    ).toBe("14px");
+
+    NavbarOnResize(0, 36);
+    expect(
+      window
+        .getComputedStyle(document.body, null)
+        .getPropertyValue("padding-top")
+    ).toBe("40px");
+  });
+});

From a65c812669f37f904ef2960b664245486f52c3e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 16:42:48 +0100
Subject: [PATCH 07/16] fix(ui): remove duplicated actions

---
 .../Components/SilenceModal/DateTimeSelect/index.js  | 12 ++++++------
 ui/src/Stores/SilenceFormStore.js                    | 11 -----------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index 3a4ad12ff..65f653a9f 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -123,25 +123,25 @@ const TabContentDuration = observer(({ silenceFormStore }) => {
       <Duration
         label="days"
         value={silenceFormStore.data.toDuration.days}
-        onInc={() => silenceFormStore.data.incDuration(60 * 24)}
-        onDec={() => silenceFormStore.data.decDuration(60 * 24)}
+        onInc={() => silenceFormStore.data.incEnd(60 * 24)}
+        onDec={() => silenceFormStore.data.decEnd(60 * 24)}
       />
       <Duration
         label="hours"
         value={silenceFormStore.data.toDuration.hours}
-        onInc={() => silenceFormStore.data.incDuration(60)}
-        onDec={() => silenceFormStore.data.decDuration(60)}
+        onInc={() => silenceFormStore.data.incEnd(60)}
+        onDec={() => silenceFormStore.data.decEnd(60)}
       />
       <Duration
         label="minutes"
         value={silenceFormStore.data.toDuration.minutes}
         onInc={() =>
-          silenceFormStore.data.incDuration(
+          silenceFormStore.data.incEnd(
             CalculateChangeValue(silenceFormStore.data.toDuration.minutes, 5)
           )
         }
         onDec={() =>
-          silenceFormStore.data.decDuration(
+          silenceFormStore.data.decEnd(
             CalculateChangeValue(silenceFormStore.data.toDuration.minutes, 5)
           )
         }
diff --git a/ui/src/Stores/SilenceFormStore.js b/ui/src/Stores/SilenceFormStore.js
index d6d02d947..6ec4590a1 100644
--- a/ui/src/Stores/SilenceFormStore.js
+++ b/ui/src/Stores/SilenceFormStore.js
@@ -141,15 +141,6 @@ class SilenceFormStore {
         this.verifyStarEnd();
       },
 
-      incDuration(minutes) {
-        this.endsAt = moment(this.endsAt).add(minutes, "minutes");
-        this.verifyStarEnd();
-      },
-      decDuration(minutes) {
-        this.endsAt = moment(this.endsAt).subtract(minutes, "minutes");
-        this.verifyStarEnd();
-      },
-
       get toAlertmanagerPayload() {
         const payload = {
           matchers: this.matchers.map(m => ({
@@ -194,8 +185,6 @@ class SilenceFormStore {
       decStart: action.bound,
       incEnd: action.bound,
       decEnd: action.bound,
-      incDuration: action.bound,
-      decDuration: action.bound,
       toAlertmanagerPayload: computed,
       toDuration: computed
     },

From dac3637f879234a7726831306777317ad93da4c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 16:43:10 +0100
Subject: [PATCH 08/16] feat(tests): more test coverage for SilenceFormStore

---
 ui/src/Stores/SilenceFormStore.test.js | 97 ++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/ui/src/Stores/SilenceFormStore.test.js b/ui/src/Stores/SilenceFormStore.test.js
index 581ad2fa4..0197367f7 100644
--- a/ui/src/Stores/SilenceFormStore.test.js
+++ b/ui/src/Stores/SilenceFormStore.test.js
@@ -121,3 +121,100 @@ describe("SilenceFormStore.data", () => {
     expect(store.data.toAlertmanagerPayload).toMatchSnapshot();
   });
 });
+
+describe("SilenceFormStore.data startsAt & endsAt validation", () => {
+  it("toDuration returns correct duration for 5d 0h 1m", () => {
+    store.data.startsAt = moment([2000, 1, 1, 0, 0, 0]);
+    store.data.endsAt = moment([2000, 1, 6, 0, 1, 15]);
+    expect(store.data.toDuration).toMatchObject({
+      days: 5,
+      hours: 0,
+      minutes: 1
+    });
+  });
+
+  it("toDuration returns correct duration for 2h 15m", () => {
+    store.data.startsAt = moment([2000, 1, 1, 0, 0, 0]);
+    store.data.endsAt = moment([2000, 1, 1, 2, 15, 0]);
+    expect(store.data.toDuration).toMatchObject({
+      days: 0,
+      hours: 2,
+      minutes: 15
+    });
+  });
+
+  it("toDuration returns correct duration for 59m", () => {
+    store.data.startsAt = moment([2000, 1, 1, 0, 10, 0]);
+    store.data.endsAt = moment([2000, 1, 1, 1, 9, 0]);
+    expect(store.data.toDuration).toMatchObject({
+      days: 0,
+      hours: 0,
+      minutes: 59
+    });
+  });
+
+  it("verifyStarEnd() doesn't do anything if endsAt if after startsAt", () => {
+    const startsAt = moment([2063, 1, 1, 0, 0, 0]);
+    const endsAt = moment([2063, 1, 1, 1, 1, 0]);
+    store.data.startsAt = startsAt;
+    store.data.endsAt = endsAt;
+    store.data.verifyStarEnd();
+    expect(store.data.startsAt.toISOString()).toBe(startsAt.toISOString());
+    expect(store.data.endsAt.toISOString()).toBe(endsAt.toISOString());
+  });
+
+  it("verifyStarEnd() updates startsAt if it's before now()", () => {
+    const now = moment().second(0);
+    const startsAt = moment([2000, 1, 1, 0, 0, 1]);
+    const endsAt = moment([2063, 1, 1, 0, 0, 0]);
+    store.data.startsAt = startsAt;
+    store.data.endsAt = endsAt;
+    store.data.verifyStarEnd();
+    expect(store.data.startsAt.isSameOrAfter(now)).toBeTruthy();
+    expect(store.data.endsAt.toISOString()).toBe(endsAt.toISOString());
+  });
+
+  it("verifyStarEnd() updates endsAt if it's before startsAt", () => {
+    const startsAt = moment([2063, 1, 1, 0, 0, 1]);
+    const endsAt = moment([2063, 1, 1, 0, 0, 0]);
+    store.data.startsAt = startsAt;
+    store.data.endsAt = endsAt;
+    store.data.verifyStarEnd();
+    expect(store.data.startsAt.toISOString()).toBe(startsAt.toISOString());
+    expect(store.data.endsAt.toISOString()).toBe(
+      moment([2063, 1, 1, 0, 1, 1]).toISOString()
+    );
+  });
+
+  it("incStart(7) adds 7 minutes to startsAt", () => {
+    const startsAt = moment([2063, 1, 1, 0, 0, 1]);
+    store.data.startsAt = startsAt;
+    store.data.incStart(7);
+    const diffMS = store.data.startsAt.diff(startsAt);
+    expect(diffMS).toBe(7 * 60 * 1000);
+  });
+
+  it("decStart(14) subtracts 14 minutes from startsAt", () => {
+    const startsAt = moment([2063, 1, 1, 0, 0, 1]);
+    store.data.startsAt = startsAt;
+    store.data.decStart(14);
+    const diffMS = store.data.startsAt.diff(startsAt);
+    expect(diffMS).toBe(-14 * 60 * 1000);
+  });
+
+  it("incEnd(120) adds 120 minutes to endsAt", () => {
+    const endsAt = moment([2063, 1, 1, 0, 0, 1]);
+    store.data.endsAt = endsAt;
+    store.data.incEnd(120);
+    const diffMS = store.data.endsAt.diff(endsAt);
+    expect(diffMS).toBe(120 * 60 * 1000);
+  });
+
+  it("decEnd(1) subtracts 1 minute from endsAt", () => {
+    const endsAt = moment([2063, 1, 1, 0, 0, 1]);
+    store.data.endsAt = endsAt;
+    store.data.decEnd(1);
+    const diffMS = store.data.endsAt.diff(endsAt);
+    expect(diffMS).toBe(-1 * 60 * 1000);
+  });
+});

From 5432fee94bd99fc2ca0741e3ad73e7947b7008c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 23:15:11 +0100
Subject: [PATCH 09/16] fix(tests): add coverage for empty string rendering

---
 ui/src/Stores/SilenceFormStore.test.js                    | 2 ++
 ui/src/Stores/__snapshots__/SilenceFormStore.test.js.snap | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/ui/src/Stores/SilenceFormStore.test.js b/ui/src/Stores/SilenceFormStore.test.js
index 0197367f7..bac6d3287 100644
--- a/ui/src/Stores/SilenceFormStore.test.js
+++ b/ui/src/Stores/SilenceFormStore.test.js
@@ -114,6 +114,8 @@ describe("SilenceFormStore.data", () => {
   it("toAlertmanagerPayload creates payload that matches snapshot", () => {
     const group = MockGroup();
     store.data.fillMatchersFromGroup(group);
+    // add empty matcher so we test empty string rendering
+    store.data.addEmptyMatcher();
     store.data.startsAt = moment([2000, 1, 1, 0, 0, 0]);
     store.data.endsAt = moment([2000, 1, 1, 1, 0, 0]);
     store.data.createdBy = "me@example.com";
diff --git a/ui/src/Stores/__snapshots__/SilenceFormStore.test.js.snap b/ui/src/Stores/__snapshots__/SilenceFormStore.test.js.snap
index 39e22419b..ed4b8cca6 100644
--- a/ui/src/Stores/__snapshots__/SilenceFormStore.test.js.snap
+++ b/ui/src/Stores/__snapshots__/SilenceFormStore.test.js.snap
@@ -26,6 +26,11 @@ Object {
       "name": "cluster",
       "value": "(dev|prod)",
     },
+    Object {
+      "isRegex": false,
+      "name": "",
+      "value": "",
+    },
   ],
   "startsAt": "2000-02-01T00:00:00.000Z",
 }

From fcfb4d805a125d585d0c7fba3d6c63ccfa33e28b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 00:21:34 +0100
Subject: [PATCH 10/16] feat(tests): more test coverage for SilenceModal

---
 .../SilenceModal/SilenceForm.test.js          | 109 ++++++++++++++++++
 .../SilenceModal/SilenceModalContent.test.js  |  40 +++++++
 2 files changed, 149 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/SilenceForm.test.js
 create mode 100644 ui/src/Components/SilenceModal/SilenceModalContent.test.js

diff --git a/ui/src/Components/SilenceModal/SilenceForm.test.js b/ui/src/Components/SilenceModal/SilenceForm.test.js
new file mode 100644
index 000000000..5db5e0f64
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilenceForm.test.js
@@ -0,0 +1,109 @@
+import React from "react";
+
+import { mount, shallow } from "enzyme";
+
+import { AlertStore } from "Stores/AlertStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { SilenceForm } from "./SilenceForm";
+
+let alertStore;
+let silenceFormStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+  silenceFormStore = new SilenceFormStore();
+});
+
+const ShallowSilenceForm = () => {
+  return shallow(
+    <SilenceForm alertStore={alertStore} silenceFormStore={silenceFormStore} />
+  );
+};
+
+const MountedSilenceForm = () => {
+  return mount(
+    <SilenceForm alertStore={alertStore} silenceFormStore={silenceFormStore} />
+  );
+};
+
+describe("<SilenceForm /> matchers", () => {
+  it("has an empty matcher selects on default render", () => {
+    const tree = ShallowSilenceForm();
+    const matchers = tree.find("SilenceMatch");
+    expect(matchers).toHaveLength(1);
+    expect(silenceFormStore.data.matchers).toHaveLength(1);
+  });
+
+  it("clicking 'Add more' button adds another matcher", () => {
+    const tree = ShallowSilenceForm();
+    const button = tree.find("button[type='button']");
+    button.simulate("click", { preventDefault: jest.fn() });
+    const matchers = tree.find("SilenceMatch");
+    expect(matchers).toHaveLength(2);
+    expect(silenceFormStore.data.matchers).toHaveLength(2);
+  });
+
+  it("clicking trash icon on a matcher select removes it", () => {
+    silenceFormStore.data.addEmptyMatcher();
+    silenceFormStore.data.addEmptyMatcher();
+    silenceFormStore.data.addEmptyMatcher();
+    const tree = MountedSilenceForm();
+    expect(silenceFormStore.data.matchers).toHaveLength(3);
+
+    const matchers = tree.find("SilenceMatch");
+    const toDelete = matchers.at(1);
+    const button = toDelete.find("button");
+    button.simulate("click");
+    expect(silenceFormStore.data.matchers).toHaveLength(2);
+  });
+});
+
+describe("<SilenceForm /> preview", () => {
+  it("doesn't render SilencePreview when previewCollapse.hidden is true", () => {
+    const tree = ShallowSilenceForm();
+    const instance = tree.instance();
+    instance.previewCollapse.hidden = true;
+    expect(tree.find("SilencePreview")).toHaveLength(0);
+  });
+
+  it("renders SilencePreview when previewCollapse.hidden is false", () => {
+    const tree = ShallowSilenceForm();
+    const instance = tree.instance();
+    instance.previewCollapse.hidden = false;
+    expect(tree.find("SilencePreview")).toHaveLength(1);
+  });
+
+  it("clicking on the toggle icon toggles SilencePreview", () => {
+    const tree = ShallowSilenceForm();
+    const button = tree.find("a.btn.cursor-pointer.text-muted");
+    expect(tree.find("SilencePreview")).toHaveLength(0);
+    button.simulate("click");
+    expect(tree.find("SilencePreview")).toHaveLength(1);
+    button.simulate("click");
+    expect(tree.find("SilencePreview")).toHaveLength(0);
+  });
+});
+
+describe("<SilenceForm /> inputs", () => {
+  it("changing author input updates SilenceFormStore", () => {
+    const tree = MountedSilenceForm();
+    const input = tree.find("input[placeholder='Author email']");
+    input.simulate("change", { target: { value: "me@example.com" } });
+    expect(silenceFormStore.data.author).toBe("me@example.com");
+  });
+
+  it("changing comment input updates SilenceFormStore", () => {
+    const tree = MountedSilenceForm();
+    const input = tree.find("input[placeholder='Comment']");
+    input.simulate("change", { target: { value: "fake comment" } });
+    expect(silenceFormStore.data.comment).toBe("fake comment");
+  });
+});
+
+describe("<SilenceForm />", () => {
+  it("calling submit marks form as in progress", () => {
+    const tree = ShallowSilenceForm();
+    tree.simulate("submit", { preventDefault: jest.fn() });
+    expect(silenceFormStore.data.inProgress).toBe(true);
+  });
+});
diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.test.js b/ui/src/Components/SilenceModal/SilenceModalContent.test.js
new file mode 100644
index 000000000..5d570f8fe
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.test.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import { AlertStore } from "Stores/AlertStore";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { SilenceModalContent } from "./SilenceModalContent";
+
+let alertStore;
+let silenceFormStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+  silenceFormStore = new SilenceFormStore();
+});
+
+const ShallowSilenceModalContent = () => {
+  return shallow(
+    <SilenceModalContent
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
+  );
+};
+
+describe("<SilenceModalContent />", () => {
+  it("renders SilenceForm when silenceFormStore.data.inProgress is false", () => {
+    silenceFormStore.data.inProgress = false;
+    const tree = ShallowSilenceModalContent();
+    const form = tree.find("SilenceForm");
+    expect(form).toHaveLength(1);
+  });
+
+  it("renders SilenceSubmitController when silenceFormStore.data.inProgress is true", () => {
+    silenceFormStore.data.inProgress = true;
+    const tree = ShallowSilenceModalContent();
+    const ctrl = tree.find("SilenceSubmitController");
+    expect(ctrl).toHaveLength(1);
+  });
+});

From b2a0e27cbe10c50f1bbeeea8f91fde30a684e3a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 09:46:12 +0100
Subject: [PATCH 11/16] fix(tests): add tests for matcher delete button
 visibility

---
 .../SilenceModal/SilenceForm.test.js          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/ui/src/Components/SilenceModal/SilenceForm.test.js b/ui/src/Components/SilenceModal/SilenceForm.test.js
index 5db5e0f64..f0d189c80 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.test.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.test.js
@@ -43,6 +43,26 @@ describe("<SilenceForm /> matchers", () => {
     expect(silenceFormStore.data.matchers).toHaveLength(2);
   });
 
+  it("trash icon is not visible when there's only one matcher", () => {
+    const tree = MountedSilenceForm();
+    expect(silenceFormStore.data.matchers).toHaveLength(1);
+
+    const matcher = tree.find("SilenceMatch");
+    const button = matcher.find("button");
+    expect(button).toHaveLength(0);
+  });
+
+  it("trash icon is visible when there are two matchers", () => {
+    silenceFormStore.data.addEmptyMatcher();
+    silenceFormStore.data.addEmptyMatcher();
+    const tree = MountedSilenceForm();
+    expect(silenceFormStore.data.matchers).toHaveLength(2);
+
+    const matcher = tree.find("SilenceMatch");
+    const button = matcher.find("button");
+    expect(button).toHaveLength(2);
+  });
+
   it("clicking trash icon on a matcher select removes it", () => {
     silenceFormStore.data.addEmptyMatcher();
     silenceFormStore.data.addEmptyMatcher();

From 1492d482782dbf9d2d97c7adb2589bcd945f79aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 17:05:59 +0100
Subject: [PATCH 12/16] fix(ui): remove duplicated code and export functions
 for testing

---
 ui/src/Stores/SilenceFormStore.js | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/ui/src/Stores/SilenceFormStore.js b/ui/src/Stores/SilenceFormStore.js
index 6ec4590a1..8ef4d3a31 100644
--- a/ui/src/Stores/SilenceFormStore.js
+++ b/ui/src/Stores/SilenceFormStore.js
@@ -4,7 +4,7 @@ import uniqueId from "lodash.uniqueid";
 
 import moment from "moment";
 
-const NewEmptyMatcher = id => {
+const NewEmptyMatcher = () => {
   return {
     id: uniqueId(),
     name: "",
@@ -17,7 +17,7 @@ const NewEmptyMatcher = id => {
   };
 };
 
-const ValueToObject = value => ({ label: value, value: value });
+const MatcherValueToObject = value => ({ label: value, value: value });
 
 class SilenceFormStore {
   // this is used to store modal visibility toggle
@@ -75,16 +75,10 @@ class SilenceFormStore {
         for (const [key, value] of Object.entries(
           Object.assign({}, group.labels, group.shared.labels)
         )) {
-          matchers.push({
-            id: uniqueId(),
-            name: key,
-            values: [ValueToObject(value)],
-            suggestions: {
-              names: [],
-              values: []
-            },
-            isRegex: false
-          });
+          const matcher = NewEmptyMatcher();
+          matcher.name = key;
+          matcher.values = [MatcherValueToObject(value)];
+          matchers.push(matcher);
         }
 
         // add matchers for all unique labels in this group
@@ -101,7 +95,9 @@ class SilenceFormStore {
           matchers.push({
             id: uniqueId(),
             name: key,
-            values: [...values].sort().map(value => ValueToObject(value)),
+            values: [...values]
+              .sort()
+              .map(value => MatcherValueToObject(value)),
             suggestions: {
               names: [],
               values: []
@@ -192,4 +188,4 @@ class SilenceFormStore {
   );
 }
 
-export { SilenceFormStore };
+export { SilenceFormStore, NewEmptyMatcher, MatcherValueToObject };

From ba4a38e87e8f5e02c31e2cb8c9845ccefdbbeba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 17:06:15 +0100
Subject: [PATCH 13/16] feat(tests): test coverage for label inputs

---
 .../SilenceModal/LabelNameInput.test.js       | 89 +++++++++++++++++++
 .../SilenceModal/LabelValueInput.test.js      | 88 ++++++++++++++++++
 .../__snapshots__/LabelNameInput.test.js.snap | 41 +++++++++
 .../LabelValueInput.test.js.snap              | 37 ++++++++
 4 files changed, 255 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/LabelNameInput.test.js
 create mode 100644 ui/src/Components/SilenceModal/LabelValueInput.test.js
 create mode 100644 ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
 create mode 100644 ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap

diff --git a/ui/src/Components/SilenceModal/LabelNameInput.test.js b/ui/src/Components/SilenceModal/LabelNameInput.test.js
new file mode 100644
index 000000000..dbcc8934e
--- /dev/null
+++ b/ui/src/Components/SilenceModal/LabelNameInput.test.js
@@ -0,0 +1,89 @@
+import React from "react";
+
+import { shallow, mount } from "enzyme";
+
+import { NewEmptyMatcher, MatcherValueToObject } from "Stores/SilenceFormStore";
+import { LabelNameInput } from "./LabelNameInput";
+
+let matcher;
+
+beforeEach(() => {
+  matcher = NewEmptyMatcher();
+  matcher.name = "name";
+  matcher.suggestions.names = [
+    MatcherValueToObject("job"),
+    MatcherValueToObject("cluster")
+  ];
+  matcher.suggestions.values = [
+    MatcherValueToObject("foo"),
+    MatcherValueToObject("bar")
+  ];
+});
+
+const ShallowLabelNameInput = () => {
+  return shallow(<LabelNameInput matcher={matcher} />);
+};
+
+const MountedLabelNameInput = () => {
+  return mount(<LabelNameInput matcher={matcher} />);
+};
+
+const ValidateSuggestions = () => {
+  const tree = MountedLabelNameInput();
+  // click on the react-select component doesn't seem to trigger options
+  // rendering in tests, so change the input instead
+  tree.find("input").simulate("change", { target: { value: "f" } });
+  return tree;
+};
+
+describe("<LabelNameInput />", () => {
+  it("matches snapshot", () => {
+    const tree = ShallowLabelNameInput();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("renders suggestions", () => {
+    const tree = ValidateSuggestions();
+    const options = tree.find("[role='option']");
+    expect(options).toHaveLength(2);
+    expect(options.at(0).text()).toBe("job");
+    expect(options.at(1).text()).toBe("cluster");
+  });
+
+  it("clicking on options updates the matcher", () => {
+    const tree = ValidateSuggestions();
+    const option = tree.find("[role='option']").at(0);
+    option.simulate("click");
+    expect(matcher.name).toBe("job");
+  });
+
+  it("populates suggestions on mount", done => {
+    fetch
+      .once(JSON.stringify(["name1", "name2", "name3"]))
+      .once(JSON.stringify(["value1", "value2", "value3"]));
+    ShallowLabelNameInput();
+    // use timeout since mount will call fetch
+    setTimeout(() => {
+      expect(matcher.suggestions.names).toHaveLength(3);
+      for (let i = 0; i < 3; i++) {
+        expect(matcher.suggestions.names[i]).toMatchObject(
+          MatcherValueToObject(`name${i + 1}`)
+        );
+        expect(matcher.suggestions.values[i]).toMatchObject(
+          MatcherValueToObject(`value${i + 1}`)
+        );
+      }
+      done();
+    }, 100);
+  });
+
+  it("suggestions are empited on failed fetch", done => {
+    fetch.mockReject(new Error("fake error message"));
+    ShallowLabelNameInput();
+    // use timeout since mount will call fetch
+    setTimeout(() => {
+      expect(matcher.suggestions.names).toHaveLength(0);
+      done();
+    }, 100);
+  });
+});
diff --git a/ui/src/Components/SilenceModal/LabelValueInput.test.js b/ui/src/Components/SilenceModal/LabelValueInput.test.js
new file mode 100644
index 000000000..2fc487d2d
--- /dev/null
+++ b/ui/src/Components/SilenceModal/LabelValueInput.test.js
@@ -0,0 +1,88 @@
+import React from "react";
+
+import { shallow, mount } from "enzyme";
+
+import { NewEmptyMatcher, MatcherValueToObject } from "Stores/SilenceFormStore";
+import { LabelValueInput } from "./LabelValueInput";
+
+let matcher;
+
+beforeEach(() => {
+  matcher = NewEmptyMatcher();
+  matcher.name = "name";
+  matcher.suggestions.names = [
+    MatcherValueToObject("job"),
+    MatcherValueToObject("cluster")
+  ];
+  matcher.suggestions.values = [
+    MatcherValueToObject("foo"),
+    MatcherValueToObject("bar")
+  ];
+});
+
+const ShallowLabelValueInput = () => {
+  return shallow(<LabelValueInput matcher={matcher} />);
+};
+
+const MountedLabelValueInput = () => {
+  return mount(<LabelValueInput matcher={matcher} />);
+};
+
+const ValidateSuggestions = () => {
+  const tree = MountedLabelValueInput();
+  // click on the react-select component doesn't seem to trigger options
+  // rendering in tests, so change the input instead
+  tree.find("input").simulate("change", { target: { value: "f" } });
+  return tree;
+};
+
+describe("<LabelValueInput />", () => {
+  it("matches snapshot", () => {
+    const tree = ShallowLabelValueInput();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("renders suggestions", () => {
+    const tree = ValidateSuggestions();
+    const options = tree.find("[role='option']");
+    expect(options).toHaveLength(2);
+    expect(options.at(0).text()).toBe("foo");
+    expect(options.at(1).text()).toBe("bar");
+  });
+
+  it("clicking on options appends them to matcher.values", () => {
+    const tree = ValidateSuggestions();
+    const options = tree.find("[role='option']");
+    options.at(0).simulate("click");
+    options.at(1).simulate("click");
+    expect(matcher.values).toHaveLength(2);
+    expect(matcher.values).toContainEqual(MatcherValueToObject("foo"));
+    expect(matcher.values).toContainEqual(MatcherValueToObject("bar"));
+  });
+
+  it("selecting one option doesn't force matcher.isRegex=true", () => {
+    const tree = ValidateSuggestions();
+    expect(matcher.isRegex).toBe(false);
+    const options = tree.find("[role='option']");
+    options.at(0).simulate("click");
+    expect(matcher.isRegex).toBe(false);
+  });
+
+  it("selecting one option when matcher.isRegex=true changes it back to false", () => {
+    matcher.isRegex = true;
+    const tree = ValidateSuggestions();
+    expect(matcher.isRegex).toBe(true);
+    const options = tree.find("[role='option']");
+    options.at(0).simulate("click");
+    expect(matcher.isRegex).toBe(false);
+  });
+
+  it("selecting multiple options forces matcher.isRegex=true", () => {
+    const tree = ValidateSuggestions();
+    expect(matcher.isRegex).toBe(false);
+    const options = tree.find("[role='option']");
+    options.at(0).simulate("click");
+    options.at(1).simulate("click");
+    expect(matcher.isRegex).toBe(true);
+  });
+});
diff --git a/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
new file mode 100644
index 000000000..402cf5405
--- /dev/null
+++ b/ui/src/Components/SilenceModal/__snapshots__/LabelNameInput.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LabelNameInput /> matches snapshot 1`] = `
+<StateManager
+  defaultInputValue=""
+  defaultMenuIsOpen={false}
+  defaultValue={
+    Object {
+      "label": "name",
+      "value": "name",
+    }
+  }
+  instanceId="silence-input-label-name-1"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "label": "job",
+        "value": "job",
+      },
+      Object {
+        "label": "cluster",
+        "value": "cluster",
+      },
+    ]
+  }
+  placeholder="Label name"
+  styles={
+    Object {
+      "control": [Function],
+      "indicatorsContainer": [Function],
+      "multiValue": [Function],
+      "multiValueLabel": [Function],
+      "multiValueRemove": [Function],
+      "option": [Function],
+      "valueContainer": [Function],
+      "valueLabel": [Function],
+    }
+  }
+/>
+`;
diff --git a/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap
new file mode 100644
index 000000000..bd95bf6d4
--- /dev/null
+++ b/ui/src/Components/SilenceModal/__snapshots__/LabelValueInput.test.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LabelValueInput /> matches snapshot 1`] = `
+<StateManager
+  defaultInputValue=""
+  defaultMenuIsOpen={false}
+  defaultValue={Array []}
+  instanceId="silence-input-label-value-1"
+  isMulti={true}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "label": "foo",
+        "value": "foo",
+      },
+      Object {
+        "label": "bar",
+        "value": "bar",
+      },
+    ]
+  }
+  placeholder="Label value"
+  styles={
+    Object {
+      "control": [Function],
+      "indicatorsContainer": [Function],
+      "multiValue": [Function],
+      "multiValueLabel": [Function],
+      "multiValueRemove": [Function],
+      "option": [Function],
+      "valueContainer": [Function],
+      "valueLabel": [Function],
+    }
+  }
+/>
+`;

From 1d5c33b686fb652d6e82aa1c7a22e5d0d1791cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 17:14:37 +0100
Subject: [PATCH 14/16] fix(ui): remove debug logs

---
 ui/src/Components/SilenceModal/SilenceMatch.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/Components/SilenceModal/SilenceMatch.js b/ui/src/Components/SilenceModal/SilenceMatch.js
index c075aec85..ddeb67328 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch.js
@@ -25,7 +25,6 @@ const SilenceMatch = observer(
 
     onIsRegexChange = action(event => {
       const { matcher } = this.props;
-      console.info(matcher.values);
 
       // only allow to change value if we don't have multiple values
       if (matcher.values.length <= 1) {

From 65aa0ac30b28be159aa9c8e0c2bbe56f872bfb7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 17:14:54 +0100
Subject: [PATCH 15/16] feat(tests): add tests for SilenceSubmitController

---
 .../SilenceSubmitController.test.js           | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/SilenceSubmitController.test.js

diff --git a/ui/src/Components/SilenceModal/SilenceSubmitController.test.js b/ui/src/Components/SilenceModal/SilenceSubmitController.test.js
new file mode 100644
index 000000000..c8be7db3f
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilenceSubmitController.test.js
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import {
+  SilenceFormStore,
+  MatcherValueToObject
+} from "Stores/SilenceFormStore";
+import { SilenceSubmitController } from "./SilenceSubmitController";
+
+let silenceFormStore;
+
+beforeEach(() => {
+  silenceFormStore = new SilenceFormStore();
+});
+
+const ShallowSilenceSubmitController = () => {
+  return shallow(
+    <SilenceSubmitController silenceFormStore={silenceFormStore} />
+  );
+};
+
+describe("<SilenceSubmitController />", () => {
+  it("renders all passed SilenceSubmitProgress", () => {
+    silenceFormStore.data.alertmanagers.push(MatcherValueToObject("am1"));
+    silenceFormStore.data.alertmanagers.push(MatcherValueToObject("am2"));
+    const tree = ShallowSilenceSubmitController();
+    const alertmanagers = tree.find("SilenceSubmitProgress");
+    expect(alertmanagers).toHaveLength(2);
+  });
+
+  it("resets the form on 'Back' button click", () => {
+    silenceFormStore.data.inProgress = true;
+    const tree = ShallowSilenceSubmitController();
+    const button = tree.find("button");
+    button.simulate("click");
+    expect(silenceFormStore.data.inProgress).toBe(false);
+  });
+});

From d8496418fc57b52c666a58c64c85413991386b3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 Aug 2018 17:28:21 +0100
Subject: [PATCH 16/16] feat(tests): add test coverage for SilenceMatch

---
 .../SilenceModal/SilenceMatch.test.js         | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 ui/src/Components/SilenceModal/SilenceMatch.test.js

diff --git a/ui/src/Components/SilenceModal/SilenceMatch.test.js b/ui/src/Components/SilenceModal/SilenceMatch.test.js
new file mode 100644
index 000000000..5a8ebb9c9
--- /dev/null
+++ b/ui/src/Components/SilenceModal/SilenceMatch.test.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import { NewEmptyMatcher, MatcherValueToObject } from "Stores/SilenceFormStore";
+import { SilenceMatch } from "./SilenceMatch";
+
+let matcher;
+
+beforeEach(() => {
+  matcher = NewEmptyMatcher();
+});
+
+const ShallowLabelValueInput = () => {
+  return shallow(<SilenceMatch matcher={matcher} />);
+};
+
+describe("<SilenceMatch />", () => {
+  it("allows changing matcher.isRegex value when matcher.values contains 1 element", () => {
+    matcher.values = [MatcherValueToObject("foo")];
+    const tree = ShallowLabelValueInput();
+    expect(matcher.isRegex).toBe(false);
+    const regex = tree.find("input[type='checkbox']");
+    regex.simulate("change", { target: { checked: true } });
+    expect(matcher.isRegex).toBe(true);
+  });
+
+  it("disallows changing matcher.isRegex value when matcher.values contains 2 elements", () => {
+    matcher.isRegex = true;
+    matcher.values = [MatcherValueToObject("foo"), MatcherValueToObject("bar")];
+    const tree = ShallowLabelValueInput();
+    expect(matcher.isRegex).toBe(true);
+    const regex = tree.find("input[type='checkbox']");
+    regex.simulate("change", { target: { checked: false } });
+    expect(matcher.isRegex).toBe(true);
+  });
+});