Merge pull request #2416 from MatthewShao/mitmweb-options

[WIP] [web] Mitmweb options editor UI

7 files changed, 178 insertions, 2 deletions

diff --git a/web/src/js/__tests__/components/Header/FileMenuSpec.js b/web/src/js/__tests__/components/Header/FileMenuSpec.js
index 65b4647a..0d87530b 100644
--- a/web/src/js/__tests__/components/Header/FileMenuSpec.js
+++ b/web/src/js/__tests__/components/Header/FileMenuSpec.js
@@ -8,13 +8,20 @@ describe('FileMenu Component', () => {
     let clearFn = jest.fn(),
         loadFn = jest.fn(),
         saveFn = jest.fn(),
+        openModalFn = jest.fn(),
         mockEvent = {
             preventDefault: jest.fn(),
             target: { files: ["foo", "bar "] }
         },
         createNodeMock = () => { return { click: jest.fn() }},
         fileMenu = renderer.create(
-            <FileMenu clearFlows={clearFn} loadFlows={loadFn} saveFlows={saveFn}/>, { createNodeMock }),
+            <FileMenu
+                clearFlows={clearFn}
+                loadFlows={loadFn}
+                saveFlows={saveFn}
+                openModal={openModalFn}
+            />,
+            { createNodeMock }),
         tree = fileMenu.toJSON()
 
     it('should render correctly', () => {
@@ -42,4 +49,10 @@ describe('FileMenu Component', () => {
         a.props.onClick(mockEvent)
         expect(saveFn).toBeCalled()
     })
+
+    it('should open optionModal', () => {
+        let a = ul.children[3].children[1]
+        a.props.onClick(mockEvent)
+        expect(openModalFn).toBeCalled()
+    })
 })
diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
index 13ecf3f5..15c1afbc 100644
--- a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
+++ b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
@@ -63,6 +63,19 @@ exports[`FileMenu Component should render correctly 1`] = `
     </li>
     <li>
        
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-cog"
+        />
+         Options
+      </a>
+       
+    </li>
+    <li>
+       
       <hr
         className="divider"
       />
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..4fe163d1
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -0,0 +1,66 @@
+// 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>
+          <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>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-primary"
+              type="button"
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/web/src/js/__tests__/ducks/optionsSpec.js b/web/src/js/__tests__/ducks/optionsSpec.js
new file mode 100644
index 00000000..62019715
--- /dev/null
+++ b/web/src/js/__tests__/ducks/optionsSpec.js
@@ -0,0 +1,25 @@
+jest.mock('../../utils')
+
+import reduceOptions, * as OptionsActions from '../../ducks/options'
+
+describe('option reducer', () => {
+    it('should return initial state', () => {
+        expect(reduceOptions(undefined, {})).toEqual({})
+    })
+
+    it('should handle receive action', () => {
+        let action = { type: OptionsActions.RECEIVE, data: 'foo' }
+        expect(reduceOptions(undefined, action)).toEqual('foo')
+    })
+
+    it('should handle update action', () => {
+        let action = {type: OptionsActions.UPDATE, data: {id: 1} }
+        expect(reduceOptions(undefined, action)).toEqual({id: 1})
+    })
+})
+
+describe('option actions', () => {
+    it('should be possible to update option', () => {
+        expect(reduceOptions(undefined, OptionsActions.update())).toEqual({})
+    })
+})
diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js
index 2a79ede0..9b92e676 100644
--- a/web/src/js/__tests__/ducks/tutils.js
+++ b/web/src/js/__tests__/ducks/tutils.js
@@ -32,6 +32,9 @@ export function TStore(){
             },
             header: {
                 tab: 'Start'
+            },
+            modal: {
+                activeModal: undefined
             }
         },
         settings: {
@@ -47,7 +50,8 @@ export function TStore(){
             sort: {
                 desc: true,
                 column: 'PathColumn'
-            }
+            },
+            view: [ tflow ]
         },
         connection: {
             state: ConnectionState.ESTABLISHED
diff --git a/web/src/js/__tests__/ducks/ui/modalSpec.js b/web/src/js/__tests__/ducks/ui/modalSpec.js
new file mode 100644
index 00000000..30c39760
--- /dev/null
+++ b/web/src/js/__tests__/ducks/ui/modalSpec.js
@@ -0,0 +1,25 @@
+import reduceModal, * as ModalActions from '../../../ducks/ui/modal'
+
+describe('modal reducer', () => {
+    let state = undefined
+
+    it('should return the initial state', () => {
+        expect(reduceModal(undefined, {})).toEqual(
+            { activeModal: undefined }
+        )
+    })
+
+    it('should handle setActiveModal action', () => {
+        state = reduceModal(undefined, ModalActions.setActiveModal('foo'))
+        expect(state).toEqual(
+            { activeModal: 'foo' }
+        )
+    })
+
+    it('should handle hideModal action', () => {
+        state = reduceModal(state, ModalActions.hideModal())
+        expect(state).toEqual(
+            { activeModal: undefined }
+        )
+    })
+})