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

This commit is contained in:
Matthew Shao 2017-05-17 22:33:29 +08:00
parent 22a1709c8b
commit d290be2327
2 changed files with 259 additions and 0 deletions

View File

@ -0,0 +1,103 @@
import React from 'react'
import renderer from 'react-test-renderer'
import * as Columns from '../../../components/FlowTable/FlowColumns'
import { TFlow } from '../../ducks/tutils'
describe('FlowColumns Components', () => {
let tFlow = new TFlow()
it('should render TLSColumn', () => {
let tlsColumn = renderer.create(<Columns.TLSColumn flow={tFlow}/>),
tree = tlsColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render IconColumn', () => {
let iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>),
tree = iconColumn.toJSON()
// plain
expect(tree).toMatchSnapshot()
// not modified
tFlow.response.status_code = 304
iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// redirect
tFlow.response.status_code = 302
iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// image
let imageFlow = new TFlow()
imageFlow.response.headers = [['Content-Type', 'image/jpeg']]
iconColumn = renderer.create(<Columns.IconColumn flow={imageFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// javascript
let jsFlow = new TFlow()
jsFlow.response.headers = [['Content-Type', 'application/x-javascript']]
iconColumn = renderer.create(<Columns.IconColumn flow={jsFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// css
let cssFlow = new TFlow()
cssFlow.response.headers = [['Content-Type', 'text/css']]
iconColumn = renderer.create(<Columns.IconColumn flow={cssFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// default
let fooFlow = new TFlow()
fooFlow.response.headers = [['Content-Type', 'foo']]
iconColumn = renderer.create(<Columns.IconColumn flow={fooFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
// no response
tFlow.response = null
iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
tree = iconColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render pathColumn', () => {
// error
let pathColumn = renderer.create(<Columns.PathColumn flow={tFlow}/>),
tree = pathColumn.toJSON()
expect(tree).toMatchSnapshot()
tFlow.error.msg = 'Connection killed'
tFlow.intercepted = true
pathColumn = renderer.create(<Columns.PathColumn flow={tFlow}/>)
tree = pathColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render MethodColumn', () => {
let methodColumn =renderer.create(<Columns.MethodColumn flow={tFlow}/>),
tree = methodColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render StatusColumn', () => {
let statusColumn = renderer.create(<Columns.StatusColumn flow={tFlow}/>),
tree = statusColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render SizeColumn', () => {
tFlow = new TFlow()
let sizeColumn = renderer.create(<Columns.SizeColumn flow={tFlow}/>),
tree = sizeColumn.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render TimeColumn', () => {
let timeColumn = renderer.create(<Columns.TimeColumn flow={tFlow}/>),
tree = timeColumn.toJSON()
expect(tree).toMatchSnapshot()
tFlow.response = null
timeColumn = renderer.create(<Columns.TimeColumn flow={tFlow}/>),
tree = timeColumn.toJSON()
expect(tree).toMatchSnapshot()
})
})

View File

@ -0,0 +1,156 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FlowColumns Components should render IconColumn 1`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-document"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 2`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-not-modified"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 3`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-redirect"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 4`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-image"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 5`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-js"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 6`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-css"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 7`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-plain"
/>
</td>
`;
exports[`FlowColumns Components should render IconColumn 8`] = `
<td
className="col-icon"
>
<div
className="resource-icon resource-icon-plain"
/>
</td>
`;
exports[`FlowColumns Components should render MethodColumn 1`] = `
<td
className="col-method"
>
GET
</td>
`;
exports[`FlowColumns Components should render SizeColumn 1`] = `
<td
className="col-size"
>
100b
</td>
`;
exports[`FlowColumns Components should render StatusColumn 1`] = `
<td
className="col-status"
/>
`;
exports[`FlowColumns Components should render TLSColumn 1`] = `
<td
className="col-tls col-tls-http"
/>
`;
exports[`FlowColumns Components should render TimeColumn 1`] = `
<td
className="col-time"
>
2min
</td>
`;
exports[`FlowColumns Components should render TimeColumn 2`] = `
<td
className="col-time"
>
...
</td>
`;
exports[`FlowColumns Components should render pathColumn 1`] = `
<td
className="col-path"
>
<i
className="fa fa-fw fa-repeat pull-right"
/>
<i
className="fa fa-fw fa-exclamation pull-right"
/>
http://undefined:undefinedundefined
</td>
`;
exports[`FlowColumns Components should render pathColumn 2`] = `
<td
className="col-path"
>
<i
className="fa fa-fw fa-repeat pull-right"
/>
<i
className="fa fa-fw fa-pause pull-right"
/>
<i
className="fa fa-fw fa-times pull-right"
/>
http://undefined:undefinedundefined
</td>
`;