]>
Commit | Line | Data |
---|---|---|
02d1b455 M |
1 | import ReactDOM from 'react-dom'; |
2 | import React from 'react'; | |
3 | import TimePicker from '../src/TimePicker'; | |
02d1b455 | 4 | import TestUtils from 'react-addons-test-utils'; |
e9060dda | 5 | const Simulate = TestUtils.Simulate; |
02d1b455 M |
6 | import expect from 'expect.js'; |
7 | import async from 'async'; | |
4984ed85 | 8 | import moment from 'moment'; |
e9060dda | 9 | |
10 | describe('Select', () => { | |
11 | let container; | |
02d1b455 M |
12 | |
13 | function renderPicker(props) { | |
e9060dda | 14 | const showSecond = true; |
4984ed85 | 15 | const format = 'HH:mm:ss'; |
02d1b455 M |
16 | |
17 | return ReactDOM.render( | |
18 | <TimePicker | |
4984ed85 | 19 | format={format} |
02d1b455 | 20 | showSecond={showSecond} |
4984ed85 | 21 | defaultValue={moment('01:02:04', format)} |
02d1b455 M |
22 | {...props} |
23 | />, container); | |
24 | } | |
25 | ||
e9060dda | 26 | beforeEach(() => { |
02d1b455 M |
27 | container = document.createElement('div'); |
28 | document.body.appendChild(container); | |
29 | }); | |
30 | ||
e9060dda | 31 | afterEach(() => { |
02d1b455 M |
32 | ReactDOM.unmountComponentAtNode(container); |
33 | document.body.removeChild(container); | |
34 | }); | |
35 | ||
e9060dda | 36 | describe('select number', () => { |
37 | it('select number correctly', (done) => { | |
38 | const picker = renderPicker(); | |
02d1b455 | 39 | expect(picker.state.open).not.to.be.ok(); |
4984ed85 | 40 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
41 | 'rc-time-picker-input')[0]; | |
e9060dda | 42 | let selector; |
43 | async.series([(next) => { | |
02d1b455 M |
44 | expect(picker.state.open).to.be(false); |
45 | ||
46 | Simulate.click(input); | |
47 | setTimeout(next, 100); | |
e9060dda | 48 | }, (next) => { |
02d1b455 | 49 | expect(picker.state.open).to.be(true); |
4984ed85 | 50 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
51 | 'rc-time-picker-panel-select'); | |
02d1b455 M |
52 | |
53 | setTimeout(next, 100); | |
e9060dda | 54 | }, (next) => { |
02d1b455 M |
55 | expect(selector.length).to.be(3); |
56 | ||
57 | next(); | |
e9060dda | 58 | }], () => { |
02d1b455 M |
59 | done(); |
60 | }); | |
61 | }); | |
02d1b455 M |
62 | }); |
63 | ||
e9060dda | 64 | describe('select to change value', () => { |
65 | it('hour correctly', (done) => { | |
66 | let change; | |
67 | const picker = renderPicker({ | |
68 | onChange(v) { | |
02d1b455 | 69 | change = v; |
e9060dda | 70 | }, |
02d1b455 M |
71 | }); |
72 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 73 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
74 | 'rc-time-picker-input')[0]; | |
e9060dda | 75 | let header; |
76 | async.series([(next) => { | |
02d1b455 M |
77 | expect(picker.state.open).to.be(false); |
78 | ||
79 | Simulate.click(input); | |
80 | setTimeout(next, 100); | |
e9060dda | 81 | }, (next) => { |
02d1b455 | 82 | expect(picker.state.open).to.be(true); |
4984ed85 | 83 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
84 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 85 | expect(header).to.be.ok(); |
4984ed85 | 86 | expect((header).value).to.be('01:02:04'); |
87 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 88 | |
4984ed85 | 89 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
90 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b | 91 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
92 | Simulate.click(option); |
93 | setTimeout(next, 100); | |
e9060dda | 94 | }, (next) => { |
02d1b455 | 95 | expect(change).to.be.ok(); |
4984ed85 | 96 | expect(change.hour()).to.be(19); |
97 | expect((header).value).to.be('19:02:04'); | |
98 | expect((input).value).to.be('19:02:04'); | |
02d1b455 M |
99 | expect(picker.state.open).to.be.ok(); |
100 | ||
101 | next(); | |
e9060dda | 102 | }], () => { |
02d1b455 M |
103 | done(); |
104 | }); | |
105 | }); | |
106 | ||
e9060dda | 107 | it('minute correctly', (done) => { |
108 | let change; | |
109 | const picker = renderPicker({ | |
110 | onChange(v) { | |
02d1b455 | 111 | change = v; |
e9060dda | 112 | }, |
02d1b455 M |
113 | }); |
114 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 115 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
116 | 'rc-time-picker-input')[0]; | |
e9060dda | 117 | let header; |
118 | async.series([(next) => { | |
02d1b455 M |
119 | expect(picker.state.open).to.be(false); |
120 | ||
121 | Simulate.click(input); | |
122 | setTimeout(next, 100); | |
e9060dda | 123 | }, (next) => { |
02d1b455 | 124 | expect(picker.state.open).to.be(true); |
4984ed85 | 125 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
126 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 127 | expect(header).to.be.ok(); |
4984ed85 | 128 | expect((header).value).to.be('01:02:04'); |
129 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 130 | |
4984ed85 | 131 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
132 | 'rc-time-picker-panel-select')[1]; | |
0e62bf0b | 133 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
134 | Simulate.click(option); |
135 | setTimeout(next, 100); | |
e9060dda | 136 | }, (next) => { |
02d1b455 | 137 | expect(change).to.be.ok(); |
4984ed85 | 138 | expect(change.minute()).to.be(19); |
139 | expect((header).value).to.be('01:19:04'); | |
140 | expect((input).value).to.be('01:19:04'); | |
02d1b455 M |
141 | expect(picker.state.open).to.be.ok(); |
142 | ||
143 | next(); | |
e9060dda | 144 | }], () => { |
02d1b455 M |
145 | done(); |
146 | }); | |
147 | }); | |
148 | ||
e9060dda | 149 | it('second correctly', (done) => { |
150 | let change; | |
151 | const picker = renderPicker({ | |
152 | onChange(v) { | |
02d1b455 | 153 | change = v; |
e9060dda | 154 | }, |
02d1b455 M |
155 | }); |
156 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 157 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
158 | 'rc-time-picker-input')[0]; | |
e9060dda | 159 | let header; |
160 | async.series([(next) => { | |
02d1b455 M |
161 | expect(picker.state.open).to.be(false); |
162 | ||
163 | Simulate.click(input); | |
164 | setTimeout(next, 100); | |
e9060dda | 165 | }, (next) => { |
02d1b455 | 166 | expect(picker.state.open).to.be(true); |
4984ed85 | 167 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
168 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 169 | expect(header).to.be.ok(); |
4984ed85 | 170 | expect((header).value).to.be('01:02:04'); |
171 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 172 | |
4984ed85 | 173 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
174 | 'rc-time-picker-panel-select')[2]; | |
0e62bf0b | 175 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
176 | Simulate.click(option); |
177 | setTimeout(next, 100); | |
e9060dda | 178 | }, (next) => { |
02d1b455 | 179 | expect(change).to.be.ok(); |
4984ed85 | 180 | expect(change.second()).to.be(19); |
181 | expect((header).value).to.be('01:02:19'); | |
182 | expect((input).value).to.be('01:02:19'); | |
02d1b455 M |
183 | expect(picker.state.open).to.be.ok(); |
184 | ||
185 | next(); | |
e9060dda | 186 | }], () => { |
02d1b455 M |
187 | done(); |
188 | }); | |
189 | }); | |
0e62bf0b M |
190 | |
191 | it('disabled correctly', (done) => { | |
192 | let change; | |
193 | const picker = renderPicker({ | |
194 | onChange(v) { | |
195 | change = v; | |
196 | }, | |
71bd9bc1 M |
197 | disabledMinutes(h) { |
198 | return [h]; | |
199 | }, | |
200 | disabledSeconds(h, m) { | |
201 | return [h + m % 60]; | |
202 | }, | |
0e62bf0b M |
203 | }); |
204 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 205 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
206 | 'rc-time-picker-input')[0]; | |
0e62bf0b M |
207 | let header; |
208 | async.series([(next) => { | |
209 | expect(picker.state.open).to.be(false); | |
210 | ||
211 | Simulate.click(input); | |
212 | setTimeout(next, 100); | |
213 | }, (next) => { | |
214 | expect(picker.state.open).to.be(true); | |
4984ed85 | 215 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
216 | 'rc-time-picker-panel-input')[0]; | |
0e62bf0b | 217 | expect(header).to.be.ok(); |
4984ed85 | 218 | expect((header).value).to.be('01:02:04'); |
219 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b | 220 | |
4984ed85 | 221 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
222 | 'rc-time-picker-panel-select')[1]; | |
71bd9bc1 | 223 | const option = selector.getElementsByTagName('li')[1]; |
0e62bf0b M |
224 | Simulate.click(option); |
225 | setTimeout(next, 100); | |
226 | }, (next) => { | |
227 | expect(change).not.to.be.ok(); | |
4984ed85 | 228 | expect((header).value).to.be('01:02:04'); |
229 | expect((input).value).to.be('01:02:04'); | |
71bd9bc1 M |
230 | expect(picker.state.open).to.be.ok(); |
231 | ||
4984ed85 | 232 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
233 | 'rc-time-picker-panel-select')[2]; | |
71bd9bc1 M |
234 | const option = selector.getElementsByTagName('li')[3]; |
235 | Simulate.click(option); | |
236 | setTimeout(next, 100); | |
237 | }, (next) => { | |
238 | expect(change).not.to.be.ok(); | |
4984ed85 | 239 | expect((header).value).to.be('01:02:04'); |
240 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b M |
241 | expect(picker.state.open).to.be.ok(); |
242 | ||
4984ed85 | 243 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
244 | 'rc-time-picker-panel-select')[1]; | |
0e62bf0b M |
245 | const option = selector.getElementsByTagName('li')[7]; |
246 | Simulate.click(option); | |
247 | setTimeout(next, 100); | |
248 | }, (next) => { | |
249 | expect(change).to.be.ok(); | |
4984ed85 | 250 | expect(change.minute()).to.be(7); |
251 | expect((header).value).to.be('01:07:04'); | |
252 | expect((input).value).to.be('01:07:04'); | |
0e62bf0b M |
253 | expect(picker.state.open).to.be.ok(); |
254 | ||
255 | next(); | |
256 | }], () => { | |
257 | done(); | |
258 | }); | |
259 | }); | |
260 | ||
261 | it('hidden correctly', (done) => { | |
262 | let change; | |
263 | const picker = renderPicker({ | |
264 | onChange(v) { | |
265 | change = v; | |
266 | }, | |
71bd9bc1 M |
267 | disabledHours() { |
268 | return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23]; | |
269 | }, | |
270 | hideDisabledOptions: true, | |
0e62bf0b M |
271 | }); |
272 | expect(picker.state.open).not.to.be.ok(); | |
273 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
274 | let header; | |
275 | async.series([(next) => { | |
276 | expect(picker.state.open).to.be(false); | |
277 | ||
278 | Simulate.click(input); | |
279 | setTimeout(next, 100); | |
280 | }, (next) => { | |
281 | expect(picker.state.open).to.be(true); | |
4984ed85 | 282 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
283 | 'rc-time-picker-panel-input')[0]; | |
0e62bf0b | 284 | expect(header).to.be.ok(); |
4984ed85 | 285 | expect((header).value).to.be('01:02:04'); |
286 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b | 287 | |
4984ed85 | 288 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
289 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b M |
290 | const option = selector.getElementsByTagName('li')[3]; |
291 | Simulate.click(option); | |
292 | setTimeout(next, 100); | |
293 | }, (next) => { | |
294 | expect(change).to.be.ok(); | |
4984ed85 | 295 | expect(change.hour()).to.be(6); |
296 | expect((header).value).to.be('06:02:04'); | |
297 | expect((input).value).to.be('06:02:04'); | |
0e62bf0b M |
298 | expect(picker.state.open).to.be.ok(); |
299 | ||
4984ed85 | 300 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
301 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b M |
302 | const option = selector.getElementsByTagName('li')[4]; |
303 | Simulate.click(option); | |
304 | setTimeout(next, 100); | |
305 | }, (next) => { | |
306 | expect(change).to.be.ok(); | |
4984ed85 | 307 | expect(change.hour()).to.be(8); |
308 | expect((header).value).to.be('08:02:04'); | |
309 | expect((input).value).to.be('08:02:04'); | |
0e62bf0b M |
310 | expect(picker.state.open).to.be.ok(); |
311 | ||
312 | next(); | |
313 | }], () => { | |
314 | done(); | |
315 | }); | |
316 | }); | |
02d1b455 M |
317 | }); |
318 | }); |