From 1b4f61140656aca3829b697317c810a7846824cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 22 Sep 2018 12:59:31 +0100
Subject: [PATCH] feat(ui): animate modals

---
 ui/src/Components/MainModal/index.js         |  5 ++-
 ui/src/Components/MainModal/index.test.js    | 43 +++++++++++-------
 ui/src/Components/SilenceModal/index.js      |  5 ++-
 ui/src/Components/SilenceModal/index.test.js | 46 +++++++++++---------
 4 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js
index af98d9d11..dbe27f815 100644
--- a/ui/src/Components/MainModal/index.js
+++ b/ui/src/Components/MainModal/index.js
@@ -9,6 +9,7 @@ import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { MountFade } from "Components/Animations/MountFade";
 import { MainModalContent } from "./MainModalContent";
 
 const MainModal = observer(
@@ -49,13 +50,13 @@ const MainModal = observer(
               <FontAwesomeIcon icon={faCog} />
             </a>
           </li>
-          {this.toggle.show ? (
+          <MountFade in={this.toggle.show} unmountOnExit>
             <MainModalContent
               alertStore={alertStore}
               settingsStore={settingsStore}
               onHide={this.toggle.hide}
             />
-          ) : null}
+          </MountFade>
         </React.Fragment>
       );
     }
diff --git a/ui/src/Components/MainModal/index.test.js b/ui/src/Components/MainModal/index.test.js
index fc0a699d6..daed8ce4c 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, mount } from "enzyme";
+import { mount } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -9,17 +9,15 @@ import { MainModal } from ".";
 let alertStore;
 let settingsStore;
 
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
 beforeEach(() => {
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
 });
 
-const ShallowMainModal = () => {
-  return shallow(
-    <MainModal alertStore={alertStore} settingsStore={settingsStore} />
-  );
-};
-
 const MountedMainModal = () => {
   return mount(
     <MainModal alertStore={alertStore} settingsStore={settingsStore} />
@@ -28,33 +26,46 @@ const MountedMainModal = () => {
 
 describe("<MainModal />", () => {
   it("only renders FontAwesomeIcon when modal is not shown", () => {
-    const tree = ShallowMainModal();
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    const tree = MountedMainModal();
+    expect(tree.find("FontAwesomeIcon")).toHaveLength(1);
+    expect(tree.find("MainModalContent")).toHaveLength(0);
   });
 
   it("renders the modal when it is shown", () => {
-    const tree = ShallowMainModal();
+    const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
+    expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0);
+    expect(tree.find("MainModalContent")).toHaveLength(1);
   });
 
   it("hides the modal when toggle() is called twice", () => {
-    const tree = ShallowMainModal();
+    const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
+
     toggle.simulate("click");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("MainModalContent")).toHaveLength(1);
+
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("MainModalContent")).toHaveLength(0);
   });
 
   it("hides the modal when hide() is called", () => {
-    const tree = ShallowMainModal();
+    const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
+
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
+    expect(tree.find("MainModalContent")).toHaveLength(1);
+
     const instance = tree.instance();
     instance.toggle.hide();
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("MainModalContent")).toHaveLength(0);
   });
 
   it("'modal-open' class is appended to body node when modal is visible", () => {
diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js
index 5ada556d4..b1f8b43d3 100644
--- a/ui/src/Components/SilenceModal/index.js
+++ b/ui/src/Components/SilenceModal/index.js
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
+import { MountFade } from "Components/Animations/MountFade";
 import { SilenceModalContent } from "./SilenceModalContent";
 
 import "./index.css";
@@ -53,14 +54,14 @@ const SilenceModal = observer(
               <FontAwesomeIcon icon={faBellSlash} />
             </a>
           </li>
-          {silenceFormStore.toggle.visible ? (
+          <MountFade in={silenceFormStore.toggle.visible} unmountOnExit>
             <SilenceModalContent
               alertStore={alertStore}
               silenceFormStore={silenceFormStore}
               settingsStore={settingsStore}
               onHide={this.toggleModal}
             />
-          ) : null}
+          </MountFade>
         </React.Fragment>
       );
     }
diff --git a/ui/src/Components/SilenceModal/index.test.js b/ui/src/Components/SilenceModal/index.test.js
index b1aa3d359..5205a0a67 100644
--- a/ui/src/Components/SilenceModal/index.test.js
+++ b/ui/src/Components/SilenceModal/index.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { shallow, mount } from "enzyme";
+import { mount } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -12,6 +12,7 @@ let settingsStore;
 let silenceFormStore;
 
 beforeAll(() => {
+  jest.useFakeTimers();
   fetch.mockResponse(JSON.stringify([]));
 });
 
@@ -21,16 +22,6 @@ beforeEach(() => {
   silenceFormStore = new SilenceFormStore();
 });
 
-const ShallowSilenceModal = () => {
-  return shallow(
-    <SilenceModal
-      alertStore={alertStore}
-      silenceFormStore={silenceFormStore}
-      settingsStore={settingsStore}
-    />
-  );
-};
-
 const MountedSilenceModal = () => {
   return mount(
     <SilenceModal
@@ -43,32 +34,47 @@ const MountedSilenceModal = () => {
 
 describe("<SilenceModal />", () => {
   it("only renders FontAwesomeIcon when modal is not shown", () => {
-    const tree = ShallowSilenceModal();
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    const tree = MountedSilenceModal();
+    expect(tree.find("FontAwesomeIcon")).toHaveLength(1);
+    expect(tree.find("SilenceModalContent")).toHaveLength(0);
   });
 
   it("renders the modal when it is shown", () => {
-    const tree = ShallowSilenceModal();
+    const tree = MountedSilenceModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon /><SilenceModalContent />");
+    expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0);
+    expect(tree.find("SilenceModalContent")).toHaveLength(1);
   });
 
   it("hides the modal when toggle() is called twice", () => {
-    const tree = ShallowSilenceModal();
+    const tree = MountedSilenceModal();
     const toggle = tree.find(".nav-link");
+
     toggle.simulate("click");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("SilenceModalContent")).toHaveLength(1);
+
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("SilenceModalContent")).toHaveLength(0);
   });
 
   it("hides the modal when hide() is called", () => {
-    const tree = ShallowSilenceModal();
+    const tree = MountedSilenceModal();
     const toggle = tree.find(".nav-link");
+
     toggle.simulate("click");
-    expect(tree.text()).toBe("<FontAwesomeIcon /><SilenceModalContent />");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("SilenceModalContent")).toHaveLength(1);
+
     silenceFormStore.toggle.hide();
-    expect(tree.text()).toBe("<FontAwesomeIcon />");
+    jest.runOnlyPendingTimers();
+    tree.update();
+    expect(tree.find("SilenceModalContent")).toHaveLength(0);
   });
 
   it("'modal-open' class is appended to body node when modal is visible", () => {