| 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
133 |
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
| /* global it, describe, MouseEvent */
import assert from 'assert'
import React from 'react'
import {mount} from 'enzyme'
import Select from '../'
const noop = () => {}
describe('Select', () => {
it('should render a simple example', () => {
const wrapper = mount(<Select onChange={noop} />)
assert(wrapper.find('.Select'))
})
it('should render some default items', () => {
const wrapper = mount(<Select onChange={noop} />)
wrapper.find('.Select-body').simulate('click')
assert.equal(wrapper.find('.Select-listItem').length, 3)
})
it('should render a default placeholder', () => {
const wrapper = mount(<Select onChange={noop} />)
assert.equal(wrapper.find('.Select-placeholder').text(), 'Placeholder')
})
it('should render a given value instead of placeholder', () => {
const wrapper = mount(
<Select
onChange={noop}
selectedIndex={2}
items={['Fox', 'Rabbit', 'Dog']}
/>
)
assert.equal(wrapper.find('.Select-body').text(), 'Dog')
})
it('should render a label', () => {
const wrapper = mount(<Select label='Animals' onChange={noop} />)
assert.equal(wrapper.find('.Select-label').text(), 'Animals')
})
it('should open the list when clicked', () => {
const wrapper = mount(<Select onChange={noop} />)
wrapper.find('.Select-body').simulate('click')
assert(wrapper.find('.Select-list'))
})
it('should close the list when it is open and click outside happenend', () => {
const wrapper = mount(<Select onChange={noop} />)
// open list
wrapper.find('.Select-body').simulate('click')
assert.equal(wrapper.find('.Select-list').length, 1)
// simulate click somewhere
var event = new MouseEvent('click')
document.dispatchEvent(event)
// make sure list is closed
assert.equal(wrapper.find('.Select-list').length, 0)
})
it('should close the list on click on an item', () => {
const callback = () => {}
const wrapper = mount(<Select items={['Fox', 'Rabbit', 'Dog']} onChange={callback} />)
// open list
wrapper.find('.Select-body').simulate('click')
assert.equal(wrapper.find('.Select-list').length, 1)
// click on list item
wrapper.find('.Select-listItemLink').at(1).simulate('click')
var event = new MouseEvent('click')
document.dispatchEvent(event)
// make sure list is closed
assert.equal(wrapper.find('.Select-list').length, 0)
})
it('should render the list directly above the selected item', () => {
const wrapper = mount(
<Select
selectedIndex={1}
items={['Fox', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']}
onChange={noop}
/>
)
// open list
wrapper.find('.Select-body').simulate('click')
// single list item has height of 48px
// whole list has a padding top and bottom of 12px
// check the position for the second element => 48px + 12px = 60px
assert.equal(wrapper.find('.Select-list').node.style.top, '-60px')
})
it('should render a list item always in the middle of the list when list is too large', () => {
const wrapper = mount(
<Select
selectedIndex={6}
items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']}
onChange={noop}
/>
)
// open list
wrapper.find('.Select-body').simulate('click')
// single list item = 48px
// padding top = 8px
// sixth list item = 5 * 48px + 8px = 248px
// but!!!! list should not move all the way up -> keep list item centered and scroll
// element is on 'third' position -> 2 * 48px + 12px = 108px
assert.equal(wrapper.find('.Select-list').node.style.top, '-108px')
})
it('should not show the second last item in the center of the list', () => {
const wrapper = mount(
<Select
selectedIndex={7}
items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']}
onChange={noop}
/>
)
wrapper.find('.Select-body').simulate('click')
assert.equal(wrapper.find('.Select-list').node.style.top, '-156px')
})
it('should show the last item at the end of the list', () => {
const wrapper = mount(
<Select
selectedIndex={8}
items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']}
onChange={noop}
/>
)
wrapper.find('.Select-body').simulate('click')
assert.equal(wrapper.find('.Select-list').node.style.top, '-204px')
})
})
|