From 248dde26043560482a5b69b701df4d3814b9896b Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 30 May 2017 21:31:08 +0800 Subject: [PATCH] [web] Add tests for js/components/FlowView/Header.jsx --- .../components/FlowView/HeadersSpec.js | 132 ++++++++++++++++++ .../__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 000000000..4ed930820 --- /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 000000000..5b5374dd9 --- /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 92e114659..76ca65b60 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)