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