]>
Commit | Line | Data |
---|---|---|
1 | import ReactDOM from 'react-dom'; | |
2 | import React from 'react'; | |
3 | import TimePicker from '../src/TimePicker'; | |
4 | ||
5 | import TestUtils from 'react-dom/test-utils'; | |
6 | const Simulate = TestUtils.Simulate; | |
7 | import expect from 'expect.js'; | |
8 | import async from 'async'; | |
9 | import moment from 'moment'; | |
10 | ||
11 | describe('TimePicker', () => { | |
12 | let container; | |
13 | ||
14 | function renderPicker(props) { | |
15 | const showSecond = true; | |
16 | const format = ('HH:mm:ss'); | |
17 | ||
18 | return ReactDOM.render( | |
19 | <TimePicker | |
20 | format={format} | |
21 | showSecond={showSecond} | |
22 | defaultValue={moment('12:57:58', format)} | |
23 | {...props} | |
24 | />, container); | |
25 | } | |
26 | ||
27 | function renderPickerWithoutSeconds(props) { | |
28 | const showSecond = false; | |
29 | const format = ('HH:mm'); | |
30 | ||
31 | return ReactDOM.render( | |
32 | <TimePicker | |
33 | format={format} | |
34 | showSecond={showSecond} | |
35 | defaultValue={moment('08:24', format)} | |
36 | {...props} | |
37 | />, container); | |
38 | } | |
39 | ||
40 | beforeEach(() => { | |
41 | container = document.createElement('div'); | |
42 | document.body.appendChild(container); | |
43 | }); | |
44 | ||
45 | afterEach(() => { | |
46 | ReactDOM.unmountComponentAtNode(container); | |
47 | document.body.removeChild(container); | |
48 | }); | |
49 | ||
50 | describe('render panel to body', () => { | |
51 | it('popup correctly', (done) => { | |
52 | let change; | |
53 | const picker = renderPicker({ | |
54 | onChange(v) { | |
55 | change = v; | |
56 | }, | |
57 | }); | |
58 | expect(picker.state.open).not.to.be.ok(); | |
59 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
60 | 'rc-time-picker-input')[0]; | |
61 | expect((input).value).to.be('12:57:58'); | |
62 | async.series([(next) => { | |
63 | Simulate.click(input); | |
64 | setTimeout(next, 100); | |
65 | }, (next) => { | |
66 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
67 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
68 | expect(picker.state.open).to.be(true); | |
69 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | |
70 | Simulate.click(hour); | |
71 | setTimeout(next, 100); | |
72 | }, (next) => { | |
73 | expect(change).to.be.ok(); | |
74 | expect(change.hour()).to.be(1); | |
75 | expect(change.minute()).to.be(57); | |
76 | expect(change.second()).to.be(58); | |
77 | expect((input).value).to.be('01:57:58'); | |
78 | expect(picker.state.open).to.be.ok(); | |
79 | next(); | |
80 | }], () => { | |
81 | done(); | |
82 | }); | |
83 | }); | |
84 | ||
85 | it('destroy correctly', (done) => { | |
86 | const picker = renderPicker(); | |
87 | expect(picker.state.open).not.to.be.ok(); | |
88 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
89 | 'rc-time-picker-input')[0]; | |
90 | async.series([(next) => { | |
91 | Simulate.click(input); | |
92 | setTimeout(next, 100); | |
93 | }, (next) => { | |
94 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
95 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
96 | expect(picker.state.open).to.be(true); | |
97 | if (document.querySelectorAll) { | |
98 | expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); | |
99 | } | |
100 | expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, | |
101 | 'li')[0]).to.be.ok(); | |
102 | ReactDOM.unmountComponentAtNode(container); | |
103 | setTimeout(next, 100); | |
104 | }, (next) => { | |
105 | if (document.querySelectorAll) { | |
106 | expect(document.querySelectorAll('.rc-time-picker').length).to.be(0); | |
107 | } | |
108 | expect(picker.panelInstance).not.to.be.ok(); | |
109 | next(); | |
110 | }], () => { | |
111 | done(); | |
112 | }); | |
113 | }); | |
114 | ||
115 | it('support name', () => { | |
116 | const picker = renderPicker({ | |
117 | name: 'time-picker-form-name', | |
118 | }); | |
119 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
120 | 'rc-time-picker-input')[0]; | |
121 | expect(input.name).to.be('time-picker-form-name'); | |
122 | }); | |
123 | ||
124 | it('support focus', () => { | |
125 | const picker = renderPicker({ | |
126 | name: 'time-picker-form-name', | |
127 | }); | |
128 | expect(picker.focus).to.be.a('function'); | |
129 | }); | |
130 | ||
131 | it('should be controlled by open', () => { | |
132 | const picker = renderPicker({ | |
133 | open: false, | |
134 | }); | |
135 | expect(picker.state.open).not.to.be.ok(); | |
136 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
137 | 'rc-time-picker-input')[0]; | |
138 | Simulate.click(input); | |
139 | expect(picker.state.open).not.to.be.ok(); | |
140 | }); | |
141 | }); | |
142 | ||
143 | describe('render panel to body (without seconds)', () => { | |
144 | it('popup correctly', (done) => { | |
145 | let change; | |
146 | const picker = renderPickerWithoutSeconds({ | |
147 | onChange(v) { | |
148 | change = v; | |
149 | }, | |
150 | }); | |
151 | expect(picker.state.open).not.to.be.ok(); | |
152 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
153 | 'rc-time-picker-input')[0]; | |
154 | expect((input).value).to.be('08:24'); | |
155 | async.series([(next) => { | |
156 | Simulate.click(input); | |
157 | setTimeout(next, 100); | |
158 | }, (next) => { | |
159 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
160 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
161 | expect(picker.state.open).to.be(true); | |
162 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | |
163 | Simulate.click(hour); | |
164 | setTimeout(next, 100); | |
165 | }, (next) => { | |
166 | expect(change).to.be.ok(); | |
167 | expect(change.hour()).to.be(1); | |
168 | expect(change.minute()).to.be(24); | |
169 | expect((input).value).to.be('01:24'); | |
170 | expect(picker.state.open).to.be.ok(); | |
171 | next(); | |
172 | }], () => { | |
173 | done(); | |
174 | }); | |
175 | }); | |
176 | }); | |
177 | ||
178 | describe('render panel to body 12pm mode', () => { | |
179 | it('popup correctly', (done) => { | |
180 | let change; | |
181 | const picker = renderPickerWithoutSeconds({ | |
182 | use12Hours: true, | |
183 | value: null, | |
184 | onChange(v) { | |
185 | change = v; | |
186 | }, | |
187 | }); | |
188 | expect(picker.state.open).not.to.be.ok(); | |
189 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
190 | 'rc-time-picker-input')[0]; | |
191 | expect((input).value).to.be(''); | |
192 | async.series([(next) => { | |
193 | Simulate.click(input); | |
194 | setTimeout(next, 100); | |
195 | }, (next) => { | |
196 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
197 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
198 | expect(picker.state.open).to.be(true); | |
199 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | |
200 | Simulate.click(hour); | |
201 | setTimeout(next, 100); | |
202 | }, (next) => { | |
203 | expect(change).to.be.ok(); | |
204 | expect(picker.state.open).to.be.ok(); | |
205 | next(); | |
206 | }], () => { | |
207 | done(); | |
208 | }); | |
209 | }); | |
210 | }); | |
211 | ||
212 | describe('other operations', () => { | |
213 | it('focus/blur correctly', (done) => { | |
214 | let focus = false; | |
215 | let blur = false; | |
216 | ||
217 | const picker = renderPicker({ | |
218 | onFocus: () => { | |
219 | focus = true; | |
220 | }, | |
221 | onBlur: () => { | |
222 | blur = true; | |
223 | }, | |
224 | }); | |
225 | expect(picker.state.open).not.to.be.ok(); | |
226 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
227 | 'rc-time-picker-input')[0]; | |
228 | ||
229 | async.series([(next) => { | |
230 | Simulate.focus(input); | |
231 | setTimeout(next, 100); | |
232 | }, (next) => { | |
233 | expect(picker.state.open).to.be(false); | |
234 | ||
235 | Simulate.blur(input); | |
236 | setTimeout(next, 100); | |
237 | }, (next) => { | |
238 | expect(focus).to.be(true); | |
239 | expect(blur).to.be(true); | |
240 | ||
241 | next(); | |
242 | }], () => { | |
243 | done(); | |
244 | }); | |
245 | }); | |
246 | }); | |
247 | }); |