Permalink
Browse files

Merge pull request #2327 from MatthewShao/jest-dev

[WIP][web] Add tests for UI components
  • Loading branch information...
mhils committed May 15, 2017
2 parents fe01adf + c327ae8 commit 69c5a0b6993f70340a0a4b99159086c638d77103
View
@@ -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",
@@ -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()
})
})
@@ -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()
})
})
@@ -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()
})
})
@@ -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,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)
})
})
@@ -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()
})
})
@@ -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")
})
})
@@ -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>
`;
@@ -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>
`;
Oops, something went wrong.

0 comments on commit 69c5a0b

Please sign in to comment.