diff options
| -rw-r--r-- | web/src/js/__tests__/components/FlowView/MessagesSpec.js | 150 | ||||
| -rw-r--r-- | web/src/js/__tests__/components/FlowView/__snapshots__/MessagesSpec.js.snap | 568 |
2 files changed, 718 insertions, 0 deletions
diff --git a/web/src/js/__tests__/components/FlowView/MessagesSpec.js b/web/src/js/__tests__/components/FlowView/MessagesSpec.js new file mode 100644 index 00000000..e59149d6 --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/MessagesSpec.js @@ -0,0 +1,150 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import TestUtils from 'react-dom/test-utils' +import { Request, Response, ErrorView } from '../../../components/FlowView/Messages' +import { Provider } from 'react-redux' +import { TFlow, TStore } from '../../ducks/tutils' +import { updateEdit } from '../../../ducks/ui/flow' +import { parseUrl } from '../../../flow/utils' +import ContentView from '../../../components/ContentView' +import ContentViewOptions from '../../../components/ContentView/ContentViewOptions' +import Headers from '../../../components/FlowView/Headers' +import ValueEditor from '../../../components/ValueEditor/ValueEditor' +import mockXMLHttpRequest from 'mock-xmlhttprequest' + +global.XMLHttpRequest = mockXMLHttpRequest +global.fetch = jest.fn() + +let tflow = new TFlow(), + store = TStore() +store.getState().ui.flow.modifiedFlow = false + +mockXMLHttpRequest.onSend = xhr => { + let response = {result: 'success'}, + responseHeaders = {'Content-Type': 'application/json'} + xhr.respond(200, responseHeaders, JSON.stringify(response)) +} + +describe('Request Component', () => { + + afterEach(() => {store.clearActions()}) + + it('should render correctly', () => { + let provider = renderer.create( + <Provider store={store}> + <Request/> + </Provider> + ), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) + + let provider = TestUtils.renderIntoDocument( + <Provider store={store}> + <Request/> + </Provider>), + valueEditors = TestUtils.scryRenderedComponentsWithType(provider, ValueEditor) + + it('should handle done on flow request method', () => { + let valueEditor = valueEditors[0] + valueEditor.props.onDone('foo') + expect(store.getActions()).toEqual([updateEdit({ request: { method: 'foo' }})]) + }) + + it('should handle done on flow request url', () => { + let valueEditor = valueEditors[1], + url = 'http://foo/bar' + valueEditor.props.onDone(url) + expect(store.getActions()).toEqual([updateEdit({ request: { path: '', ...parseUrl(url)}})]) + }) + + it('should handle done on flow request http version', () => { + let valueEditor = valueEditors[2] + valueEditor.props.onDone('HTTP/9.9') + expect(store.getActions()).toEqual([updateEdit({ request: { http_version: 'HTTP/9.9' }})]) + }) + + it('should handle change on flow request header', () => { + let headers = TestUtils.findRenderedComponentWithType(provider, Headers) + headers.props.onChange('foo') + expect(store.getActions()).toEqual([updateEdit({ request: { headers: 'foo' }})]) + }) + + it('should handle change on flow request contentView', () => { + let contentView = TestUtils.findRenderedComponentWithType(provider, ContentView) + contentView.props.onContentChange('foo') + expect(store.getActions()).toEqual([updateEdit({ request: { content: 'foo' }})]) + }) + + it('should handle uploadContent on flow request ContentViewOptions', () => { + let contentViewOptions = TestUtils.findRenderedComponentWithType(provider, ContentViewOptions) + contentViewOptions.props.uploadContent('foo') + expect(fetch).toBeCalled() + fetch.mockClear() + }) +}) + +describe('Response Component', () => { + afterEach(() => {store.clearActions()}) + + it('should render correctly', () => { + let provider = renderer.create( + <Provider store={store}> + <Response/> + </Provider> + ), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) + + let provider = TestUtils.renderIntoDocument( + <Provider store={store}> + <Response/> + </Provider>), + valueEditors = TestUtils.scryRenderedComponentsWithType(provider, ValueEditor) + + it('should handle done on flow response http version', () => { + let valueEditor = valueEditors[0] + valueEditor.props.onDone('HTTP/9.9') + expect(store.getActions()).toEqual([updateEdit({ response: { http_version: 'HTTP/9.9' }})]) + }) + + it('should handle done on flow response status code', () => { + let valueEditor = valueEditors[1] + valueEditor.props.onDone('404') + expect(store.getActions()).toEqual([updateEdit({ response: { code: parseInt('404') }})]) + }) + + it('should handle done on flow response reason', () => { + let valueEdiotr = valueEditors[2] + valueEdiotr.props.onDone('foo') + expect(store.getActions()).toEqual([updateEdit( { response: { msg: 'foo' }})]) + }) + + it('should handle change on flow response headers', () => { + let headers = TestUtils.findRenderedComponentWithType(provider, Headers) + headers.props.onChange('foo') + expect(store.getActions()).toEqual([updateEdit( { response: { headers: 'foo' }})]) + }) + + it('should handle change on flow response ContentView', () => { + let contentView = TestUtils.findRenderedComponentWithType(provider, ContentView) + contentView.props.onContentChange('foo') + expect(store.getActions()).toEqual([updateEdit( { response: { content: 'foo' }})]) + }) + + it('should handle updateContent on flow response ContentViewOptions', () => { + let contentViewOptions = TestUtils.findRenderedComponentWithType(provider, ContentViewOptions) + contentViewOptions.props.uploadContent('foo') + expect(fetch).toBeCalled() + fetch.mockClear() + }) +}) + +describe('Error Component', () => { + it('should render correctly', () => { + let errorView = renderer.create(<ErrorView flow={tflow}/>), + tree = errorView.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/MessagesSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/MessagesSpec.js.snap new file mode 100644 index 00000000..9bbdf8e9 --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/__snapshots__/MessagesSpec.js.snap @@ -0,0 +1,568 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Error Component should render correctly 1`] = ` +<section + className="error" +> + <div + className="alert alert-warning" + > + error + <div> + <small> + 2017-05-21 12:38:32.481 + </small> + </div> + </div> +</section> +`; + +exports[`Request Component should render correctly 1`] = ` +<section + className="request" +> + <article> + <div + className="edit-flow-container" + > + <a + className="edit-flow" + onClick={[Function]} + title="Edit Flow" + > + <i + className="fa fa-pencil" + /> + </a> + </div> + <div + className="first-line request-line" + > + <div> + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "GET", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + + <div + className="inline-input readonly has-success" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "http://address:22/path", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + + <div + className="inline-input readonly has-success" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "HTTP/1.1", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </div> + </div> + <table + className="header-table" + > + <tbody> + <tr> + <td + className="header-name" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "header", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + <span + className="header-colon" + > + : + </span> + </td> + <td + className="header-value" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "qvalue", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </td> + </tr> + <tr> + <td + className="header-name" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "content-length", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + <span + className="header-colon" + > + : + </span> + </td> + <td + className="header-value" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "7", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </td> + </tr> + </tbody> + </table> + <hr /> + <div + className="contentview" + > + <div + className="text-center" + > + <i + className="fa fa-spinner fa-spin" + /> + </div> + </div> + </article> + <footer> + <div + className="view-options" + > + <div + className="dropup pull-left" + > + <a + className="btn btn-default btn-xs" + href="#" + onClick={[Function]} + > + <span> + + <b> + View: + </b> + + auto + + <span + className="caret" + /> + + </span> + </a> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + onClick={[Function]} + > + auto + </a> + + </li> + <li> + + <a + href="#" + onClick={[Function]} + > + raw + </a> + + </li> + <li> + + <a + href="#" + onClick={[Function]} + > + text + </a> + + </li> + </ul> + </div> + + <a + className="btn btn-default btn-xs" + href="/flows/d91165be-ca1f-4612-88a9-c0f8696f3e29/request/content" + title="Download the content of the flow." + > + <i + className="fa fa-download" + /> + </a> + + + <span> + foo + </span> + </div> + </footer> +</section> +`; + +exports[`Response Component should render correctly 1`] = ` +<section + className="response" +> + <article> + <div + className="edit-flow-container" + > + <a + className="edit-flow" + onClick={[Function]} + title="Edit Flow" + > + <i + className="fa fa-pencil" + /> + </a> + </div> + <div + className="first-line response-line" + > + <div + className="inline-input readonly has-success" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "HTTP/1.1", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + + <div + className="inline-input readonly has-success" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "200", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "OK", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </div> + <table + className="header-table" + > + <tbody> + <tr> + <td + className="header-name" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "header-response", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + <span + className="header-colon" + > + : + </span> + </td> + <td + className="header-value" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "svalue", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </td> + </tr> + <tr> + <td + className="header-name" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "content-length", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + <span + className="header-colon" + > + : + </span> + </td> + <td + className="header-value" + > + <div + className="inline-input readonly" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "7", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={undefined} + /> + </td> + </tr> + </tbody> + </table> + <hr /> + <div + className="contentview" + > + <div + className="text-center" + > + <i + className="fa fa-spinner fa-spin" + /> + </div> + </div> + </article> + <footer> + <div + className="view-options" + > + <div + className="dropup pull-left" + > + <a + className="btn btn-default btn-xs" + href="#" + onClick={[Function]} + > + <span> + + <b> + View: + </b> + + auto + + <span + className="caret" + /> + + </span> + </a> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + onClick={[Function]} + > + auto + </a> + + </li> + <li> + + <a + href="#" + onClick={[Function]} + > + raw + </a> + + </li> + <li> + + <a + href="#" + onClick={[Function]} + > + text + </a> + + </li> + </ul> + </div> + + <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> + + + <span> + foo + </span> + </div> + </footer> +</section> +`; |