diff options
Diffstat (limited to 'web')
7 files changed, 406 insertions, 2 deletions
diff --git a/web/src/js/__tests__/components/ContentViewSpec.js b/web/src/js/__tests__/components/ContentViewSpec.js new file mode 100644 index 00000000..a654870e --- /dev/null +++ b/web/src/js/__tests__/components/ContentViewSpec.js @@ -0,0 +1,62 @@ +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', () => { + store.getState().ui.flow.contentView = 'Edit' + 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() + }) +}) diff --git a/web/src/js/__tests__/components/EventLogSpec.js b/web/src/js/__tests__/components/EventLogSpec.js new file mode 100644 index 00000000..8510de55 --- /dev/null +++ b/web/src/js/__tests__/components/EventLogSpec.js @@ -0,0 +1,57 @@ +jest.mock('../../components/EventLog/EventList') + +import React from 'react' +import renderer from 'react-test-renderer' +import TestUtils from 'react-dom/test-utils' +import EventLog, { PureEventLog } from '../../components/EventLog' +import { Provider } from 'react-redux' +import { TStore } from '../ducks/tutils' + +window.addEventListener = jest.fn() +window.removeEventListener = jest.fn() + +describe('EventLog Component', () => { + let store = TStore(), + provider = renderer.create( + <Provider store={store}> + <EventLog/> + </Provider>), + tree = provider.toJSON() + + it('should connect to state and render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle toggleFilter', () => { + let debugToggleButton = tree.children[0].children[1].children[0] + debugToggleButton.props.onClick() + }) + + provider = TestUtils.renderIntoDocument( + <Provider store={store}><EventLog/></Provider>) + let eventLog = TestUtils.findRenderedComponentWithType(provider, PureEventLog), + mockEvent = { preventDefault: jest.fn() } + + it('should handle DragStart', () => { + eventLog.onDragStart(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + expect(window.addEventListener).toBeCalledWith('mousemove', eventLog.onDragMove) + expect(window.addEventListener).toBeCalledWith('mouseup', eventLog.onDragStop) + expect(window.addEventListener).toBeCalledWith('dragend', eventLog.onDragStop) + mockEvent.preventDefault.mockClear() + }) + + it('should handle DragMove', () => { + eventLog.onDragMove(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + mockEvent.preventDefault.mockClear() + }) + + console.error = jest.fn() // silent the error. + it('should handle DragStop', () => { + eventLog.onDragStop(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + expect(window.removeEventListener).toBeCalledWith('mousemove', eventLog.onDragMove) + }) + +}) diff --git a/web/src/js/__tests__/components/FlowTableSpec.js b/web/src/js/__tests__/components/FlowTableSpec.js new file mode 100644 index 00000000..4d8de12c --- /dev/null +++ b/web/src/js/__tests__/components/FlowTableSpec.js @@ -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() + }) +}) diff --git a/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap new file mode 100644 index 00000000..60b816e2 --- /dev/null +++ b/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap @@ -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> +`; diff --git a/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap new file mode 100644 index 00000000..11c3a29e --- /dev/null +++ b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap @@ -0,0 +1,76 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EventLog Component should connect to state and render correctly 1`] = ` +<div + className="eventlog" + style={ + Object { + "height": 200, + } + } +> + <div + onMouseDown={[Function]} + > + Eventlog + <div + className="pull-right" + > + <div + className="btn btn-toggle btn-primary" + onClick={[Function]} + > + <i + className="fa fa-fw fa-check-square-o" + /> + + debug + </div> + <div + className="btn btn-toggle btn-primary" + onClick={[Function]} + > + <i + className="fa fa-fw fa-check-square-o" + /> + + info + </div> + <div + className="btn btn-toggle btn-default" + onClick={[Function]} + > + <i + className="fa fa-fw fa-square-o" + /> + + web + </div> + <div + className="btn btn-toggle btn-primary" + onClick={[Function]} + > + <i + className="fa fa-fw fa-check-square-o" + /> + + warn + </div> + <div + className="btn btn-toggle btn-primary" + onClick={[Function]} + > + <i + className="fa fa-fw fa-check-square-o" + /> + + error + </div> + <i + className="fa fa-close" + onClick={[Function]} + /> + </div> + </div> +</div> +`; diff --git a/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap new file mode 100644 index 00000000..7149903c --- /dev/null +++ b/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap @@ -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> +`; diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx index a83cdb28..40fe900e 100644 --- a/web/src/js/components/EventLog.jsx +++ b/web/src/js/components/EventLog.jsx @@ -5,7 +5,7 @@ import { toggleFilter, toggleVisibility } from '../ducks/eventLog' import ToggleButton from './common/ToggleButton' import EventList from './EventLog/EventList' -class EventLog extends Component { +export class PureEventLog extends Component { static propTypes = { filters: PropTypes.object.isRequired, @@ -77,4 +77,4 @@ export default connect( close: toggleVisibility, toggleFilter: toggleFilter, } -)(EventLog) +)(PureEventLog) |