aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/__tests__/components/FlowView/HeadersSpec.js
blob: 4ed9308204fca9a357c973b7d1e34dd71c2705a0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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']])

    })

})