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

This commit is contained in:
Matthew Shao 2017-06-25 21:12:30 +08:00
parent 646f26b0e2
commit 06a0cabb7a
2 changed files with 141 additions and 0 deletions

View File

@ -0,0 +1,61 @@
import React from 'react'
import renderer from 'react-test-renderer'
import ContentView from '../../components/ContentView'
import { TStore, TFlow } from '../ducks/tutils'
import { Provider } from 'react-redux'
import mockXMLHttpRequest from 'mock-xmlhttprequest'
global.XMLHttpRequest = mockXMLHttpRequest
describe('ContentView Component', () => {
let store = TStore()
it('should render correctly', () => {
let tflow = TFlow(),
provider = renderer.create(
<Provider store={store}>
<ContentView flow={tflow} message={tflow.request}/>
</Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render correctly with empty content', () => {
let tflow = TFlow()
tflow.response.contentLength = 0
let provider = renderer.create(
<Provider store={store}>
<ContentView flow={tflow} message={tflow.response} readonly={true}/>
</Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render correctly with missing content', () => {
let tflow = TFlow()
tflow.response.contentLength = null
let provider = renderer.create(
<Provider store={store}>
<ContentView flow={tflow} message={tflow.response} readonly={true}/>
</Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
it('should render correctly with content too large', () => {
let tflow = TFlow()
tflow.response.contentLength = 1024 * 1024 * 100
let provider = renderer.create(
<Provider store={store}>
<ContentView
flow={tflow}
message={tflow.response}
readonly={true}
uploadContent={jest.fn()}
onOpenFile={jest.fn()}
/>
</Provider>),
tree = provider.toJSON()
expect(tree).toMatchSnapshot()
})
})

View File

@ -0,0 +1,80 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ContentView Component should render correctly 1`] = `
<div
className="contentview"
>
<div
className="text-center"
>
<i
className="fa fa-spinner fa-spin"
/>
</div>
</div>
`;
exports[`ContentView Component should render correctly with content too large 1`] = `
<div>
<div
className="alert alert-warning"
>
<button
className="btn btn-xs btn-warning pull-right"
onClick={[Function]}
>
Display anyway
</button>
100mb
content size.
</div>
<div
className="view-options text-center"
>
<a
className="btn btn-default btn-xs"
href="#"
onClick={[Function]}
title="Upload a file to replace the content."
>
<i
className="fa fa-fw fa-upload"
/>
<input
className="hidden"
onChange={[Function]}
type="file"
/>
</a>
 
<a
className="btn btn-default btn-xs"
href="/flows/d91165be-ca1f-4612-88a9-c0f8696f3e29/response/content"
title="Download the content of the flow."
>
<i
className="fa fa-download"
/>
</a>
</div>
</div>
`;
exports[`ContentView Component should render correctly with empty content 1`] = `
<div
className="alert alert-info"
>
No
response
content.
</div>
`;
exports[`ContentView Component should render correctly with missing content 1`] = `
<div
className="alert alert-info"
>
Response
content missing.
</div>
`;