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({
126 disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
128 expect(picker.state.open).not.to.be.ok();
129 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
131 async.series([(next) => {
132 Simulate.click(input);
133 setTimeout(next, 100);
135 expect(picker.state.open).to.be(true);
136 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
137 expect(header).to.be.ok();
138 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
139 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
141 ReactDOM.findDOMNode(header).value = '12:15:78';
142 Simulate.change(header);
143 setTimeout(next, 100);
145 expect(picker.state.open).to.be(true);
146 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
147 expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78');
148 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
150 ReactDOM.findDOMNode(header).value = '12:10:78';
151 Simulate.change(header);
152 setTimeout(next, 100);
154 expect(picker.state.open).to.be(true);
155 expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18');
156 expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18');
164 it('carry hidden correctly', (done) => {
165 const picker = renderPicker({
166 disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
167 hideDisabledOptions: true
169 expect(picker.state.open).not.to.be.ok();
170 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
172 async.series([(next) => {
173 Simulate.click(input);
174 setTimeout(next, 100);
176 expect(picker.state.open).to.be(true);
177 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
178 expect(header).to.be.ok();
179 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
180 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
182 ReactDOM.findDOMNode(header).value = '12:15:78';
183 Simulate.change(header);
184 setTimeout(next, 100);
186 expect(picker.state.open).to.be(true);
187 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
188 expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78');
189 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
191 ReactDOM.findDOMNode(header).value = '12:10:78';
192 Simulate.change(header);
193 setTimeout(next, 100);
195 expect(picker.state.open).to.be(true);
196 expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18');
197 expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18');
205 it('check correctly', (done) => {
206 const picker = renderPicker();
207 expect(picker.state.open).not.to.be.ok();
208 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
210 async.series([(next) => {
211 Simulate.click(input);
212 setTimeout(next, 100);
214 expect(picker.state.open).to.be(true);
215 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
216 expect(header).to.be.ok();
217 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
218 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
220 ReactDOM.findDOMNode(header).value = '3:34:56';
221 Simulate.change(header);
222 setTimeout(next, 100);
224 expect(picker.state.open).to.be(true);
225 expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56');
226 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
227 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
229 ReactDOM.findDOMNode(header).value = '13:3:56';
230 Simulate.change(header);
231 setTimeout(next, 100);
233 expect(picker.state.open).to.be(true);
234 expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56');
235 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
236 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
238 ReactDOM.findDOMNode(header).value = '13:34:5';
239 Simulate.change(header);
240 setTimeout(next, 100);
242 expect(picker.state.open).to.be(true);
243 expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5');
244 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
245 expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
253 describe('other operations', () => {
254 it('clear correctly', (done) => {
256 const picker = renderPicker({
261 expect(picker.state.open).not.to.be.ok();
262 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
264 async.series([(next) => {
265 expect(picker.state.open).to.be(false);
267 Simulate.click(input);
268 setTimeout(next, 100);
270 expect(picker.state.open).to.be(true);
271 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
272 const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0];
273 expect(header).to.be.ok();
274 expect(clearButton).to.be.ok();
275 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
276 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
278 Simulate.mouseDown(clearButton);
279 setTimeout(next, 100);
281 expect(picker.state.open).to.be(false);
282 expect(change).to.be(null);
283 expect(ReactDOM.findDOMNode(header).value).to.be('');
284 expect(ReactDOM.findDOMNode(input).value).to.be('');
292 it('exit correctly', (done) => {
293 const picker = renderPicker();
294 expect(picker.state.open).not.to.be.ok();
295 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
297 async.series([(next) => {
298 expect(picker.state.open).to.be(false);
300 Simulate.click(input);
301 setTimeout(next, 100);
303 expect(picker.state.open).to.be(true);
304 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
305 expect(header).to.be.ok();
306 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
307 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
309 Simulate.keyDown(ReactDOM.findDOMNode(header), {
310 keyCode: KeyCode.ESC,
312 setTimeout(next, 100);
314 expect(picker.state.open).to.be(false);
315 expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
316 expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');