[web] Add tests for js/components/FlowView/Header.jsx

3 files changed, 261 insertions, 1 deletions

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(
+            <HeaderEditor content="foo" onDone={jest.fn()}/>),
+        tree = headerEditor.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let doneFn = jest.fn(),
+        removeFn = jest.fn(),
+        tabFn = jest.fn(),
+        headerEditor = TestUtils.renderIntoDocument(
+        <HeaderEditor content="foo" onDone={doneFn} onRemove={removeFn} onTab={tabFn}/>)
+
+    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(<Headers onChange={changeFn} message={mockMessage}/>),
+            tree = headers.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let headers = TestUtils.renderIntoDocument(<Headers onChange={changeFn} message={mockMessage}/>),
+        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={changeFn} message={mockMessage}/>)
+        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`] = `
+<div
+  className="inline-input editable"
+  contentEditable={undefined}
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "foo",
+    }
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onInput={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onPaste={[Function]}
+  tabIndex={0}
+/>
+`;
+
+exports[`Headers Component should handle correctly 1`] = `
+<table
+  className="header-table"
+>
+  <tbody>
+    <tr>
+      <td
+        className="header-name"
+      >
+        <div
+          className="inline-input editable"
+          contentEditable={undefined}
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "k1",
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onPaste={[Function]}
+          tabIndex={0}
+        />
+        <span
+          className="header-colon"
+        >
+          :
+        </span>
+      </td>
+      <td
+        className="header-value"
+      >
+        <div
+          className="inline-input editable"
+          contentEditable={undefined}
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "v1",
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onPaste={[Function]}
+          tabIndex={0}
+        />
+      </td>
+    </tr>
+    <tr>
+      <td
+        className="header-name"
+      >
+        <div
+          className="inline-input editable"
+          contentEditable={undefined}
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "k2",
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onPaste={[Function]}
+          tabIndex={0}
+        />
+        <span
+          className="header-colon"
+        >
+          :
+        </span>
+      </td>
+      <td
+        className="header-value"
+      >
+        <div
+          className="inline-input editable"
+          contentEditable={undefined}
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "",
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onPaste={[Function]}
+          tabIndex={0}
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
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)