]>
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'; | |
6 | var Simulate = TestUtils.Simulate; | |
7 | import expect from 'expect.js'; | |
8 | import async from 'async'; | |
9 | import {KeyCode} from 'rc-util'; | |
10 | ||
11 | import DateTimeFormat from 'gregorian-calendar-format'; | |
12 | import GregorianCalendar from 'gregorian-calendar'; | |
13 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | |
14 | import TimePickerLocale from '../src/locale/zh_CN'; | |
15 | ||
16 | describe('Header', function () { | |
17 | var container; | |
18 | ||
19 | function renderPicker(props) { | |
20 | var showSecond = true; | |
21 | var formatter = new DateTimeFormat('HH:mm:ss'); | |
22 | ||
23 | return ReactDOM.render( | |
24 | <TimePicker | |
25 | formatter={formatter} | |
26 | locale={TimePickerLocale} | |
27 | showSecond={showSecond} | |
28 | defaultValue={formatTime('01:02:03', formatter)} | |
29 | {...props} | |
30 | />, container); | |
31 | } | |
32 | ||
33 | function formatTime(time, formatter) { | |
34 | return formatter.parse(time, { | |
35 | locale: zhCn, | |
36 | obeyCount: true, | |
37 | }); | |
38 | } | |
39 | ||
40 | beforeEach(function () { | |
41 | container = document.createElement('div'); | |
42 | document.body.appendChild(container); | |
43 | }); | |
44 | ||
45 | afterEach(function () { | |
46 | ReactDOM.unmountComponentAtNode(container); | |
47 | document.body.removeChild(container); | |
48 | }); | |
49 | ||
50 | describe('input to change value', function () { | |
51 | it('input correctly', function (done) { | |
52 | var picker = renderPicker(); | |
53 | expect(picker.state.open).not.to.be.ok(); | |
54 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
55 | var header; | |
56 | async.series([function (next) { | |
57 | Simulate.click(input); | |
58 | setTimeout(next, 100); | |
59 | }, function (next) { | |
60 | expect(picker.state.open).to.be(true); | |
61 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
62 | expect(header).to.be.ok(); | |
63 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
64 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
65 | ||
66 | ReactDOM.findDOMNode(header).value = '12:34:56'; | |
67 | Simulate.change(header); | |
68 | setTimeout(next, 100); | |
69 | }, function (next) { | |
70 | expect(picker.state.open).to.be(true); | |
71 | expect(ReactDOM.findDOMNode(header).value).to.be('12:34:56'); | |
72 | expect(ReactDOM.findDOMNode(input).value).to.be('12:34:56'); | |
73 | ||
74 | next(); | |
75 | }], function () { | |
76 | done(); | |
77 | }); | |
78 | }); | |
79 | ||
80 | it('carry correctly', function (done) { | |
81 | var picker = renderPicker(); | |
82 | expect(picker.state.open).not.to.be.ok(); | |
83 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
84 | var header; | |
85 | async.series([function (next) { | |
86 | Simulate.click(input); | |
87 | setTimeout(next, 100); | |
88 | }, function (next) { | |
89 | expect(picker.state.open).to.be(true); | |
90 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
91 | expect(header).to.be.ok(); | |
92 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
93 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
94 | ||
95 | ReactDOM.findDOMNode(header).value = '33:44:55'; | |
96 | Simulate.change(header); | |
97 | setTimeout(next, 100); | |
98 | }, function (next) { | |
99 | expect(picker.state.open).to.be(true); | |
100 | expect(ReactDOM.findDOMNode(header).value).to.be('09:44:55'); | |
101 | expect(ReactDOM.findDOMNode(input).value).to.be('09:44:55'); | |
102 | ||
103 | ReactDOM.findDOMNode(header).value = '10:90:30'; | |
104 | Simulate.change(header); | |
105 | setTimeout(next, 100); | |
106 | }, function (next) { | |
107 | expect(picker.state.open).to.be(true); | |
108 | expect(ReactDOM.findDOMNode(header).value).to.be('11:30:30'); | |
109 | expect(ReactDOM.findDOMNode(input).value).to.be('11:30:30'); | |
110 | ||
111 | ReactDOM.findDOMNode(header).value = '34:56:78'; | |
112 | Simulate.change(header); | |
113 | setTimeout(next, 100); | |
114 | }, function (next) { | |
115 | expect(picker.state.open).to.be(true); | |
116 | expect(ReactDOM.findDOMNode(header).value).to.be('10:57:18'); | |
117 | expect(ReactDOM.findDOMNode(input).value).to.be('10:57:18'); | |
118 | ||
119 | next(); | |
120 | }], function () { | |
121 | done(); | |
122 | }); | |
123 | }); | |
124 | ||
125 | it('check correctly', function (done) { | |
126 | var picker = renderPicker(); | |
127 | expect(picker.state.open).not.to.be.ok(); | |
128 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
129 | var header; | |
130 | async.series([function (next) { | |
131 | Simulate.click(input); | |
132 | setTimeout(next, 100); | |
133 | }, function (next) { | |
134 | expect(picker.state.open).to.be(true); | |
135 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
136 | expect(header).to.be.ok(); | |
137 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
138 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
139 | ||
140 | ReactDOM.findDOMNode(header).value = '3:34:56'; | |
141 | Simulate.change(header); | |
142 | setTimeout(next, 100); | |
143 | }, function (next) { | |
144 | expect(picker.state.open).to.be(true); | |
145 | expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56'); | |
146 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
147 | expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); | |
148 | ||
149 | ReactDOM.findDOMNode(header).value = '13:3:56'; | |
150 | Simulate.change(header); | |
151 | setTimeout(next, 100); | |
152 | }, function (next) { | |
153 | expect(picker.state.open).to.be(true); | |
154 | expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56'); | |
155 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
156 | expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); | |
157 | ||
158 | ReactDOM.findDOMNode(header).value = '13:34:5'; | |
159 | Simulate.change(header); | |
160 | setTimeout(next, 100); | |
161 | }, function (next) { | |
162 | expect(picker.state.open).to.be(true); | |
163 | expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5'); | |
164 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
165 | expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); | |
166 | next(); | |
167 | }], function () { | |
168 | done(); | |
169 | }); | |
170 | }); | |
171 | ||
172 | }); | |
173 | ||
174 | describe('other operations', function () { | |
175 | it('clear correctly', function (done) { | |
176 | var change; | |
177 | var picker = renderPicker({ | |
178 | onChange: function (v) { | |
179 | change = v; | |
180 | } | |
181 | }); | |
182 | expect(picker.state.open).not.to.be.ok(); | |
183 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
184 | var header; | |
185 | async.series([function (next) { | |
186 | expect(picker.state.open).to.be(false); | |
187 | ||
188 | Simulate.click(input); | |
189 | setTimeout(next, 100); | |
190 | }, function (next) { | |
191 | expect(picker.state.open).to.be(true); | |
192 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
193 | var clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0]; | |
194 | expect(header).to.be.ok(); | |
195 | expect(clearButton).to.be.ok(); | |
196 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
197 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
198 | ||
199 | Simulate.mouseDown(clearButton); | |
200 | setTimeout(next, 100); | |
201 | }, function (next) { | |
202 | expect(picker.state.open).to.be(false); | |
203 | expect(change).to.be(null); | |
204 | expect(ReactDOM.findDOMNode(header).value).to.be(''); | |
205 | expect(ReactDOM.findDOMNode(input).value).to.be(''); | |
206 | ||
207 | next(); | |
208 | }], function () { | |
209 | done(); | |
210 | }); | |
211 | }); | |
212 | ||
213 | it('exit correctly', function (done) { | |
214 | var picker = renderPicker(); | |
215 | expect(picker.state.open).not.to.be.ok(); | |
216 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
217 | var header; | |
218 | async.series([function (next) { | |
219 | expect(picker.state.open).to.be(false); | |
220 | ||
221 | Simulate.click(input); | |
222 | setTimeout(next, 100); | |
223 | }, function (next) { | |
224 | expect(picker.state.open).to.be(true); | |
225 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
226 | expect(header).to.be.ok(); | |
227 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
228 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
229 | ||
230 | Simulate.keyDown(ReactDOM.findDOMNode(header), { | |
231 | keyCode: KeyCode.ESC | |
232 | }); | |
233 | setTimeout(next, 100); | |
234 | }, function (next) { | |
235 | expect(picker.state.open).to.be(false); | |
236 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
237 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
238 | ||
239 | next(); | |
240 | }], function () { | |
241 | done(); | |
242 | }); | |
243 | }); | |
244 | ||
245 | }); | |
246 | }); |