Skip to content

Instantly share code, notes, and snippets.

@risingnote
Created January 23, 2017 10:36
Use Jest and react test renderer for snap shot tests, including simulated click events.
/**
* Responsible for displaying setup information based on props passed in.
*/
import React from 'react';
import { List } from 'immutable'
import ProxyStatus from './ProxyStatus'
import './Setup.css'
const Setup = (props) => {
const proxyServers = (proxyServerList) => {
return proxyServerList.map( (proxyServer) => {
return <ProxyStatus key={proxyServer.get('url')} status={proxyServer.get('status')} url={proxyServer.get('url')} />
})
}
return (
<div className='Setup-panel'>
<p className='Setup-subHead'>Spdz Proxy Servers</p>
<button onClick={props.setupForRun}>
Connect
</button>
{proxyServers(props.spdzProxyServerList)}
</div>
)
}
Setup.propTypes = {
setupForRun: React.PropTypes.func.isRequired,
spdzProxyServerList: React.PropTypes.instanceOf(List).isRequired
}
export default Setup
import React from 'react'
import { List } from 'immutable'
import renderer from 'react-test-renderer'
import Setup from './Setup'
import { twoProxiesWith1Connected } from '../test_support/ProxyServerList'
describe('Setup display component rendering', () => {
it('Renders as expected (compared to a snapshot) when passed properties', () => {
const tree = renderer.create(
<Setup setupForRun={() => {}} spdzProxyServerList={twoProxiesWith1Connected} />
).toJSON()
expect(tree).toMatchSnapshot()
})
it('Executes the call back when the setup button is clicked', () => {
//Need to use
const mockCallBack = jest.fn((e) => {})
const tree = renderer.create(
<Setup setupForRun={mockCallBack} spdzProxyServerList={List()} />
).toJSON()
let button = tree.children.find((element) => {return (element['type'] === 'button')})
button.props.onClick()
expect(mockCallBack).toHaveBeenCalled()
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment