From a1ef0b697d5426fecd082a13385fb0ca51febdb2 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 29 May 2017 20:39:10 +0800 Subject: [web] Add tests for js/components/EventLog/EventList.jsx --- .../__tests__/components/EventLog/EventListSpec.js | 22 ++++++++++++++++ .../EventLog/__snapshots__/EventListSpec.js.snap | 30 ++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 web/src/js/__tests__/components/EventLog/EventListSpec.js create mode 100644 web/src/js/__tests__/components/EventLog/__snapshots__/EventListSpec.js.snap diff --git a/web/src/js/__tests__/components/EventLog/EventListSpec.js b/web/src/js/__tests__/components/EventLog/EventListSpec.js new file mode 100644 index 00000000..4f14dfba --- /dev/null +++ b/web/src/js/__tests__/components/EventLog/EventListSpec.js @@ -0,0 +1,22 @@ +import React from 'react' +import EventLogList from '../../../components/EventLog/EventList' +import TestUtils from 'react-dom/test-utils' + +describe('EventList Component', () => { + let mockEventList = [ + { id: 1, level: 'info', message: 'foo' }, + { id: 2, level: 'error', message: 'bar' } + ], + eventLogList = TestUtils.renderIntoDocument() + + it('should render correctly', () => { + expect(eventLogList.state).toMatchSnapshot() + expect(eventLogList.props).toMatchSnapshot() + }) + + it('should handle componentWillUnmount', () => { + window.removeEventListener = jest.fn() + eventLogList.componentWillUnmount() + expect(window.removeEventListener).toBeCalledWith('resize', eventLogList.onViewportUpdate) + }) +}) diff --git a/web/src/js/__tests__/components/EventLog/__snapshots__/EventListSpec.js.snap b/web/src/js/__tests__/components/EventLog/__snapshots__/EventListSpec.js.snap new file mode 100644 index 00000000..10bcb598 --- /dev/null +++ b/web/src/js/__tests__/components/EventLog/__snapshots__/EventListSpec.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EventList Component should render correctly 1`] = ` +Object { + "vScroll": Object { + "end": 1, + "paddingBottom": 18, + "paddingTop": 0, + "start": 0, + }, +} +`; + +exports[`EventList Component should render correctly 2`] = ` +Object { + "events": Array [ + Object { + "id": 1, + "level": "info", + "message": "foo", + }, + Object { + "id": 2, + "level": "error", + "message": "bar", + }, + ], + "rowHeight": 18, +} +`; -- cgit v1.2.3 From f2e8e57e1c0cffadc2ed1f2d36e75b03b279b930 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 30 May 2017 21:30:02 +0800 Subject: [web] Add tests for js/components/FlowView/Details.jsx --- .../__tests__/components/FlowView/DetailsSpec.js | 50 ++++ .../FlowView/__snapshots__/DetailsSpec.js.snap | 274 +++++++++++++++++++++ 2 files changed, 324 insertions(+) create mode 100644 web/src/js/__tests__/components/FlowView/DetailsSpec.js create mode 100644 web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap diff --git a/web/src/js/__tests__/components/FlowView/DetailsSpec.js b/web/src/js/__tests__/components/FlowView/DetailsSpec.js new file mode 100644 index 00000000..1b0192cf --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/DetailsSpec.js @@ -0,0 +1,50 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import Details, { TimeStamp, ConnectionInfo, CertificateInfo, Timing } from '../../../components/FlowView/Details' +import { TFlow } from '../../ducks/tutils' + +let tflow = TFlow() + +describe('TimeStamp Component', () => { + it('should render correctly', () => { + let timestamp = renderer.create(), + tree = timestamp.toJSON() + expect(tree).toMatchSnapshot() + // without timestamp + timestamp = renderer.create() + tree = timestamp.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('ConnectionInfo Component', () => { + it('should render correctly', () => { + let connectionInfo = renderer.create(), + tree = connectionInfo.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('CertificateInfo Component', () => { + it('should render correctly', () => { + let certificateInfo = renderer.create(), + tree = certificateInfo.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('Timing Component', () => { + it('should render correctly', () => { + let timing = renderer.create(), + tree = timing.toJSON() + expect(tree).toMatchSnapshot() + }) +}) + +describe('Details Component', () => { + it('should render correctly', () => { + let details = renderer.create(
), + tree = details.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap new file mode 100644 index 00000000..dcee1895 --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap @@ -0,0 +1,274 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CertificateInfo Component should render correctly 1`] = `
`; + +exports[`ConnectionInfo Component should render correctly 1`] = ` + + + + + + + + + + + +
+ Address: + + address:22 +
+ + TLS SNI: + + + address +
+`; + +exports[`Details Component should render correctly 1`] = ` +
+

+ Client Connection +

+ + + + + + + + + + + +
+ Address: + + address:22 +
+ + TLS SNI: + + + address +
+

+ Server Connection +

+ + + + + + + + + + + +
+ Address: + + address:22 +
+ + TLS SNI: + + + address +
+
+
+

+ Timing +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Server conn. initiated + : + + 1970-01-01 00:00:01.000 +
+ Client conn. established + : + + 1970-01-01 00:00:01.000 +
+ Server conn. TCP handshake + : + + 1970-01-01 00:00:02.000 +
+ Client conn. SSL handshake + : + + 1970-01-01 00:00:02.000 +
+ Server conn. SSL handshake + : + + 1970-01-01 00:00:03.000 +
+ First response byte + : + + 2017-05-21 12:38:32.481 +
+ Response complete + : + + 2017-05-21 12:38:32.481 +
+
+
+`; + +exports[`TimeStamp Component should render correctly 1`] = ` + + + foo + : + + + 2017-01-01 00:00:00.000 + + ( + 2min + ) + + + +`; + +exports[`TimeStamp Component should render correctly 2`] = ``; + +exports[`Timing Component should render correctly 1`] = ` +
+

+ Timing +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Server conn. initiated + : + + 1970-01-01 00:00:01.000 +
+ Client conn. established + : + + 1970-01-01 00:00:01.000 +
+ Server conn. TCP handshake + : + + 1970-01-01 00:00:02.000 +
+ Client conn. SSL handshake + : + + 1970-01-01 00:00:02.000 +
+ Server conn. SSL handshake + : + + 1970-01-01 00:00:03.000 +
+ First response byte + : + + 2017-05-21 12:38:32.481 +
+ Response complete + : + + 2017-05-21 12:38:32.481 +
+
+`; -- cgit v1.2.3 From 248dde26043560482a5b69b701df4d3814b9896b Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 30 May 2017 21:31:08 +0800 Subject: [web] Add tests for js/components/FlowView/Header.jsx --- .../__tests__/components/FlowView/HeadersSpec.js | 132 +++++++++++++++++++++ .../FlowView/__snapshots__/HeadersSpec.js.snap | 128 ++++++++++++++++++++ web/src/js/components/FlowView/Headers.jsx | 2 +- 3 files changed, 261 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/FlowView/HeadersSpec.js create mode 100644 web/src/js/__tests__/components/FlowView/__snapshots__/HeadersSpec.js.snap diff --git a/web/src/js/__tests__/components/FlowView/HeadersSpec.js b/web/src/js/__tests__/components/FlowView/HeadersSpec.js new file mode 100644 index 00000000..4ed93082 --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/HeadersSpec.js @@ -0,0 +1,132 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import renderer from 'react-test-renderer' +import TestUtils from 'react-dom/test-utils' +import Headers, { HeaderEditor } from '../../../components/FlowView/Headers' +import { Key } from '../../../utils' + +describe('HeaderEditor Component', () => { + + it('should render correctly', () => { + let headerEditor = renderer.create( + ), + tree = headerEditor.toJSON() + expect(tree).toMatchSnapshot() + }) + + let doneFn = jest.fn(), + removeFn = jest.fn(), + tabFn = jest.fn(), + headerEditor = TestUtils.renderIntoDocument( + ) + + it('should handle focus', () => { + let focusFn = jest.fn() + ReactDOM.findDOMNode = jest.fn( node => { + return {focus: focusFn} + }) + headerEditor.focus() + expect(ReactDOM.findDOMNode).toBeCalledWith(headerEditor) + expect(focusFn).toBeCalled() + }) + + it('should handle keyDown', () => { + let mockEvent = { keyCode: Key.BACKSPACE }, + getRangeAt = jest.fn( s => { + return { startOffset: 0, endOffset: 0 } + }) + window.getSelection = jest.fn(selection => { + return { getRangeAt } + }) + // Backspace + headerEditor.onKeyDown(mockEvent) + expect(window.getSelection).toBeCalled() + expect(getRangeAt).toBeCalledWith(0) + expect(headerEditor.props.onRemove).toBeCalledWith(mockEvent) + // Enter & Tab + mockEvent.keyCode = Key.ENTER + headerEditor.onKeyDown(mockEvent) + expect(headerEditor.props.onTab).toBeCalledWith(mockEvent) + }) +}) + +describe('Headers Component', () => { + let changeFn = jest.fn(), + mockMessage = { headers: [['k1', 'v1'], ['k2', '']] } + it('should handle correctly', () => { + let headers = renderer.create(), + tree = headers.toJSON() + expect(tree).toMatchSnapshot() + }) + + let headers = TestUtils.renderIntoDocument(), + headerEditors = TestUtils.scryRenderedComponentsWithType(headers, HeaderEditor), + key1Editor = headerEditors[0], + value1Editor = headerEditors[1], + key2Editor = headerEditors[2], + value2Editor = headerEditors[3] + + it('should handle change on header name', () => { + key2Editor.props.onDone('') + expect(changeFn).toBeCalled() + expect(headers._nextSel).toEqual('0-value') + changeFn.mockClear() + }) + + it('should handle change on header value', () => { + value2Editor.props.onDone('') + expect(changeFn).toBeCalled() + expect(headers._nextSel).toEqual('0-value') + changeFn.mockClear() + }) + + let mockEvent = { preventDefault: jest.fn() } + it('should handle remove on header name', () => { + key2Editor.props.onRemove(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + mockEvent.preventDefault.mockClear() + }) + + it('should handle remove on header value', () => { + value2Editor.props.onRemove(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + mockEvent.preventDefault.mockClear() + }) + + it('should handle tab on header name', () => { + key1Editor.props.onTab(mockEvent) + expect(headers._nextSel).toEqual('0-value') + }) + + it('should handle tab on header value', () => { + value1Editor.props.onTab(mockEvent) + expect(headers._nextSel).toEqual('1-key') + + value2Editor.props.onTab(mockEvent) + expect(mockEvent.preventDefault).toBeCalled() + expect(headers._nextSel).toEqual('2-key') + }) + + it('should handle componentDidUpdate', () => { + headers._nextSel = '1-value' + headers.refs['1-value'] = { focus: jest.fn() } + headers.componentDidUpdate() + expect(headers.refs['1-value'].focus).toBeCalled() + expect(headers._nextSel).toEqual(undefined) + }) + + it('should handle edit', () => { + headers.refs['0-key'] = { focus: jest.fn() } + headers.edit() + expect(headers.refs['0-key'].focus).toBeCalled() + }) + + it('should not delete last row when handle remove', () => { + mockMessage = { headers: [['', '']] } + headers = TestUtils.renderIntoDocument() + headers.onChange(0, 0, '') + expect(changeFn).toBeCalledWith([['Name', 'Value']]) + + }) + +}) diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/HeadersSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/HeadersSpec.js.snap new file mode 100644 index 00000000..5b5374dd --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/__snapshots__/HeadersSpec.js.snap @@ -0,0 +1,128 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeaderEditor Component should render correctly 1`] = ` +
+`; + +exports[`Headers Component should handle correctly 1`] = ` + + + + + + + + + + + +
+
+ + : + +
+
+
+
+ + : + +
+
+
+`; diff --git a/web/src/js/components/FlowView/Headers.jsx b/web/src/js/components/FlowView/Headers.jsx index 92e11465..76ca65b6 100644 --- a/web/src/js/components/FlowView/Headers.jsx +++ b/web/src/js/components/FlowView/Headers.jsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom' import ValueEditor from '../ValueEditor/ValueEditor' import { Key } from '../../utils' -class HeaderEditor extends Component { +export class HeaderEditor extends Component { constructor(props) { super(props) -- cgit v1.2.3 From f840d018e5a61c39fe465d28ff31d08b9a03a5a8 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 30 May 2017 21:46:17 +0800 Subject: [web] Add tests for js/components/FlowView/Nav.jsx --- .../js/__tests__/components/FlowView/NavSpec.js | 38 ++++++++++++++++++++++ .../FlowView/__snapshots__/NavSpec.js.snap | 35 ++++++++++++++++++++ web/src/js/components/FlowView/Nav.jsx | 3 +- 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/FlowView/NavSpec.js create mode 100644 web/src/js/__tests__/components/FlowView/__snapshots__/NavSpec.js.snap diff --git a/web/src/js/__tests__/components/FlowView/NavSpec.js b/web/src/js/__tests__/components/FlowView/NavSpec.js new file mode 100644 index 00000000..867e6f2c --- /dev/null +++ b/web/src/js/__tests__/components/FlowView/NavSpec.js @@ -0,0 +1,38 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import Nav, { NavAction } from '../../../components/FlowView/Nav' + +describe('Nav Component', () => { + let tabs = ['foo', 'bar'], + onSelectTab = jest.fn(), + nav = renderer.create(