2 files changed, 92 insertions, 0 deletions
diff --git a/web/src/js/__tests__/components/Modal/ModalSpec.js b/web/src/js/__tests__/components/Modal/ModalSpec.js
new file mode 100644
index 00000000..e4880d08
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/ModalSpec.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Modal from '../../../components/Modal/Modal'
+import { Provider } from 'react-redux'
+import { TStore } from '../../ducks/tutils'
+
+describe('Modal Component', () => {
+    let store = TStore()
+
+    it('should render correctly', () => {
+        // hide modal by default
+        let provider = renderer.create(
+            <Provider store={store}>
+               <Modal/>
+            </Provider>
+        ),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        // option modal show up
+        store.getState().ui.modal.activeModal = 'OptionModal'
+        provider = renderer.create(
+            <Provider store={store}>
+                <Modal/>
+            </Provider>
+        )
+        tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
new file mode 100644
index 00000000..f25c3330
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Component should render correctly 1`] = `<div />`;
+
+exports[`Modal Component should render correctly 2`] = `
+<div>
+  <div
+    className="modal-backdrop fade in"
+  />
+  <div
+    aria-labelledby="options"
+    className="modal modal-visible"
+    id="optionsModal"
+    role="dialog"
+    tabIndex="-1"
+  >
+    <div
+      className="modal-dialog modal-lg"
+      role="document"
+    >
+      <div
+        className="modal-content"
+      >
+        <div
+          className="modal-header"
+        >
+          <button
+            className="close"
+            data-dismiss="modal"
+            onClick={[Function]}
+            type="button"
+          >
+            <i
+              className="fa fa-fw fa-times"
+            />
+          </button>
+          <div
+            className="modal-title"
+          >
+            <h4>
+              Options
+            </h4>
+          </div>
+        </div>
+        <div
+          className="modal-body"
+        />
+        <div
+          className="modal-footer"
+        >
+          <button
+            className="btn btn-primary"
+            type="button"
+          >
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;