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