Merge pull request #2327 from MatthewShao/jest-dev

[WIP][web] Add tests for UI components

20 files changed, 642 insertions, 7 deletions

diff --git a/web/package.json b/web/package.json
index ca170a54..94b0ee60 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,7 +18,9 @@
     "coveragePathIgnorePatterns": [
       "<rootDir>/src/js/filt/filt.js"
     ],
-    "collectCoverageFrom" : ["src/js/**/*.{js,jsx}"]
+    "collectCoverageFrom": [
+      "src/js/**/*.{js,jsx}"
+    ]
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
@@ -29,6 +31,7 @@
     "react-codemirror": "^0.3.0",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
+    "react-test-renderer": "^15.5.4",
     "redux": "^3.6.0",
     "redux-logger": "^2.8.1",
     "redux-mock-store": "^1.2.3",
diff --git a/web/src/js/__tests__/components/common/ButtonSpec.js b/web/src/js/__tests__/components/common/ButtonSpec.js
new file mode 100644
index 00000000..ea05ee6e
--- /dev/null
+++ b/web/src/js/__tests__/components/common/ButtonSpec.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Button from '../../../components/common/Button'
+
+describe('Button Component', () => {
+
+    it('should render correctly', () => {
+        let button = renderer.create(
+            <Button className="classname" onClick={() => "onclick"} title="title" icon="icon">
+                <a>foo</a>
+            </Button>
+        ),
+            tree = button.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should be able to be disabled', () => {
+        let button = renderer.create(
+            <Button className="classname" onClick={() => "onclick"} disabled="true" children="children">
+                <a>foo</a>
+            </Button>
+            ),
+            tree = button.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/DocsLinkSpec.js b/web/src/js/__tests__/components/common/DocsLinkSpec.js
new file mode 100644
index 00000000..effed1b7
--- /dev/null
+++ b/web/src/js/__tests__/components/common/DocsLinkSpec.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import DocsLink from '../../../components/common/DocsLink'
+
+describe('DocsLink Component', () => {
+    it('should be able to be rendered with children nodes', () => {
+        let docsLink = renderer.create(<DocsLink children="foo" resource="bar"></DocsLink>),
+            tree = docsLink.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should be able to be rendered without children nodes', () => {
+        let docsLink  = renderer.create(<DocsLink resource="bar"></DocsLink>),
+            tree = docsLink.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/DropdownSpec.js b/web/src/js/__tests__/components/common/DropdownSpec.js
new file mode 100644
index 00000000..c8c57ea6
--- /dev/null
+++ b/web/src/js/__tests__/components/common/DropdownSpec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Dropdown, { Divider } from '../../../components/common/Dropdown'
+
+describe('Dropdown Component', () => {
+    let dropup = renderer.create(<Dropdown dropup btnClass="foo">
+            <a href="#">1</a>
+            <Divider/>
+            <a href="#">2</a>
+        </Dropdown>),
+        dropdown = renderer.create(<Dropdown btnClass="foo">
+            <a href="#">1</a>
+            <a href="#">2</a>
+        </Dropdown>)
+
+    it('should render correctly', () => {
+        let tree = dropup.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        tree = dropdown.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle open/close action', () => {
+        document.body.addEventListener('click', ()=>{})
+        let tree = dropup.toJSON(),
+            e = { preventDefault: jest.fn() }
+        tree.children[0].props.onClick(e)
+        expect(tree).toMatchSnapshot()
+
+        // click action when the state is open
+        tree.children[0].props.onClick(e)
+
+        // close
+        document.body.click()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/FileChooserSpec.js b/web/src/js/__tests__/components/common/FileChooserSpec.js
new file mode 100644
index 00000000..7d031a38
--- /dev/null
+++ b/web/src/js/__tests__/components/common/FileChooserSpec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import FileChooser from '../../../components/common/FileChooser'
+
+describe('FileChooser Component', () => {
+    let openFileFunc = jest.fn(),
+        createNodeMock = () => { return { click: jest.fn() } },
+        fileChooser = renderer.create(
+            <FileChooser className="foo" title="bar" onOpenFile={ openFileFunc }/>
+        , { createNodeMock })
+        //[test refs with react-test-renderer](https://github.com/facebook/react/issues/7371)
+
+    it('should render correctly', () => {
+        let tree = fileChooser.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click action', () => {
+        let tree = fileChooser.toJSON(),
+            mockEvent = {
+                preventDefault: jest.fn(),
+                target: {
+                    files: [ "foo", "bar" ]
+                }
+            }
+        tree.children[1].props.onChange(mockEvent)
+        expect(openFileFunc).toBeCalledWith("foo")
+        tree.props.onClick()
+        // without files
+        mockEvent = {
+            ...mockEvent,
+            target: { files: [ ]}
+        }
+        openFileFunc.mockClear()
+        tree.children[1].props.onChange(mockEvent)
+        expect(openFileFunc).not.toBeCalled()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/SplitterSpec.js b/web/src/js/__tests__/components/common/SplitterSpec.js
new file mode 100644
index 00000000..9ec48350
--- /dev/null
+++ b/web/src/js/__tests__/components/common/SplitterSpec.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import renderer from 'react-test-renderer'
+import Splitter from '../../../components/common/Splitter'
+import TestUtils from 'react-dom/test-utils';
+
+describe('Splitter Component', () => {
+
+    it('should render correctly', () => {
+        let splitter = renderer.create(<Splitter></Splitter>),
+            tree = splitter.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let splitter = TestUtils.renderIntoDocument(<Splitter></Splitter>),
+        dom = ReactDOM.findDOMNode(splitter),
+        previousElementSibling = {
+            offsetHeight: 0,
+            offsetWidth: 0,
+            style: {flex: ''}
+        },
+        nextElementSibling = {
+            style: {flex: ''}
+        }
+
+    it('should handle mouseDown ', () => {
+        window.addEventListener = jest.fn()
+        splitter.onMouseDown({ pageX: 1, pageY: 2})
+        expect(splitter.state.startX).toEqual(1)
+        expect(splitter.state.startY).toEqual(2)
+        expect(window.addEventListener).toBeCalledWith('mousemove', splitter.onMouseMove)
+        expect(window.addEventListener).toBeCalledWith('mouseup', splitter.onMouseUp)
+        expect(window.addEventListener).toBeCalledWith('dragend', splitter.onDragEnd)
+    })
+
+    it('should handle dragEnd', () => {
+        window.removeEventListener = jest.fn()
+        splitter.onDragEnd()
+        expect(dom.style.transform).toEqual('')
+        expect(window.removeEventListener).toBeCalledWith('dragend', splitter.onDragEnd)
+        expect(window.removeEventListener).toBeCalledWith('mouseup', splitter.onMouseUp)
+        expect(window.removeEventListener).toBeCalledWith('mousemove', splitter.onMouseMove)
+    })
+
+    it('should handle mouseUp', () => {
+
+        Object.defineProperty(dom, 'previousElementSibling', { value: previousElementSibling })
+        Object.defineProperty(dom, 'nextElementSibling', { value: nextElementSibling })
+        splitter.onMouseUp({ pageX: 3, pageY: 4 })
+        expect(splitter.state.applied).toBeTruthy()
+        expect(nextElementSibling.style.flex).toEqual('1 1 auto')
+        expect(previousElementSibling.style.flex).toEqual('0 0 2px')
+    })
+
+    it('should handle mouseMove', () => {
+        splitter.onMouseMove({pageX: 10, pageY: 10})
+        expect(dom.style.transform).toEqual("translate(9px, 0px)")
+
+        let splitterY = TestUtils.renderIntoDocument(<Splitter axis="y"></Splitter>)
+        splitterY.onMouseMove({pageX: 10, pageY: 10})
+        expect(ReactDOM.findDOMNode(splitterY).style.transform).toEqual("translate(0px, 10px)")
+    })
+
+    it('should handle resize', () => {
+        window.setTimeout = jest.fn((event, time) => event())
+        splitter.onResize()
+        expect(window.setTimeout).toHaveBeenCalled()
+    })
+
+    it('should handle componentWillUnmount', () => {
+        splitter.componentWillUnmount()
+        expect(previousElementSibling.style.flex).toEqual('')
+        expect(nextElementSibling.style.flex).toEqual('')
+        expect(splitter.state.applied).toBeTruthy()
+    })
+
+    it('should handle reset', () => {
+        splitter.reset(false)
+        expect(splitter.state.applied).toBeFalsy()
+
+        expect(splitter.reset(true)).toEqual(undefined)
+    })
+
+})
diff --git a/web/src/js/__tests__/components/common/ToggleButtonSpec.js b/web/src/js/__tests__/components/common/ToggleButtonSpec.js
new file mode 100644
index 00000000..2188da82
--- /dev/null
+++ b/web/src/js/__tests__/components/common/ToggleButtonSpec.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ToggleButton from '../../../components/common/ToggleButton'
+
+describe('ToggleButton Component', () => {
+    let mockFunc = jest.fn()
+
+    it('should render correctly', () => {
+        let checkedButton = renderer.create(
+                <ToggleButton checked={true} onToggle={mockFunc} text="foo">
+                    text
+                </ToggleButton>),
+        tree = checkedButton.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click action', () => {
+        let uncheckButton = renderer.create(
+            <ToggleButton checked={false} onToggle={mockFunc} text="foo">
+                text
+            </ToggleButton>),
+        tree = uncheckButton.toJSON()
+        tree.props.onClick()
+        expect(mockFunc).toBeCalled()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js b/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js
new file mode 100644
index 00000000..39e555cd
--- /dev/null
+++ b/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ToggleInputButton from '../../../components/common/ToggleInputButton'
+import { Key } from '../../../utils'
+
+describe('ToggleInputButton Component', () => {
+    let mockFunc = jest.fn(),
+        toggleInputButton = undefined,
+        tree = undefined
+
+    it('should render correctly', () => {
+        toggleInputButton = renderer.create(
+            <ToggleInputButton checked={true} name="foo" onToggleChanged={mockFunc}
+                               placeholder="bar">text</ToggleInputButton>)
+        tree = toggleInputButton.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle keydown and click action', () => {
+        toggleInputButton = renderer.create(
+            <ToggleInputButton checked={false} name="foo" onToggleChanged={mockFunc}
+                               placeholder="bar" txt="txt">text</ToggleInputButton>)
+        tree = toggleInputButton.toJSON()
+        let mockEvent = {
+            keyCode: Key.ENTER,
+            stopPropagation: jest.fn()
+        }
+
+        tree.children[1].props.onKeyDown(mockEvent)
+        expect(mockFunc).toBeCalledWith("txt")
+
+        tree.children[0].props.onClick()
+        expect(mockFunc).toBeCalledWith("txt")
+    })
+
+    it('should update state onChange', () => {
+        // trigger onChange
+        tree.children[1].props.onChange({ target: { value: "foo" }})
+        // update the tree
+        tree = toggleInputButton.toJSON()
+        expect(tree.children[1].props.value).toEqual("foo")
+    })
+})
diff --git a/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap
new file mode 100644
index 00000000..1d403b2d
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Component should be able to be disabled 1`] = `
+<div
+  className="classname btn btn-default"
+  disabled="true"
+  onClick={false}
+  title={undefined}
+>
+  <a>
+    foo
+  </a>
+</div>
+`;
+
+exports[`Button Component should render correctly 1`] = `
+<div
+  className="classname btn btn-default"
+  disabled={undefined}
+  onClick={[Function]}
+  title="title"
+>
+  <i
+    className="fa fa-fw icon"
+  />
+  <a>
+    foo
+  </a>
+</div>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap
new file mode 100644
index 00000000..d91b77f7
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocsLink Component should be able to be rendered with children nodes 1`] = `
+<a
+  href="http://docs.mitmproxy.org/en/stable/bar"
+  target="_blank"
+>
+  foo
+</a>
+`;
+
+exports[`DocsLink Component should be able to be rendered without children nodes 1`] = `
+<a
+  href="http://docs.mitmproxy.org/en/stable/bar"
+  target="_blank"
+>
+  <i
+    className="fa fa-question-circle"
+  />
+</a>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap
new file mode 100644
index 00000000..57d4968d
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown Component should handle open/close action 1`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should handle open/close action 2`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should render correctly 1`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should render correctly 2`] = `
+<div
+  className="dropdown"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap
new file mode 100644
index 00000000..5f0b3cf3
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileChooser Component should render correctly 1`] = `
+<a
+  className="foo"
+  href="#"
+  onClick={[Function]}
+  title="bar"
+>
+  <i
+    className="fa fa-fw undefined"
+  />
+  <input
+    className="hidden"
+    onChange={[Function]}
+    type="file"
+  />
+</a>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap
new file mode 100644
index 00000000..dd70ed7a
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Splitter Component should render correctly 1`] = `
+<div
+  className="splitter splitter-x"
+>
+  <div
+    draggable="true"
+    onMouseDown={[Function]}
+  />
+</div>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap
new file mode 100644
index 00000000..f468d39f
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleButton Component should render correctly 1`] = `
+<div
+  className="btn btn-toggle btn-primary"
+  onClick={[Function]}
+>
+  <i
+    className="fa fa-fw fa-check-square-o"
+  />
+   
+  foo
+</div>
+`;
diff --git a/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap
new file mode 100644
index 00000000..b8d80177
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleInputButton Component should render correctly 1`] = `
+<div
+  className="input-group toggle-input-btn"
+>
+  <span
+    className="input-group-btn"
+    onClick={[Function]}
+  >
+    <div
+      className="btn btn-primary"
+    >
+      <span
+        className="fa fa-check-square-o"
+      />
+       
+      foo
+    </div>
+  </span>
+  <input
+    className="form-control"
+    disabled={true}
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    placeholder="bar"
+    type="text"
+    value=""
+  />
+</div>
+`;
diff --git a/web/src/js/__tests__/components/helpers/AutoScrollSpec.js b/web/src/js/__tests__/components/helpers/AutoScrollSpec.js
new file mode 100644
index 00000000..18a3d669
--- /dev/null
+++ b/web/src/js/__tests__/components/helpers/AutoScrollSpec.js
@@ -0,0 +1,41 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import AutoScroll from '../../../components/helpers/AutoScroll'
+import { calcVScroll } from '../../../components/helpers/VirtualScroll'
+import TestUtils from 'react-dom/test-utils'
+
+describe('Autoscroll', () => {
+    let mockFn = jest.fn()
+    class tComponent extends React.Component {
+        constructor(props, context){
+            super(props, context)
+            this.state = { vScroll: calcVScroll() }
+        }
+
+       componentWillUpdate() {
+           mockFn("foo")
+       }
+
+       componentDidUpdate() {
+           mockFn("bar")
+       }
+
+       render() {
+           return (<p>foo</p>)
+       }
+    }
+
+    it('should update component', () => {
+        let Foo = AutoScroll(tComponent),
+            autoScroll = TestUtils.renderIntoDocument(<Foo></Foo>),
+            viewport = ReactDOM.findDOMNode(autoScroll)
+        viewport.scrollTop = 10
+        Object.defineProperty(viewport, "scrollHeight", { value: 10, writable: true })
+        autoScroll.componentWillUpdate()
+        expect(mockFn).toBeCalledWith("foo")
+
+        Object.defineProperty(viewport, "scrollHeight", { value: 0, writable: true })
+        autoScroll.componentDidUpdate()
+        expect(mockFn).toBeCalledWith("bar")
+    })
+})
diff --git a/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js b/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js
new file mode 100644
index 00000000..8081e90d
--- /dev/null
+++ b/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js
@@ -0,0 +1,21 @@
+import { calcVScroll } from '../../../components/helpers/VirtualScroll'
+
+describe('VirtualScroll', () => {
+
+    it('should return default state without options', () => {
+        expect(calcVScroll()).toEqual({start: 0, end: 0, paddingTop: 0, paddingBottom: 0})
+    })
+
+    it('should calculate position without itemHeights', () => {
+        expect(calcVScroll({itemCount: 0, rowHeight: 32, viewportHeight: 400, viewportTop: 0})).toEqual({
+            start: 0, end: 0, paddingTop: 0, paddingBottom: 0
+        })
+    })
+
+    it('should calculate position with itemHeights', () => {
+        expect(calcVScroll({itemCount: 5, itemHeights: [100, 100, 100, 100, 100],
+            viewportHeight: 300, viewportTop: 0})).toEqual({
+            start: 0, end: 4, paddingTop: 0, paddingBottom: 100
+        })
+    })
+})
diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx
index 53c7aca8..70974133 100644
--- a/web/src/js/components/common/DocsLink.jsx
+++ b/web/src/js/components/common/DocsLink.jsx
@@ -1,3 +1,4 @@
+import React from "react"
 import PropTypes from "prop-types"
 
 DocsLink.propTypes = {
diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx
index f4607c8b..0b14a87e 100644
--- a/web/src/js/components/common/FileChooser.jsx
+++ b/web/src/js/components/common/FileChooser.jsx
@@ -21,7 +21,7 @@ export default function FileChooser({ icon, text, className, title, onOpenFile }
                 ref={ref => fileInput = ref}
                 className="hidden"
                 type="file"
-                onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}}
+                onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput.value="";}}
             />
         </a>
     )
diff --git a/web/yarn.lock b/web/yarn.lock
index a2efcc5d..602b4916 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1860,7 +1860,7 @@ fb-watchman@^2.0.0:
   dependencies:

     bser "^2.0.0"

 

-fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:

+fbjs@^0.8.4, fbjs@^0.8.9:

   version "0.8.9"

   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"

   dependencies:

@@ -4064,7 +4064,7 @@ promise@^7.1.1:
   dependencies:

     asap "~2.0.3"

 

-prop-types@^15.5.0:

+prop-types@^15.5.0, prop-types@~15.5.7:

   version "15.5.8"

   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"

   dependencies:

@@ -4156,12 +4156,13 @@ react-codemirror@^0.3.0:
     lodash.debounce "^4.0.8"

 

 react-dom@^15.4.2:

-  version "15.4.2"

-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"

+  version "15.5.4"

+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"

   dependencies:

-    fbjs "^0.8.1"

+    fbjs "^0.8.9"

     loose-envify "^1.1.0"

     object-assign "^4.1.0"

+    prop-types "~15.5.7"

 

 react-redux@^5.0.2:

   version "5.0.2"

@@ -4173,6 +4174,13 @@ react-redux@^5.0.2:
     lodash-es "^4.2.0"

     loose-envify "^1.1.0"

 

+react-test-renderer@^15.5.4:

+  version "15.5.4"

+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc"

+  dependencies:

+    fbjs "^0.8.9"

+    object-assign "^4.1.0"

+

 react@^15.4.2:

   version "15.4.2"

   resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"