[web] Add tests for js/components/Header/FlowMenu.jsx

This commit is contained in:
Matthew Shao 2017-05-27 21:22:49 +08:00
parent cdb256682e
commit ddc03df4f6
2 changed files with 347 additions and 0 deletions

View File

@ -0,0 +1,102 @@
jest.mock('../../../flow/utils')
import React from 'react'
import renderer from 'react-test-renderer'
import ConnectedFlowMenu, { FlowMenu } from '../../../components/Header/FlowMenu'
import { TFlow, TStore }from '../../ducks/tutils'
import { MessageUtils } from "../../../flow/utils"
import { Provider } from 'react-redux'
describe('FlowMenu Component', () => {
let actions = {
resumeFlow: jest.fn(),
killFlow: jest.fn(),
replayFlow: jest.fn(),
duplicateFlow: jest.fn(),
removeFlow: jest.fn(),
revertFlow: jest.fn()
},
tflow = new TFlow()
tflow.modified = true
tflow.intercepted = true
it('should render correctly without flow', () => {
let flowMenu = renderer.create(
<FlowMenu removeFlow={actions.removeFlow}
killFlow={actions.killFlow}
replayFlow={actions.replayFlow}
duplicateFlow={actions.duplicateFlow}
resumeFlow={actions.resumeFlow}
revertFlow={actions.revertFlow}/>),
tree = flowMenu.toJSON()
expect(tree).toMatchSnapshot()
})
let flowMenu = renderer.create(<FlowMenu
flow={tflow}
removeFlow={actions.removeFlow}
killFlow={actions.killFlow}
replayFlow={actions.replayFlow}
duplicateFlow={actions.duplicateFlow}
resumeFlow={actions.resumeFlow}
revertFlow={actions.revertFlow}/>),
tree = flowMenu.toJSON()
it('should render correctly with flow', () => {
expect(tree).toMatchSnapshot()
})
let menu_content_1 = tree.children[0].children[0]
it('should handle replayFlow', () => {
let button = menu_content_1.children[0]
button.props.onClick()
expect(actions.replayFlow).toBeCalledWith(tflow)
})
it('should handle duplicateFlow', () => {
let button = menu_content_1.children[1]
button.props.onClick()
expect(actions.duplicateFlow).toBeCalledWith(tflow)
})
it('should handle revertFlow', () => {
let button = menu_content_1.children[2]
button.props.onClick()
expect(actions.revertFlow).toBeCalledWith(tflow)
})
it('should handle removeFlow', () => {
let button = menu_content_1.children[3]
button.props.onClick()
expect(actions.removeFlow).toBeCalledWith(tflow)
})
let menu_content_2 = tree.children[1].children[0]
it('should handle download', () => {
let button = menu_content_2.children[0]
button.props.onClick()
expect(MessageUtils.getContentURL).toBeCalledWith(tflow, tflow.response)
})
let menu_content_3 = tree.children[2].children[0]
it('should handle resumeFlow', () => {
let button = menu_content_3.children[0]
button.props.onClick()
expect(actions.resumeFlow).toBeCalledWith(tflow)
})
it('should handle killFlow', () => {
let button = menu_content_3.children[1]
button.props.onClick()
expect(actions.killFlow).toBeCalledWith(tflow)
})
it('should connect to state', () => {
let store = TStore(),
provider = renderer.create(<Provider store={store}><ConnectedFlowMenu/></Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
})

View File

@ -0,0 +1,245 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FlowMenu Component should connect to state 1`] = `
<div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[r]eplay flow"
>
<i
className="fa fa-fw fa-repeat text-primary"
/>
Replay
</div>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[D]uplicate flow"
>
<i
className="fa fa-fw fa-copy text-info"
/>
Duplicate
</div>
<div
className="btn btn-default"
disabled={true}
onClick={false}
title="revert changes to flow [V]"
>
<i
className="fa fa-fw fa-history text-warning"
/>
Revert
</div>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[d]elete flow"
>
<i
className="fa fa-fw fa-trash text-danger"
/>
Delete
</div>
</div>
<div
className="menu-legend"
>
Flow Modification
</div>
</div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="download"
>
<i
className="fa fa-fw fa-download"
/>
Download
</div>
</div>
<div
className="menu-legend"
>
Export
</div>
</div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={true}
onClick={false}
title="[a]ccept intercepted flow"
>
<i
className="fa fa-fw fa-play text-success"
/>
Resume
</div>
<div
className="btn btn-default"
disabled={true}
onClick={false}
title="kill intercepted flow [x]"
>
<i
className="fa fa-fw fa-times text-danger"
/>
Abort
</div>
</div>
<div
className="menu-legend"
>
Interception
</div>
</div>
</div>
`;
exports[`FlowMenu Component should render correctly with flow 1`] = `
<div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[r]eplay flow"
>
<i
className="fa fa-fw fa-repeat text-primary"
/>
Replay
</div>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[D]uplicate flow"
>
<i
className="fa fa-fw fa-copy text-info"
/>
Duplicate
</div>
<div
className="btn btn-default"
disabled={false}
onClick={[Function]}
title="revert changes to flow [V]"
>
<i
className="fa fa-fw fa-history text-warning"
/>
Revert
</div>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="[d]elete flow"
>
<i
className="fa fa-fw fa-trash text-danger"
/>
Delete
</div>
</div>
<div
className="menu-legend"
>
Flow Modification
</div>
</div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={undefined}
onClick={[Function]}
title="download"
>
<i
className="fa fa-fw fa-download"
/>
Download
</div>
</div>
<div
className="menu-legend"
>
Export
</div>
</div>
<div
className="menu-group"
>
<div
className="menu-content"
>
<div
className="btn btn-default"
disabled={false}
onClick={[Function]}
title="[a]ccept intercepted flow"
>
<i
className="fa fa-fw fa-play text-success"
/>
Resume
</div>
<div
className="btn btn-default"
disabled={false}
onClick={[Function]}
title="kill intercepted flow [x]"
>
<i
className="fa fa-fw fa-times text-danger"
/>
Abort
</div>
</div>
<div
className="menu-legend"
>
Interception
</div>
</div>
</div>
`;
exports[`FlowMenu Component should render correctly without flow 1`] = `<div />`;