1 import ReactDOM from 'react-dom';
2 import React from 'react';
3 import TimePicker from '../src/TimePicker';
5 import TestUtils from 'react-addons-test-utils';
6 const Simulate = TestUtils.Simulate;
7 import expect from 'expect.js';
8 import async from 'async';
9 import {KeyCode} from 'rc-util';
11 import DateTimeFormat from 'gregorian-calendar-format';
12 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
13 import TimePickerLocale from '../src/locale/zh_CN';
15 function formatTime(time, formatter) {
16 return formatter.parse(time, {
22 describe('Header', () => {
25 function renderPicker(props) {
26 const showSecond = true;
27 const formatter = new DateTimeFormat('HH:mm:ss');
29 return ReactDOM.render(
32 locale={TimePickerLocale}
33 showSecond={showSecond}
34 defaultValue={formatTime('01:02:03', formatter)}
40 container = document.createElement('div');
41 document.body.appendChild(container);
45 ReactDOM.unmountComponentAtNode(container);
46 document.body.removeChild(container);
49 describe('input to change value', () => {
50 it('input correctly', (done) => {
51 const picker = renderPicker();
52 expect(picker.state.open).not.to.be.ok();
53 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
55 async.series([(next) => {
56 Simulate.click(input);
57 setTimeout(next, 100);
59 expect(picker.state.open).to.be(true);
60 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
61 expect(header).to.be.ok();
62 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
63 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
65 ReactDOM.findDOMNode(header).value = '12:34:56';
66 Simulate.change(header);
67 setTimeout(next, 100);
69 expect(picker.state.open).to.be(true);
70 expect(ReactDOM.findDOMNode(header).value).to.be('12:34:56');
71 expect(ReactDOM.findDOMNode(input).value).to.be('12:34:56');
79 it('carry correctly', (done) => {
80 const picker = renderPicker();
81 expect(picker.state.open).not.to.be.ok();
82 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
84 async.series([(next) => {
85 Simulate.click(input);
86 setTimeout(next, 100);
88 expect(picker.state.open).to.be(true);
89 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
90 expect(header).to.be.ok();
91 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
92 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
94 ReactDOM.findDOMNode(header).value = '33:44:55';
95 Simulate.change(header);
96 setTimeout(next, 100);
98 expect(picker.state.open).to.be(true);
99 expect(ReactDOM.findDOMNode(header).value).to.be('09:44:55');
100 expect(ReactDOM.findDOMNode(input).value).to.be('09:44:55');
102 ReactDOM.findDOMNode(header).value = '10:90:30';
103 Simulate.change(header);
104 setTimeout(next, 100);
106 expect(picker.state.open).to.be(true);
107 expect(ReactDOM.findDOMNode(header).value).to.be('11:30:30');
108 expect(ReactDOM.findDOMNode(input).value).to.be('11:30:30');
110 ReactDOM.findDOMNode(header).value = '34:56:78';
111 Simulate.change(header);
112 setTimeout(next, 100);
114 expect(picker.state.open).to.be(true);
115 expect(ReactDOM.findDOMNode(header).value).to.be('10:57:18');
116 expect(ReactDOM.findDOMNode(input).value).to.be('10:57:18');
124 it('carry disabled correctly', (done) => {
125 const picker = renderPicker({
129 disabledSeconds(h, m) {
133 expect(picker.state.open).not.to.be.ok();
134 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
136 async.series([(next) => {
137 Simulate.click(input);
138 setTimeout(next, 100);
140 expect(picker.state.open).to.be(true);
141 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
142 expect(header).to.be.ok();
143 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
144 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
146 ReactDOM.findDOMNode(header).value = '10:09:78';
147 Simulate.change(header);
148 setTimeout(next, 100);
150 expect(picker.state.open).to.be(true);
151 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
152 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
153 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
155 ReactDOM.findDOMNode(header).value = '10:10:78';
156 Simulate.change(header);
157 setTimeout(next, 100);
159 expect(picker.state.open).to.be(true);
160 expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
161 expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
163 ReactDOM.findDOMNode(header).value = '10:09:19';
164 Simulate.change(header);
165 setTimeout(next, 100);
167 expect(picker.state.open).to.be(true);
168 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
169 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
170 expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
172 ReactDOM.findDOMNode(header).value = '10:09:20';
173 Simulate.change(header);
174 setTimeout(next, 100);
176 expect(picker.state.open).to.be(true);
177 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
178 expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
186 it('carry hidden correctly', (done) => {
187 const picker = renderPicker({
191 disabledSeconds(h, m) {
194 hideDisabledOptions: true,
196 expect(picker.state.open).not.to.be.ok();
197 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
199 async.series([(next) => {
200 Simulate.click(input);
201 setTimeout(next, 100);
203 expect(picker.state.open).to.be(true);
204 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
205 expect(header).to.be.ok();
206 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
207 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
209 ReactDOM.findDOMNode(header).value = '10:09:78';
210 Simulate.change(header);
211 setTimeout(next, 100);
213 expect(picker.state.open).to.be(true);
214 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
215 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
216 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
218 ReactDOM.findDOMNode(header).value = '10:10:78';
219 Simulate.change(header);
220 setTimeout(next, 100);
222 expect(picker.state.open).to.be(true);
223 expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
224 expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
226 ReactDOM.findDOMNode(header).value = '10:09:19';
227 Simulate.change(header);
228 setTimeout(next, 100);
230 expect(picker.state.open).to.be(true);
231 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
232 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
233 expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
235 ReactDOM.findDOMNode(header).value = '10:09:20';
236 Simulate.change(header);
237 setTimeout(next, 100);
239 expect(picker.state.open).to.be(true);
240 expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
241 expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
249 it('check correctly', (done) => {
250 const picker = renderPicker();
251 expect(picker.state.open).not.to.be.ok();
252 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
254 async.series([(next) => {
255 Simulate.click(input);
256 setTimeout(next, 100);
258 expect(picker.state.open).to.be(true);
259 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
260 expect(header).to.be.ok();
261 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
262 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
264 ReactDOM.findDOMNode(header).value = '3:34:56';
265 Simulate.change(header);
266 setTimeout(next, 100);
268 expect(picker.state.open).to.be(true);
269 expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56');
270 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
271 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
273 ReactDOM.findDOMNode(header).value = '13:3:56';
274 Simulate.change(header);
275 setTimeout(next, 100);
277 expect(picker.state.open).to.be(true);
278 expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56');
279 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
280 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
282 ReactDOM.findDOMNode(header).value = '13:34:5';
283 Simulate.change(header);
284 setTimeout(next, 100);
286 expect(picker.state.open).to.be(true);
287 expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5');
288 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
289 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
297 describe('other operations', () => {
298 it('clear correctly', (done) => {
300 const picker = renderPicker({
305 expect(picker.state.open).not.to.be.ok();
306 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
308 async.series([(next) => {
309 expect(picker.state.open).to.be(false);
311 Simulate.click(input);
312 setTimeout(next, 100);
314 expect(picker.state.open).to.be(true);
315 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
316 const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0];
317 expect(header).to.be.ok();
318 expect(clearButton).to.be.ok();
319 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
320 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
322 Simulate.mouseDown(clearButton);
323 setTimeout(next, 100);
325 expect(picker.state.open).to.be(false);
326 expect(change).to.be(null);
327 expect(ReactDOM.findDOMNode(header).value).to.be('');
328 expect(ReactDOM.findDOMNode(input).value).to.be('');
336 it('exit correctly', (done) => {
337 const picker = renderPicker();
338 expect(picker.state.open).not.to.be.ok();
339 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
341 async.series([(next) => {
342 expect(picker.state.open).to.be(false);
344 Simulate.click(input);
345 setTimeout(next, 100);
347 expect(picker.state.open).to.be(true);
348 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
349 expect(header).to.be.ok();
350 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
351 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
353 Simulate.keyDown(ReactDOM.findDOMNode(header), {
354 keyCode: KeyCode.ESC,
356 setTimeout(next, 100);
358 expect(picker.state.open).to.be(false);
359 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
360 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');