diff options
Diffstat (limited to 'tests/Select.spec.jsx')
-rw-r--r-- | tests/Select.spec.jsx | 140 |
1 files changed, 74 insertions, 66 deletions
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx index f7717c7..e6d32dd 100644 --- a/tests/Select.spec.jsx +++ b/tests/Select.spec.jsx | |||
@@ -1,35 +1,24 @@ | |||
1 | import ReactDOM from 'react-dom'; | 1 | import ReactDOM from 'react-dom'; |
2 | import React from 'react'; | 2 | import React from 'react'; |
3 | import TimePicker from '../src/TimePicker'; | 3 | import TimePicker from '../src/TimePicker'; |
4 | |||
5 | import TestUtils from 'react-addons-test-utils'; | 4 | import TestUtils from 'react-addons-test-utils'; |
6 | const Simulate = TestUtils.Simulate; | 5 | const Simulate = TestUtils.Simulate; |
7 | import expect from 'expect.js'; | 6 | import expect from 'expect.js'; |
8 | import async from 'async'; | 7 | import async from 'async'; |
9 | import DateTimeFormat from 'gregorian-calendar-format'; | 8 | import moment from 'moment'; |
10 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
11 | import TimePickerLocale from '../src/locale/zh_CN'; | ||
12 | |||
13 | function formatTime(time, formatter) { | ||
14 | return formatter.parse(time, { | ||
15 | locale: zhCn, | ||
16 | obeyCount: true, | ||
17 | }); | ||
18 | } | ||
19 | 9 | ||
20 | describe('Select', () => { | 10 | describe('Select', () => { |
21 | let container; | 11 | let container; |
22 | 12 | ||
23 | function renderPicker(props) { | 13 | function renderPicker(props) { |
24 | const showSecond = true; | 14 | const showSecond = true; |
25 | const formatter = new DateTimeFormat('HH:mm:ss'); | 15 | const format = 'HH:mm:ss'; |
26 | 16 | ||
27 | return ReactDOM.render( | 17 | return ReactDOM.render( |
28 | <TimePicker | 18 | <TimePicker |
29 | formatter={formatter} | 19 | format={format} |
30 | locale={TimePickerLocale} | ||
31 | showSecond={showSecond} | 20 | showSecond={showSecond} |
32 | defaultValue={formatTime('01:02:04', formatter)} | 21 | defaultValue={moment('01:02:04', format)} |
33 | {...props} | 22 | {...props} |
34 | />, container); | 23 | />, container); |
35 | } | 24 | } |
@@ -48,7 +37,8 @@ describe('Select', () => { | |||
48 | it('select number correctly', (done) => { | 37 | it('select number correctly', (done) => { |
49 | const picker = renderPicker(); | 38 | const picker = renderPicker(); |
50 | expect(picker.state.open).not.to.be.ok(); | 39 | expect(picker.state.open).not.to.be.ok(); |
51 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | 40 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
41 | 'rc-time-picker-input')[0]; | ||
52 | let selector; | 42 | let selector; |
53 | async.series([(next) => { | 43 | async.series([(next) => { |
54 | expect(picker.state.open).to.be(false); | 44 | expect(picker.state.open).to.be(false); |
@@ -57,7 +47,8 @@ describe('Select', () => { | |||
57 | setTimeout(next, 100); | 47 | setTimeout(next, 100); |
58 | }, (next) => { | 48 | }, (next) => { |
59 | expect(picker.state.open).to.be(true); | 49 | expect(picker.state.open).to.be(true); |
60 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select'); | 50 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
51 | 'rc-time-picker-panel-select'); | ||
61 | 52 | ||
62 | setTimeout(next, 100); | 53 | setTimeout(next, 100); |
63 | }, (next) => { | 54 | }, (next) => { |
@@ -79,7 +70,8 @@ describe('Select', () => { | |||
79 | }, | 70 | }, |
80 | }); | 71 | }); |
81 | expect(picker.state.open).not.to.be.ok(); | 72 | expect(picker.state.open).not.to.be.ok(); |
82 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | 73 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
74 | 'rc-time-picker-input')[0]; | ||
83 | let header; | 75 | let header; |
84 | async.series([(next) => { | 76 | async.series([(next) => { |
85 | expect(picker.state.open).to.be(false); | 77 | expect(picker.state.open).to.be(false); |
@@ -88,20 +80,22 @@ describe('Select', () => { | |||
88 | setTimeout(next, 100); | 80 | setTimeout(next, 100); |
89 | }, (next) => { | 81 | }, (next) => { |
90 | expect(picker.state.open).to.be(true); | 82 | expect(picker.state.open).to.be(true); |
91 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | 83 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
84 | 'rc-time-picker-panel-input')[0]; | ||
92 | expect(header).to.be.ok(); | 85 | expect(header).to.be.ok(); |
93 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 86 | expect((header).value).to.be('01:02:04'); |
94 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 87 | expect((input).value).to.be('01:02:04'); |
95 | 88 | ||
96 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; | 89 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
90 | 'rc-time-picker-panel-select')[0]; | ||
97 | const option = selector.getElementsByTagName('li')[19]; | 91 | const option = selector.getElementsByTagName('li')[19]; |
98 | Simulate.click(option); | 92 | Simulate.click(option); |
99 | setTimeout(next, 100); | 93 | setTimeout(next, 100); |
100 | }, (next) => { | 94 | }, (next) => { |
101 | expect(change).to.be.ok(); | 95 | expect(change).to.be.ok(); |
102 | expect(change.getHourOfDay()).to.be(19); | 96 | expect(change.hour()).to.be(19); |
103 | expect(ReactDOM.findDOMNode(header).value).to.be('19:02:04'); | 97 | expect((header).value).to.be('19:02:04'); |
104 | expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04'); | 98 | expect((input).value).to.be('19:02:04'); |
105 | expect(picker.state.open).to.be.ok(); | 99 | expect(picker.state.open).to.be.ok(); |
106 | 100 | ||
107 | next(); | 101 | next(); |
@@ -118,7 +112,8 @@ describe('Select', () => { | |||
118 | }, | 112 | }, |
119 | }); | 113 | }); |
120 | expect(picker.state.open).not.to.be.ok(); | 114 | expect(picker.state.open).not.to.be.ok(); |
121 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | 115 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
116 | 'rc-time-picker-input')[0]; | ||
122 | let header; | 117 | let header; |
123 | async.series([(next) => { | 118 | async.series([(next) => { |
124 | expect(picker.state.open).to.be(false); | 119 | expect(picker.state.open).to.be(false); |
@@ -127,20 +122,22 @@ describe('Select', () => { | |||
127 | setTimeout(next, 100); | 122 | setTimeout(next, 100); |
128 | }, (next) => { | 123 | }, (next) => { |
129 | expect(picker.state.open).to.be(true); | 124 | expect(picker.state.open).to.be(true); |
130 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | 125 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
126 | 'rc-time-picker-panel-input')[0]; | ||
131 | expect(header).to.be.ok(); | 127 | expect(header).to.be.ok(); |
132 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 128 | expect((header).value).to.be('01:02:04'); |
133 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 129 | expect((input).value).to.be('01:02:04'); |
134 | 130 | ||
135 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; | 131 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
132 | 'rc-time-picker-panel-select')[1]; | ||
136 | const option = selector.getElementsByTagName('li')[19]; | 133 | const option = selector.getElementsByTagName('li')[19]; |
137 | Simulate.click(option); | 134 | Simulate.click(option); |
138 | setTimeout(next, 100); | 135 | setTimeout(next, 100); |
139 | }, (next) => { | 136 | }, (next) => { |
140 | expect(change).to.be.ok(); | 137 | expect(change).to.be.ok(); |
141 | expect(change.getMinutes()).to.be(19); | 138 | expect(change.minute()).to.be(19); |
142 | expect(ReactDOM.findDOMNode(header).value).to.be('01:19:04'); | 139 | expect((header).value).to.be('01:19:04'); |
143 | expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04'); | 140 | expect((input).value).to.be('01:19:04'); |
144 | expect(picker.state.open).to.be.ok(); | 141 | expect(picker.state.open).to.be.ok(); |
145 | 142 | ||
146 | next(); | 143 | next(); |
@@ -157,7 +154,8 @@ describe('Select', () => { | |||
157 | }, | 154 | }, |
158 | }); | 155 | }); |
159 | expect(picker.state.open).not.to.be.ok(); | 156 | expect(picker.state.open).not.to.be.ok(); |
160 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | 157 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
158 | 'rc-time-picker-input')[0]; | ||
161 | let header; | 159 | let header; |
162 | async.series([(next) => { | 160 | async.series([(next) => { |
163 | expect(picker.state.open).to.be(false); | 161 | expect(picker.state.open).to.be(false); |
@@ -166,20 +164,22 @@ describe('Select', () => { | |||
166 | setTimeout(next, 100); | 164 | setTimeout(next, 100); |
167 | }, (next) => { | 165 | }, (next) => { |
168 | expect(picker.state.open).to.be(true); | 166 | expect(picker.state.open).to.be(true); |
169 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | 167 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
168 | 'rc-time-picker-panel-input')[0]; | ||
170 | expect(header).to.be.ok(); | 169 | expect(header).to.be.ok(); |
171 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 170 | expect((header).value).to.be('01:02:04'); |
172 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 171 | expect((input).value).to.be('01:02:04'); |
173 | 172 | ||
174 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; | 173 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
174 | 'rc-time-picker-panel-select')[2]; | ||
175 | const option = selector.getElementsByTagName('li')[19]; | 175 | const option = selector.getElementsByTagName('li')[19]; |
176 | Simulate.click(option); | 176 | Simulate.click(option); |
177 | setTimeout(next, 100); | 177 | setTimeout(next, 100); |
178 | }, (next) => { | 178 | }, (next) => { |
179 | expect(change).to.be.ok(); | 179 | expect(change).to.be.ok(); |
180 | expect(change.getSeconds()).to.be(19); | 180 | expect(change.second()).to.be(19); |
181 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19'); | 181 | expect((header).value).to.be('01:02:19'); |
182 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19'); | 182 | expect((input).value).to.be('01:02:19'); |
183 | expect(picker.state.open).to.be.ok(); | 183 | expect(picker.state.open).to.be.ok(); |
184 | 184 | ||
185 | next(); | 185 | next(); |
@@ -202,7 +202,8 @@ describe('Select', () => { | |||
202 | }, | 202 | }, |
203 | }); | 203 | }); |
204 | expect(picker.state.open).not.to.be.ok(); | 204 | expect(picker.state.open).not.to.be.ok(); |
205 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | 205 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
206 | 'rc-time-picker-input')[0]; | ||
206 | let header; | 207 | let header; |
207 | async.series([(next) => { | 208 | async.series([(next) => { |
208 | expect(picker.state.open).to.be(false); | 209 | expect(picker.state.open).to.be(false); |
@@ -211,40 +212,44 @@ describe('Select', () => { | |||
211 | setTimeout(next, 100); | 212 | setTimeout(next, 100); |
212 | }, (next) => { | 213 | }, (next) => { |
213 | expect(picker.state.open).to.be(true); | 214 | expect(picker.state.open).to.be(true); |
214 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | 215 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
216 | 'rc-time-picker-panel-input')[0]; | ||
215 | expect(header).to.be.ok(); | 217 | expect(header).to.be.ok(); |
216 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 218 | expect((header).value).to.be('01:02:04'); |
217 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 219 | expect((input).value).to.be('01:02:04'); |
218 | 220 | ||
219 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; | 221 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
222 | 'rc-time-picker-panel-select')[1]; | ||
220 | const option = selector.getElementsByTagName('li')[1]; | 223 | const option = selector.getElementsByTagName('li')[1]; |
221 | Simulate.click(option); | 224 | Simulate.click(option); |
222 | setTimeout(next, 100); | 225 | setTimeout(next, 100); |
223 | }, (next) => { | 226 | }, (next) => { |
224 | expect(change).not.to.be.ok(); | 227 | expect(change).not.to.be.ok(); |
225 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 228 | expect((header).value).to.be('01:02:04'); |
226 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 229 | expect((input).value).to.be('01:02:04'); |
227 | expect(picker.state.open).to.be.ok(); | 230 | expect(picker.state.open).to.be.ok(); |
228 | 231 | ||
229 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; | 232 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
233 | 'rc-time-picker-panel-select')[2]; | ||
230 | const option = selector.getElementsByTagName('li')[3]; | 234 | const option = selector.getElementsByTagName('li')[3]; |
231 | Simulate.click(option); | 235 | Simulate.click(option); |
232 | setTimeout(next, 100); | 236 | setTimeout(next, 100); |
233 | }, (next) => { | 237 | }, (next) => { |
234 | expect(change).not.to.be.ok(); | 238 | expect(change).not.to.be.ok(); |
235 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 239 | expect((header).value).to.be('01:02:04'); |
236 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 240 | expect((input).value).to.be('01:02:04'); |
237 | expect(picker.state.open).to.be.ok(); | 241 | expect(picker.state.open).to.be.ok(); |
238 | 242 | ||
239 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; | 243 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
244 | 'rc-time-picker-panel-select')[1]; | ||
240 | const option = selector.getElementsByTagName('li')[7]; | 245 | const option = selector.getElementsByTagName('li')[7]; |
241 | Simulate.click(option); | 246 | Simulate.click(option); |
242 | setTimeout(next, 100); | 247 | setTimeout(next, 100); |
243 | }, (next) => { | 248 | }, (next) => { |
244 | expect(change).to.be.ok(); | 249 | expect(change).to.be.ok(); |
245 | expect(change.getMinutes()).to.be(7); | 250 | expect(change.minute()).to.be(7); |
246 | expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04'); | 251 | expect((header).value).to.be('01:07:04'); |
247 | expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04'); | 252 | expect((input).value).to.be('01:07:04'); |
248 | expect(picker.state.open).to.be.ok(); | 253 | expect(picker.state.open).to.be.ok(); |
249 | 254 | ||
250 | next(); | 255 | next(); |
@@ -274,31 +279,34 @@ describe('Select', () => { | |||
274 | setTimeout(next, 100); | 279 | setTimeout(next, 100); |
275 | }, (next) => { | 280 | }, (next) => { |
276 | expect(picker.state.open).to.be(true); | 281 | expect(picker.state.open).to.be(true); |
277 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | 282 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
283 | 'rc-time-picker-panel-input')[0]; | ||
278 | expect(header).to.be.ok(); | 284 | expect(header).to.be.ok(); |
279 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04'); | 285 | expect((header).value).to.be('01:02:04'); |
280 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04'); | 286 | expect((input).value).to.be('01:02:04'); |
281 | 287 | ||
282 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; | 288 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
289 | 'rc-time-picker-panel-select')[0]; | ||
283 | const option = selector.getElementsByTagName('li')[3]; | 290 | const option = selector.getElementsByTagName('li')[3]; |
284 | Simulate.click(option); | 291 | Simulate.click(option); |
285 | setTimeout(next, 100); | 292 | setTimeout(next, 100); |
286 | }, (next) => { | 293 | }, (next) => { |
287 | expect(change).to.be.ok(); | 294 | expect(change).to.be.ok(); |
288 | expect(change.getHourOfDay()).to.be(6); | 295 | expect(change.hour()).to.be(6); |
289 | expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04'); | 296 | expect((header).value).to.be('06:02:04'); |
290 | expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04'); | 297 | expect((input).value).to.be('06:02:04'); |
291 | expect(picker.state.open).to.be.ok(); | 298 | expect(picker.state.open).to.be.ok(); |
292 | 299 | ||
293 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; | 300 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
301 | 'rc-time-picker-panel-select')[0]; | ||
294 | const option = selector.getElementsByTagName('li')[4]; | 302 | const option = selector.getElementsByTagName('li')[4]; |
295 | Simulate.click(option); | 303 | Simulate.click(option); |
296 | setTimeout(next, 100); | 304 | setTimeout(next, 100); |
297 | }, (next) => { | 305 | }, (next) => { |
298 | expect(change).to.be.ok(); | 306 | expect(change).to.be.ok(); |
299 | expect(change.getHourOfDay()).to.be(8); | 307 | expect(change.hour()).to.be(8); |
300 | expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04'); | 308 | expect((header).value).to.be('08:02:04'); |
301 | expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04'); | 309 | expect((input).value).to.be('08:02:04'); |
302 | expect(picker.state.open).to.be.ok(); | 310 | expect(picker.state.open).to.be.ok(); |
303 | 311 | ||
304 | next(); | 312 | next(); |