New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP][web] Add tests for UI components #2327

Merged
merged 11 commits into from May 15, 2017

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

  • Loading branch information...
MatthewShao committed May 12, 2017
commit 782d564e7608fe8c208876ca4c7bc0f89cfc938a
@@ -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()
})
})
@@ -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>
`;
@@ -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 = "";}}

This comment has been minimized.

@cle1000

cle1000 May 13, 2017

Contributor

fileInput = "" should be changed to fileInput.value = ""
this call resets the fileInput. without this extra call it is not possible to open the same file twice...

@cle1000

cle1000 May 13, 2017

Contributor

fileInput = "" should be changed to fileInput.value = ""
this call resets the fileInput. without this extra call it is not possible to open the same file twice...

This comment has been minimized.

@MatthewShao

MatthewShao May 13, 2017

Contributor

Oh, that's right. This statement confuses me a lot... Thanks! @cle1000

@MatthewShao

MatthewShao May 13, 2017

Contributor

Oh, that's right. This statement confuses me a lot... Thanks! @cle1000

onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0])}}
/>
</a>
)
ProTip! Use n and p to navigate between commits in a pull request.