[web] Add tests for js/components/FlowTable.jsx

This commit is contained in:
Matthew Shao 2017-06-25 21:15:01 +08:00
parent 9f58093954
commit d2fa4d8341
2 changed files with 129 additions and 0 deletions

View File

@ -0,0 +1,50 @@
import React from 'react'
import renderer from 'react-test-renderer'
import FlowTable from '../../components/FlowTable'
import TestUtils from 'react-dom/test-utils'
import { TFlow, TStore } from '../ducks/tutils'
import { Provider } from 'react-redux'
window.addEventListener = jest.fn()
describe('FlowTable Component', () => {
let selectFn = jest.fn(),
tflow = TFlow(),
store = TStore()
it('should render correctly', () => {
let provider = renderer.create(
<Provider store={store}>
<FlowTable onSelect={selectFn} flows={[tflow]}/>
</Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
let provider = TestUtils.renderIntoDocument(
<Provider store={store} >
<FlowTable onSelect={selectFn} flows={[tflow]}/>
</Provider>),
flowTable = TestUtils.findRenderedComponentWithType(provider, FlowTable)
it('should handle componentWillUnmount', () => {
flowTable.componentWillUnmount()
expect(window.addEventListener).toBeCalledWith('resize', flowTable.onViewportUpdate)
})
it('should handle componentDidUpdate', () => {
// flowTable.shouldScrollIntoView == false
expect(flowTable.componentDidUpdate()).toEqual(undefined)
// rowTop - headHeight < viewportTop
flowTable.shouldScrollIntoView = true
flowTable.componentDidUpdate()
// rowBottom > viewportTop + viewportHeight
flowTable.shouldScrollIntoView = true
flowTable.componentDidUpdate()
})
it('should handle componentWillReceiveProps', () => {
flowTable.componentWillReceiveProps({selected: tflow})
expect(flowTable.shouldScrollIntoView).toBeTruthy()
})
})

View File

@ -0,0 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FlowTable Component should render correctly 1`] = `
<div
className="flow-table"
onScroll={[Function]}
>
<table>
<thead
style={
Object {
"transform": "translateY(undefinedpx)",
}
}
>
<tr>
<th
className="col-tls"
onClick={[Function]}
>
</th>
<th
className="col-icon"
onClick={[Function]}
>
</th>
<th
className="col-path sort-desc"
onClick={[Function]}
>
Path
</th>
<th
className="col-method"
onClick={[Function]}
>
Method
</th>
<th
className="col-status"
onClick={[Function]}
>
Status
</th>
<th
className="col-size"
onClick={[Function]}
>
Size
</th>
<th
className="col-time"
onClick={[Function]}
>
Time
</th>
</tr>
</thead>
<tbody>
<tr
style={
Object {
"height": 0,
}
}
/>
<tr
style={
Object {
"height": 0,
}
}
/>
</tbody>
</table>
</div>
`;