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
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.
ProTip! Use n and p to navigate between commits in a pull request.