feat(ui): animate modals

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

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", () => {

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

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", () => {