From 653505e734216d86459619d636c0d1f08f84b7f5 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 23 May 2017 19:06:57 +0800 Subject: [PATCH 01/15] [web] Add tests for js/components/Header/FilterDocs.js --- web/package.json | 1 + .../components/Header/FilterDocsSpec.js | 19 +++++++++++++++++++ web/yarn.lock | 10 ++++++++++ 3 files changed, 30 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/FilterDocsSpec.js diff --git a/web/package.json b/web/package.json index 94b0ee603..be63120dc 100644 --- a/web/package.json +++ b/web/package.json @@ -25,6 +25,7 @@ "dependencies": { "bootstrap": "^3.3.7", "classnames": "^2.2.5", + "jest-fetch-mock": "^1.1.1", "lodash": "^4.17.4", "prop-types": "^15.5.0", "react": "^15.4.2", diff --git a/web/src/js/__tests__/components/Header/FilterDocsSpec.js b/web/src/js/__tests__/components/Header/FilterDocsSpec.js new file mode 100644 index 000000000..cb722d6d5 --- /dev/null +++ b/web/src/js/__tests__/components/Header/FilterDocsSpec.js @@ -0,0 +1,19 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import FilterDocs from '../../../components/Header/FilterDocs' +import mockFetch from 'jest-fetch-mock' + +global.fetch = mockFetch + +describe('FilterDocs Component', () => { + + it('should render correctly', () => { + // fetch successes + fetch.mockResponseOnce(JSON.stringify({commands: [['cmd1', 'foo'], ['cmd2', 'bar']]}), {status: 200}) + let filterDocs = renderer.create(), + tree = filterDocs.toJSON() + // [TODO] doc in render() could not be set correctly. + console.log(tree) + }) + +}) diff --git a/web/yarn.lock b/web/yarn.lock index 602b49169..069a8590d 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -2888,6 +2888,12 @@ jest-environment-node@^19.0.0: jest-mock "^19.0.0" jest-util "^19.0.0" +jest-fetch-mock@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/jest-fetch-mock/-/jest-fetch-mock-1.1.1.tgz#7548b6d0c0c77071e9f8652fcb4f8d537e988d1f" + dependencies: + whatwg-fetch "1.0.0" + jest-file-exists@^19.0.0: version "19.0.0" resolved "https://registry.yarnpkg.com/jest-file-exists/-/jest-file-exists-19.0.0.tgz#cca2e587a11ec92e24cfeab3f8a94d657f3fceb8" @@ -5180,6 +5186,10 @@ whatwg-encoding@^1.0.1: dependencies: iconv-lite "0.4.13" +whatwg-fetch@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e" + whatwg-fetch@>=0.10.0: version "2.0.2" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e" From 05d78a8353370fe60e06bc75c1fe658b735ea2ed Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 26 May 2017 17:23:57 +0800 Subject: [PATCH 02/15] [web] js/components/Header/FilterDocs.jsx coverage ++ --- .../components/Header/FilterDocsSpec.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/web/src/js/__tests__/components/Header/FilterDocsSpec.js b/web/src/js/__tests__/components/Header/FilterDocsSpec.js index cb722d6d5..a8cc5e972 100644 --- a/web/src/js/__tests__/components/Header/FilterDocsSpec.js +++ b/web/src/js/__tests__/components/Header/FilterDocsSpec.js @@ -1,19 +1,18 @@ import React from 'react' import renderer from 'react-test-renderer' import FilterDocs from '../../../components/Header/FilterDocs' -import mockFetch from 'jest-fetch-mock' - -global.fetch = mockFetch describe('FilterDocs Component', () => { + let mockResponse = { json: + jest.fn(() => { return { commands: [['cmd1', 'foo'], ['cmd2', 'bar']]}}) + }, + promise = Promise.resolve(mockResponse) + global.fetch = jest.fn(r => { return promise }) - it('should render correctly', () => { - // fetch successes - fetch.mockResponseOnce(JSON.stringify({commands: [['cmd1', 'foo'], ['cmd2', 'bar']]}), {status: 200}) - let filterDocs = renderer.create(), - tree = filterDocs.toJSON() - // [TODO] doc in render() could not be set correctly. - console.log(tree) + let filterDocs = renderer.create(), + tree = filterDocs.toJSON() + + it('should render correctly when fetch success', () => { + expect(tree).toMatchSnapshot() }) - }) From 1d7e5544876b111e96358247435ba6dfb674b861 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 26 May 2017 17:25:51 +0800 Subject: [PATCH 03/15] [web] Add tests for js/components/Header/ConnectionIndicator.jsx --- .../Header/ConnectionIndicatorSpec.js | 57 +++++++++++++++++++ .../components/Header/ConnectionIndicator.jsx | 2 +- 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js diff --git a/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js new file mode 100644 index 000000000..88527d915 --- /dev/null +++ b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js @@ -0,0 +1,57 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import ConnectedIndicator, { ConnectionIndicator } from '../../../components/Header/ConnectionIndicator' +import { ConnectionState } from '../../../ducks/connection' +import { Provider } from 'react-redux' +import configureStore from 'redux-mock-store' + +const mockStore = configureStore() + +describe('ConnectionIndicator Component', () => { + + it('should render INIT', () => { + let connectionIndicator = renderer.create( + ), + tree = connectionIndicator.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should render FETCHING', () => { + let connectionIndicator = renderer.create( + ), + tree = connectionIndicator.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should render ESTABLISHED', () => { + let connectionIndicator = renderer.create( + ), + tree = connectionIndicator.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should render ERROR', () => { + let connectionIndicator = renderer.create( + ), + tree = connectionIndicator.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should render OFFLINE', () => { + let connectionIndicator = renderer.create( + ), + tree = connectionIndicator.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should connect to state', () => { + let store = mockStore({ connection: {state: ConnectionState.INIT} }), + provider = renderer.create( + + + ), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + diff --git a/web/src/js/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx index 1ee42e259..bbf0dd81e 100644 --- a/web/src/js/components/Header/ConnectionIndicator.jsx +++ b/web/src/js/components/Header/ConnectionIndicator.jsx @@ -9,7 +9,7 @@ ConnectionIndicator.propTypes = { message: PropTypes.string, } -function ConnectionIndicator({ state, message }) { +export function ConnectionIndicator({ state, message }) { switch (state) { case ConnectionState.INIT: return connecting…; From 04e2f7e14cc145aa7e98aa1f70fe6b1854c538d3 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 26 May 2017 17:27:36 +0800 Subject: [PATCH 04/15] [web] Add tests for js/components/Header/FileMenu.jsx --- .../components/Header/FileMenuSpec.js | 45 +++++++++++++++++++ web/src/js/components/Header/FileMenu.jsx | 2 +- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/Header/FileMenuSpec.js diff --git a/web/src/js/__tests__/components/Header/FileMenuSpec.js b/web/src/js/__tests__/components/Header/FileMenuSpec.js new file mode 100644 index 000000000..65b4647ae --- /dev/null +++ b/web/src/js/__tests__/components/Header/FileMenuSpec.js @@ -0,0 +1,45 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import { FileMenu } from '../../../components/Header/FileMenu' + +global.confirm = jest.fn( s => true ) + +describe('FileMenu Component', () => { + let clearFn = jest.fn(), + loadFn = jest.fn(), + saveFn = jest.fn(), + mockEvent = { + preventDefault: jest.fn(), + target: { files: ["foo", "bar "] } + }, + createNodeMock = () => { return { click: jest.fn() }}, + fileMenu = renderer.create( + , { createNodeMock }), + tree = fileMenu.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + let ul = tree.children[1] + + it('should clear flows', () => { + let a = ul.children[0].children[1] + a.props.onClick(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + expect(clearFn).toBeCalled() + }) + + it('should load flows', () => { + let fileChooser = ul.children[1].children[1], + input = fileChooser.children[2] + input.props.onChange(mockEvent) + expect(loadFn).toBeCalledWith("foo") + }) + + it('should save flows', () => { + let a = ul.children[2].children[1] + a.props.onClick(mockEvent) + expect(saveFn).toBeCalled() + }) +}) diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 1975d1cb5..70fbb2c3f 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -17,7 +17,7 @@ FileMenu.onNewClick = (e, clearFlows) => { clearFlows() } -function FileMenu ({clearFlows, loadFlows, saveFlows}) { +export function FileMenu ({clearFlows, loadFlows, saveFlows}) { return ( FileMenu.onNewClick(e, clearFlows)}> From fbdbb097a34918d0ff534a08ccfa9faf27c1237d Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 26 May 2017 18:08:29 +0800 Subject: [PATCH 05/15] [web] Add tests for js/components/Header/FilterInput.jsx --- .../components/Header/FilterInputSpec.js | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/FilterInputSpec.js diff --git a/web/src/js/__tests__/components/Header/FilterInputSpec.js b/web/src/js/__tests__/components/Header/FilterInputSpec.js new file mode 100644 index 000000000..6b19770e6 --- /dev/null +++ b/web/src/js/__tests__/components/Header/FilterInputSpec.js @@ -0,0 +1,93 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import FilterInput from '../../../components/Header/FilterInput' +import FilterDocs from '../../../components/Header/FilterDocs' +import TestUtil from 'react-dom/test-utils' +import ReactDOM from 'react-dom' +import { Key } from '../../../utils' + +describe('FilterDocs Component', () => { + it('should render correctly', () => { + let filterInput = renderer.create(), + tree = filterInput.toJSON() + expect(tree).toMatchSnapshot() + }) + + let filterInput = TestUtil.renderIntoDocument( + ) + it('should handle componentWillReceiveProps', () => { + filterInput.componentWillReceiveProps({value: 'foo'}) + expect(filterInput.state.value).toEqual('foo') + }) + + it('should handle isValid', () => { + // valid + expect(filterInput.isValid("~u foo")).toBeTruthy() + expect(filterInput.isValid("~foo bar")).toBeFalsy() + }) + + it('should handle getDesc', () => { + filterInput.state.value = '' + expect(filterInput.getDesc().type).toEqual(FilterDocs) + + filterInput.state.value = '~u foo' + expect(filterInput.getDesc()).toEqual('url matches /foo/i') + + filterInput.state.value = '~foo bar' + expect(filterInput.getDesc()).toEqual('SyntaxError: Expected filter expression but \"~\" found.') + }) + + it('should handle change', () => { + let mockEvent = { target: { value: '~a bar'} } + filterInput.onChange(mockEvent) + expect(filterInput.state.value).toEqual('~a bar') + expect(filterInput.props.onChange).toBeCalledWith('~a bar') + }) + + it('should handle focus', () => { + filterInput.onFocus() + expect(filterInput.state.focus).toBeTruthy() + }) + + it('should handle blur', () => { + filterInput.onBlur() + expect(filterInput.state.focus).toBeFalsy() + }) + + it('should handle mouseEnter', () => { + filterInput.onMouseEnter() + expect(filterInput.state.mousefocus).toBeTruthy() + }) + + it('should handle mouseLeave', () => { + filterInput.onMouseLeave() + expect(filterInput.state.mousefocus).toBeFalsy() + }) + + let input = ReactDOM.findDOMNode(filterInput.refs.input) + + it('should handle keyDown', () => { + input.blur = jest.fn() + let mockEvent = { + keyCode: Key.ESC, + stopPropagation: jest.fn() + } + filterInput.onKeyDown(mockEvent) + expect(input.blur).toBeCalled() + expect(filterInput.state.mousefocus).toBeFalsy() + expect(mockEvent.stopPropagation).toBeCalled() + }) + + it('should handle selectFilter', () => { + input.focus = jest.fn() + filterInput.selectFilter('bar') + expect(filterInput.state.value).toEqual('bar') + expect(input.focus).toBeCalled() + }) + + it('should handle select', () => { + input.select = jest.fn() + filterInput.select() + expect(input.select).toBeCalled() + }) +}) From b1d29dcaa10731731288f647680920bdfbad398f Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 21:13:21 +0800 Subject: [PATCH 06/15] [web] Remove jest-fetch-mock dependency. --- web/package.json | 1 - web/yarn.lock | 10 ---------- 2 files changed, 11 deletions(-) diff --git a/web/package.json b/web/package.json index be63120dc..94b0ee603 100644 --- a/web/package.json +++ b/web/package.json @@ -25,7 +25,6 @@ "dependencies": { "bootstrap": "^3.3.7", "classnames": "^2.2.5", - "jest-fetch-mock": "^1.1.1", "lodash": "^4.17.4", "prop-types": "^15.5.0", "react": "^15.4.2", diff --git a/web/yarn.lock b/web/yarn.lock index 069a8590d..602b49169 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -2888,12 +2888,6 @@ jest-environment-node@^19.0.0: jest-mock "^19.0.0" jest-util "^19.0.0" -jest-fetch-mock@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/jest-fetch-mock/-/jest-fetch-mock-1.1.1.tgz#7548b6d0c0c77071e9f8652fcb4f8d537e988d1f" - dependencies: - whatwg-fetch "1.0.0" - jest-file-exists@^19.0.0: version "19.0.0" resolved "https://registry.yarnpkg.com/jest-file-exists/-/jest-file-exists-19.0.0.tgz#cca2e587a11ec92e24cfeab3f8a94d657f3fceb8" @@ -5186,10 +5180,6 @@ whatwg-encoding@^1.0.1: dependencies: iconv-lite "0.4.13" -whatwg-fetch@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e" - whatwg-fetch@>=0.10.0: version "2.0.2" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e" From cdb256682ecbd6a76a44dbfb53bfe22eb5665a9c Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 21:19:49 +0800 Subject: [PATCH 07/15] [web] Add TStore in js/__tests__/ducks/tutils.js --- .../components/FlowTable/FlowTableHeadSpec.js | 5 +- .../Header/ConnectionIndicatorSpec.js | 6 +- web/src/js/__tests__/ducks/tutils.js | 62 ++++++++++++++++++- 3 files changed, 65 insertions(+), 8 deletions(-) diff --git a/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js b/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js index 51ff4ceb2..3b7302f22 100644 --- a/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js +++ b/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js @@ -2,9 +2,8 @@ import React from 'react' import renderer from 'react-test-renderer' import ConnectedHead, { FlowTableHead } from '../../../components/FlowTable/FlowTableHead' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' +import { TStore } from '../../ducks/tutils' -const mockStore = configureStore() describe('FlowTableHead Component', () => { let sortFn = jest.fn(), @@ -21,7 +20,7 @@ describe('FlowTableHead Component', () => { }) it('should connect to state', () => { - let store = mockStore({ flows: {sort: {desc: true, column: 'PathColumn'}} }), + let store = TStore(), provider = renderer.create( diff --git a/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js index 88527d915..45fcb5e40 100644 --- a/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js +++ b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js @@ -3,9 +3,7 @@ import renderer from 'react-test-renderer' import ConnectedIndicator, { ConnectionIndicator } from '../../../components/Header/ConnectionIndicator' import { ConnectionState } from '../../../ducks/connection' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' - -const mockStore = configureStore() +import { TStore } from '../../ducks/tutils' describe('ConnectionIndicator Component', () => { @@ -45,7 +43,7 @@ describe('ConnectionIndicator Component', () => { }) it('should connect to state', () => { - let store = mockStore({ connection: {state: ConnectionState.INIT} }), + let store = TStore(), provider = renderer.create( diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js index 211b61e3b..2a79ede01 100644 --- a/web/src/js/__tests__/ducks/tutils.js +++ b/web/src/js/__tests__/ducks/tutils.js @@ -1,5 +1,11 @@ +import React from 'react' import { combineReducers, applyMiddleware, createStore as createReduxStore } from 'redux' import thunk from 'redux-thunk' +import configureStore from 'redux-mock-store' +import { ConnectionState } from '../../ducks/connection' +import TFlow from './_tflow' + +const mockStore = configureStore([thunk]) export function createStore(parts) { return createReduxStore( @@ -8,4 +14,58 @@ export function createStore(parts) { ) } -export { default as TFlow } from './_tflow' +export { TFlow } + +export function TStore(){ + let tflow = new TFlow() + return mockStore({ + ui: { + flow: { + contentView: 'Auto', + displayLarge: false, + showFullContent: true, + maxContentLines: 10, + content: ['foo', 'bar'], + viewDescription: 'foo', + modifiedFlow: true, + tab: 'request' + }, + header: { + tab: 'Start' + } + }, + settings: { + contentViews: ['Auto', 'Raw', 'Text'], + anticache: true, + anticomp: false + }, + flows: { + selected: ["d91165be-ca1f-4612-88a9-c0f8696f3e29"], + byId: {"d91165be-ca1f-4612-88a9-c0f8696f3e29": tflow}, + filter: '~u foo', + highlight: '~a bar', + sort: { + desc: true, + column: 'PathColumn' + } + }, + connection: { + state: ConnectionState.ESTABLISHED + + }, + eventLog: { + visible: true, + filters: { + debug: true, + info: true, + web: false, + warn: true, + error: true + }, + view: [ + { id: 1, level: 'info', message: 'foo' }, + { id: 2, level: 'error', message: 'bar' } + ] + } + }) +} From ddc03df4f6cafec98b2009978451760694020af3 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 21:22:49 +0800 Subject: [PATCH 08/15] [web] Add tests for js/components/Header/FlowMenu.jsx --- .../components/Header/FlowMenuSpec.js | 102 ++++++++ .../Header/__snapshots__/FlowMenuSpec.js.snap | 245 ++++++++++++++++++ 2 files changed, 347 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/FlowMenuSpec.js create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap diff --git a/web/src/js/__tests__/components/Header/FlowMenuSpec.js b/web/src/js/__tests__/components/Header/FlowMenuSpec.js new file mode 100644 index 000000000..1278d8ee4 --- /dev/null +++ b/web/src/js/__tests__/components/Header/FlowMenuSpec.js @@ -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( + ), + tree = flowMenu.toJSON() + expect(tree).toMatchSnapshot() + }) + + let flowMenu = renderer.create(), + 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(), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) + +}) diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap new file mode 100644 index 000000000..b0b28f1bb --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap @@ -0,0 +1,245 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FlowMenu Component should connect to state 1`] = ` +
+
+
+
+ + Replay +
+
+ + Duplicate +
+
+ + Revert +
+
+ + Delete +
+
+
+ Flow Modification +
+
+
+
+
+ + Download +
+
+
+ Export +
+
+
+
+
+ + Resume +
+
+ + Abort +
+
+
+ Interception +
+
+
+`; + +exports[`FlowMenu Component should render correctly with flow 1`] = ` +
+
+
+
+ + Replay +
+
+ + Duplicate +
+
+ + Revert +
+
+ + Delete +
+
+
+ Flow Modification +
+
+
+
+
+ + Download +
+
+
+ Export +
+
+
+
+
+ + Resume +
+
+ + Abort +
+
+
+ Interception +
+
+
+`; + +exports[`FlowMenu Component should render correctly without flow 1`] = `
`; From 6abb04c4f89bb4514f8eeffffdec39ea4a1a9746 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 21:24:23 +0800 Subject: [PATCH 09/15] [web] Add snapshot files. --- .../ConnectionIndicatorSpec.js.snap | 50 +++++++++++ .../Header/__snapshots__/FileMenuSpec.js.snap | 86 +++++++++++++++++++ .../__snapshots__/FilterDocsSpec.js.snap | 7 ++ .../__snapshots__/FilterInputSpec.js.snap | 30 +++++++ 4 files changed, 173 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/ConnectionIndicatorSpec.js.snap create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/FilterDocsSpec.js.snap create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap diff --git a/web/src/js/__tests__/components/Header/__snapshots__/ConnectionIndicatorSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/ConnectionIndicatorSpec.js.snap new file mode 100644 index 000000000..817ba395a --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/ConnectionIndicatorSpec.js.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConnectionIndicator Component should connect to state 1`] = ` + + connected + +`; + +exports[`ConnectionIndicator Component should render ERROR 1`] = ` + + connection lost + +`; + +exports[`ConnectionIndicator Component should render ESTABLISHED 1`] = ` + + connected + +`; + +exports[`ConnectionIndicator Component should render FETCHING 1`] = ` + + fetching data… + +`; + +exports[`ConnectionIndicator Component should render INIT 1`] = ` + + connecting… + +`; + +exports[`ConnectionIndicator Component should render OFFLINE 1`] = ` + + offline + +`; diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap new file mode 100644 index 000000000..13ecf3f55 --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FileMenu Component should render correctly 1`] = ` + +`; diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FilterDocsSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FilterDocsSpec.js.snap new file mode 100644 index 000000000..cd0c9ddab --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/FilterDocsSpec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FilterDocs Component should render correctly when fetch success 1`] = ` + +`; diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap new file mode 100644 index 000000000..f635f037d --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FilterDocs Component should render correctly 1`] = ` +
+ + + + +
+`; From 62d39200d0301f033de5768fcd414ced65c0a2d3 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 21:43:06 +0800 Subject: [PATCH 10/15] [web] Update js/Component/Header/FlowMenu.jsx --- web/src/js/components/Header/FlowMenu.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index fb61baf18..8f1042136 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -17,7 +17,7 @@ FlowMenu.propTypes = { revertFlow: PropTypes.func.isRequired } -function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) { +export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) { if (!flow) return
return ( From 134331b9972e877f0c62dbbaa8ec1ee1c96d0e8c Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 22:56:10 +0800 Subject: [PATCH 11/15] [web] Add tests for js/components/Header/MenuToogle.jsx --- .../components/Header/MenuToggleSpec.js | 55 +++++++++++++++++++ .../__snapshots__/MenuToggleSpec.js.snap | 50 +++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/MenuToggleSpec.js create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/MenuToggleSpec.js.snap diff --git a/web/src/js/__tests__/components/Header/MenuToggleSpec.js b/web/src/js/__tests__/components/Header/MenuToggleSpec.js new file mode 100644 index 000000000..dabaaa4e6 --- /dev/null +++ b/web/src/js/__tests__/components/Header/MenuToggleSpec.js @@ -0,0 +1,55 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import { MenuToggle, SettingsToggle, EventlogToggle } from '../../../components/Header/MenuToggle' +import { Provider } from 'react-redux' +import { REQUEST_UPDATE } from '../../../ducks/settings' +import { TStore } from '../../ducks/tutils' + +global.fetch = jest.fn() + +describe('MenuToggle Component', () => { + it('should render correctly', () => { + let changeFn = jest.fn(), + menuToggle = renderer.create( + +

foo children

+ ), + tree = menuToggle.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('SettingToggle Component', () => { + let store = TStore(), + provider = renderer.create( + + +

foo children

+ + ), + tree = provider.toJSON() + + it('should render and connect to state', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle change', () => { + let menuToggle = tree.children[0].children[0] + menuToggle.props.onChange() + expect(store.getActions()).toEqual([{ type: REQUEST_UPDATE }]) + }) +}) + +describe('EventlogToggle Component', () => { + let store = TStore(), + changFn = jest.fn(), + provider = renderer.create( + + + + ), + tree = provider.toJSON() + it('should render and connect to state', () => { + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/Header/__snapshots__/MenuToggleSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/MenuToggleSpec.js.snap new file mode 100644 index 000000000..a0859081b --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/MenuToggleSpec.js.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EventlogToggle Component should render and connect to state 1`] = ` +
+ +
+`; + +exports[`MenuToggle Component should render correctly 1`] = ` +
+ +
+`; + +exports[`SettingToggle Component should render and connect to state 1`] = ` +
+ +
+`; From fbaa842a462bbe8360d68b24eed9e7b2d7d3c7dc Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 27 May 2017 22:58:01 +0800 Subject: [PATCH 12/15] [web] Add tests for js/components/Header/OptionMenu.jsx --- .../components/Header/OptionMenuSpec.js | 19 +++ .../__snapshots__/OptionMenuSpec.js.snap | 145 ++++++++++++++++++ 2 files changed, 164 insertions(+) create mode 100644 web/src/js/__tests__/components/Header/OptionMenuSpec.js create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap diff --git a/web/src/js/__tests__/components/Header/OptionMenuSpec.js b/web/src/js/__tests__/components/Header/OptionMenuSpec.js new file mode 100644 index 000000000..b84fce6e5 --- /dev/null +++ b/web/src/js/__tests__/components/Header/OptionMenuSpec.js @@ -0,0 +1,19 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import { Provider } from 'react-redux' +import OptionMenu from '../../../components/Header/OptionMenu' +import { TStore } from '../../ducks/tutils' + + +describe('OptionMenu Component', () => { + it('should render correctly', () => { + let store = TStore(), + provider = renderer.create( + + + + ), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap new file mode 100644 index 000000000..9299e69f2 --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap @@ -0,0 +1,145 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OptionMenu Component should render correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ Protocol Support +
+
+
+
+
+ +
+
+ +
+
+
+ HTTP Options +
+
+
+
+
+ +
+
+ +
+
+
+ View Options +
+
+
+`; From 9c90d13149ec2db5bbe6db3b076bf3da78e0cac9 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sun, 28 May 2017 19:20:09 +0800 Subject: [PATCH 13/15] [web] Add tests for js/components/Header/MainMenu.js --- .../components/Header/MainMenuSpec.js | 26 ++++++ .../Header/__snapshots__/MainMenuSpec.js.snap | 86 +++++++++++++++++++ web/src/js/components/Header/MainMenu.jsx | 6 +- 3 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/Header/MainMenuSpec.js create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap diff --git a/web/src/js/__tests__/components/Header/MainMenuSpec.js b/web/src/js/__tests__/components/Header/MainMenuSpec.js new file mode 100644 index 000000000..927166fdd --- /dev/null +++ b/web/src/js/__tests__/components/Header/MainMenuSpec.js @@ -0,0 +1,26 @@ +jest.mock('../../../ducks/settings') + +import React from 'react' +import renderer from 'react-test-renderer' +import MainMenu, { setIntercept } from '../../../components/Header/MainMenu' +import { Provider } from 'react-redux' +import { update as updateSettings } from '../../../ducks/settings' +import { TStore } from '../../ducks/tutils' + +describe('MainMenu Component', () => { + let store = TStore() + + it('should render and connect to state', () => { + let provider = renderer.create( + + + ), + tree = provider.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle change on interceptInput', () => { + setIntercept('foo') + expect(updateSettings).toBeCalledWith({ intercept: 'foo' }) + }) +}) diff --git a/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap new file mode 100644 index 000000000..b9735aa5d --- /dev/null +++ b/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MainMenu Component should render and connect to state 1`] = ` +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+`; diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 465649d70..162ed0f5b 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -17,6 +17,10 @@ export default function MainMenu() { ) } +export function setIntercept(intercept) { + updateSettings({ intercept }) +} + const InterceptInput = connect( state => ({ value: state.settings.intercept || '', @@ -24,7 +28,7 @@ const InterceptInput = connect( type: 'pause', color: 'hsl(208, 56%, 53%)' }), - { onChange: intercept => updateSettings({ intercept }) } + { onChange: setIntercept } )(FilterInput); const FlowFilterInput = connect( From a0bb64fdd3befa4b7bc7fd13c5a6f360eee26daa Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 29 May 2017 09:15:29 +0800 Subject: [PATCH 14/15] [web] Minor fixes. --- web/src/js/__tests__/components/Header/FilterDocsSpec.js | 4 ++-- web/src/js/__tests__/components/Header/FilterInputSpec.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/js/__tests__/components/Header/FilterDocsSpec.js b/web/src/js/__tests__/components/Header/FilterDocsSpec.js index a8cc5e972..321f94836 100644 --- a/web/src/js/__tests__/components/Header/FilterDocsSpec.js +++ b/web/src/js/__tests__/components/Header/FilterDocsSpec.js @@ -4,10 +4,10 @@ import FilterDocs from '../../../components/Header/FilterDocs' describe('FilterDocs Component', () => { let mockResponse = { json: - jest.fn(() => { return { commands: [['cmd1', 'foo'], ['cmd2', 'bar']]}}) + () => { return { commands: [['cmd1', 'foo'], ['cmd2', 'bar']]}} }, promise = Promise.resolve(mockResponse) - global.fetch = jest.fn(r => { return promise }) + global.fetch = r => { return promise } let filterDocs = renderer.create(), tree = filterDocs.toJSON() diff --git a/web/src/js/__tests__/components/Header/FilterInputSpec.js b/web/src/js/__tests__/components/Header/FilterInputSpec.js index 6b19770e6..861934565 100644 --- a/web/src/js/__tests__/components/Header/FilterInputSpec.js +++ b/web/src/js/__tests__/components/Header/FilterInputSpec.js @@ -6,7 +6,7 @@ import TestUtil from 'react-dom/test-utils' import ReactDOM from 'react-dom' import { Key } from '../../../utils' -describe('FilterDocs Component', () => { +describe('FilterInput Component', () => { it('should render correctly', () => { let filterInput = renderer.create(), tree = filterInput.toJSON() From a0ec6f58e960ba8f41929da971b3603af1c7e629 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 29 May 2017 09:33:36 +0800 Subject: [PATCH 15/15] [web] Update snapshot. --- .../components/Header/__snapshots__/FilterInputSpec.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap index f635f037d..5afa8d7a3 100644 --- a/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap +++ b/web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FilterDocs Component should render correctly 1`] = ` +exports[`FilterInput Component should render correctly 1`] = `