[web] Add tests for js/components/common/FileChooser.jsx & minor fix.

3 files changed, 58 insertions, 1 deletions

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/__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/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx
index f4607c8b..b0bf4d8d 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])}}
             />
         </a>
     )