]> git.immae.eu Git - github/fretlink/time-picker.git/blame - tests/Select.spec.jsx
update disabled options
[github/fretlink/time-picker.git] / tests / Select.spec.jsx
CommitLineData
02d1b455
M
1import ReactDOM from 'react-dom';
2import React from 'react';
3import TimePicker from '../src/TimePicker';
4
5import TestUtils from 'react-addons-test-utils';
e9060dda 6const Simulate = TestUtils.Simulate;
02d1b455
M
7import expect from 'expect.js';
8import async from 'async';
02d1b455 9import DateTimeFormat from 'gregorian-calendar-format';
02d1b455
M
10import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
11import TimePickerLocale from '../src/locale/zh_CN';
12
e9060dda 13function formatTime(time, formatter) {
14 return formatter.parse(time, {
15 locale: zhCn,
16 obeyCount: true,
17 });
18}
19
20describe('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});