]>
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('Select', 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('select number', function () { | |
51 | ||
52 | it('select number correctly', function (done) { | |
53 | var picker = renderPicker(); | |
54 | expect(picker.state.open).not.to.be.ok(); | |
55 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
56 | var selector; | |
57 | async.series([function (next) { | |
58 | expect(picker.state.open).to.be(false); | |
59 | ||
60 | Simulate.click(input); | |
61 | setTimeout(next, 100); | |
62 | }, function (next) { | |
63 | expect(picker.state.open).to.be(true); | |
64 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select'); | |
65 | ||
66 | setTimeout(next, 100); | |
67 | }, function (next) { | |
68 | expect(selector.length).to.be(3); | |
69 | ||
70 | next(); | |
71 | }], function () { | |
72 | done(); | |
73 | }); | |
74 | }); | |
75 | ||
76 | }); | |
77 | ||
78 | describe('select to change value', function () { | |
79 | ||
80 | it('hour correctly', function (done) { | |
81 | var change; | |
82 | var picker = renderPicker({ | |
83 | onChange: function (v) { | |
84 | change = v; | |
85 | } | |
86 | }); | |
87 | expect(picker.state.open).not.to.be.ok(); | |
88 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
89 | var header; | |
90 | async.series([function (next) { | |
91 | expect(picker.state.open).to.be(false); | |
92 | ||
93 | Simulate.click(input); | |
94 | setTimeout(next, 100); | |
95 | }, function (next) { | |
96 | expect(picker.state.open).to.be(true); | |
97 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
98 | var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; | |
99 | var option = selector.getElementsByTagName('li')[19]; | |
100 | expect(header).to.be.ok(); | |
101 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
102 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
103 | ||
104 | Simulate.click(option); | |
105 | setTimeout(next, 100); | |
106 | }, function (next) { | |
107 | expect(change).to.be.ok(); | |
108 | expect(change.getHourOfDay()).to.be(19); | |
109 | expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03'); | |
110 | expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03'); | |
111 | expect(picker.state.open).to.be.ok(); | |
112 | ||
113 | next(); | |
114 | }], function () { | |
115 | done(); | |
116 | }); | |
117 | }); | |
118 | ||
119 | it('minute correctly', function (done) { | |
120 | var change; | |
121 | var picker = renderPicker({ | |
122 | onChange: function (v) { | |
123 | change = v; | |
124 | } | |
125 | }); | |
126 | expect(picker.state.open).not.to.be.ok(); | |
127 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
128 | var header; | |
129 | async.series([function (next) { | |
130 | expect(picker.state.open).to.be(false); | |
131 | ||
132 | Simulate.click(input); | |
133 | setTimeout(next, 100); | |
134 | }, function (next) { | |
135 | expect(picker.state.open).to.be(true); | |
136 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
137 | var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; | |
138 | var option = selector.getElementsByTagName('li')[19]; | |
139 | expect(header).to.be.ok(); | |
140 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
141 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
142 | ||
143 | Simulate.click(option); | |
144 | setTimeout(next, 100); | |
145 | }, function (next) { | |
146 | expect(change).to.be.ok(); | |
147 | expect(change.getMinutes()).to.be(19); | |
148 | expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03'); | |
149 | expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03'); | |
150 | expect(picker.state.open).to.be.ok(); | |
151 | ||
152 | next(); | |
153 | }], function () { | |
154 | done(); | |
155 | }); | |
156 | }); | |
157 | ||
158 | it('second correctly', function (done) { | |
159 | var change; | |
160 | var picker = renderPicker({ | |
161 | onChange: function (v) { | |
162 | change = v; | |
163 | } | |
164 | }); | |
165 | expect(picker.state.open).not.to.be.ok(); | |
166 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
167 | var header; | |
168 | async.series([function (next) { | |
169 | expect(picker.state.open).to.be(false); | |
170 | ||
171 | Simulate.click(input); | |
172 | setTimeout(next, 100); | |
173 | }, function (next) { | |
174 | expect(picker.state.open).to.be(true); | |
175 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
176 | var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; | |
177 | var option = selector.getElementsByTagName('li')[19]; | |
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'); | |
181 | ||
182 | Simulate.click(option); | |
183 | setTimeout(next, 100); | |
184 | }, function (next) { | |
185 | expect(change).to.be.ok(); | |
186 | expect(change.getSeconds()).to.be(19); | |
187 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19'); | |
188 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19'); | |
189 | expect(picker.state.open).to.be.ok(); | |
190 | ||
191 | next(); | |
192 | }], function () { | |
193 | done(); | |
194 | }); | |
195 | }); | |
196 | ||
197 | }); | |
198 | }); |