]>
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'; | |
e9060dda | 6 | const Simulate = TestUtils.Simulate; |
02d1b455 M |
7 | import expect from 'expect.js'; |
8 | import async from 'async'; | |
02d1b455 | 9 | import DateTimeFormat from 'gregorian-calendar-format'; |
02d1b455 M |
10 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; |
11 | import TimePickerLocale from '../src/locale/zh_CN'; | |
12 | ||
e9060dda | 13 | function formatTime(time, formatter) { |
14 | return formatter.parse(time, { | |
15 | locale: zhCn, | |
16 | obeyCount: true, | |
17 | }); | |
18 | } | |
19 | ||
20 | describe('Select', () => { | |
21 | let container; | |
02d1b455 M |
22 | |
23 | function renderPicker(props) { | |
e9060dda | 24 | const showSecond = true; |
25 | const formatter = new DateTimeFormat('HH:mm:ss'); | |
02d1b455 M |
26 | |
27 | return ReactDOM.render( | |
28 | <TimePicker | |
29 | formatter={formatter} | |
30 | locale={TimePickerLocale} | |
31 | showSecond={showSecond} | |
32 | defaultValue={formatTime('01:02:03', formatter)} | |
33 | {...props} | |
34 | />, container); | |
35 | } | |
36 | ||
e9060dda | 37 | beforeEach(() => { |
02d1b455 M |
38 | container = document.createElement('div'); |
39 | document.body.appendChild(container); | |
40 | }); | |
41 | ||
e9060dda | 42 | afterEach(() => { |
02d1b455 M |
43 | ReactDOM.unmountComponentAtNode(container); |
44 | document.body.removeChild(container); | |
45 | }); | |
46 | ||
e9060dda | 47 | describe('select number', () => { |
48 | it('select number correctly', (done) => { | |
49 | const picker = renderPicker(); | |
02d1b455 | 50 | expect(picker.state.open).not.to.be.ok(); |
e9060dda | 51 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; |
52 | let selector; | |
53 | async.series([(next) => { | |
02d1b455 M |
54 | expect(picker.state.open).to.be(false); |
55 | ||
56 | Simulate.click(input); | |
57 | setTimeout(next, 100); | |
e9060dda | 58 | }, (next) => { |
02d1b455 M |
59 | expect(picker.state.open).to.be(true); |
60 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select'); | |
61 | ||
62 | setTimeout(next, 100); | |
e9060dda | 63 | }, (next) => { |
02d1b455 M |
64 | expect(selector.length).to.be(3); |
65 | ||
66 | next(); | |
e9060dda | 67 | }], () => { |
02d1b455 M |
68 | done(); |
69 | }); | |
70 | }); | |
02d1b455 M |
71 | }); |
72 | ||
e9060dda | 73 | describe('select to change value', () => { |
74 | it('hour correctly', (done) => { | |
75 | let change; | |
76 | const picker = renderPicker({ | |
77 | onChange(v) { | |
02d1b455 | 78 | change = v; |
e9060dda | 79 | }, |
02d1b455 M |
80 | }); |
81 | expect(picker.state.open).not.to.be.ok(); | |
e9060dda | 82 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; |
83 | let header; | |
84 | async.series([(next) => { | |
02d1b455 M |
85 | expect(picker.state.open).to.be(false); |
86 | ||
87 | Simulate.click(input); | |
88 | setTimeout(next, 100); | |
e9060dda | 89 | }, (next) => { |
02d1b455 M |
90 | expect(picker.state.open).to.be(true); |
91 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
e9060dda | 92 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; |
93 | const option = selector.getElementsByTagName('li')[19]; | |
02d1b455 M |
94 | expect(header).to.be.ok(); |
95 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
96 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
97 | ||
98 | Simulate.click(option); | |
99 | setTimeout(next, 100); | |
e9060dda | 100 | }, (next) => { |
02d1b455 M |
101 | expect(change).to.be.ok(); |
102 | expect(change.getHourOfDay()).to.be(19); | |
103 | expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03'); | |
104 | expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03'); | |
105 | expect(picker.state.open).to.be.ok(); | |
106 | ||
107 | next(); | |
e9060dda | 108 | }], () => { |
02d1b455 M |
109 | done(); |
110 | }); | |
111 | }); | |
112 | ||
e9060dda | 113 | it('minute correctly', (done) => { |
114 | let change; | |
115 | const picker = renderPicker({ | |
116 | onChange(v) { | |
02d1b455 | 117 | change = v; |
e9060dda | 118 | }, |
02d1b455 M |
119 | }); |
120 | expect(picker.state.open).not.to.be.ok(); | |
e9060dda | 121 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; |
122 | let header; | |
123 | async.series([(next) => { | |
02d1b455 M |
124 | expect(picker.state.open).to.be(false); |
125 | ||
126 | Simulate.click(input); | |
127 | setTimeout(next, 100); | |
e9060dda | 128 | }, (next) => { |
02d1b455 M |
129 | expect(picker.state.open).to.be(true); |
130 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
e9060dda | 131 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; |
132 | const option = selector.getElementsByTagName('li')[19]; | |
02d1b455 M |
133 | expect(header).to.be.ok(); |
134 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
135 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
136 | ||
137 | Simulate.click(option); | |
138 | setTimeout(next, 100); | |
e9060dda | 139 | }, (next) => { |
02d1b455 M |
140 | expect(change).to.be.ok(); |
141 | expect(change.getMinutes()).to.be(19); | |
142 | expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03'); | |
143 | expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03'); | |
144 | expect(picker.state.open).to.be.ok(); | |
145 | ||
146 | next(); | |
e9060dda | 147 | }], () => { |
02d1b455 M |
148 | done(); |
149 | }); | |
150 | }); | |
151 | ||
e9060dda | 152 | it('second correctly', (done) => { |
153 | let change; | |
154 | const picker = renderPicker({ | |
155 | onChange(v) { | |
02d1b455 | 156 | change = v; |
e9060dda | 157 | }, |
02d1b455 M |
158 | }); |
159 | expect(picker.state.open).not.to.be.ok(); | |
e9060dda | 160 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; |
161 | let header; | |
162 | async.series([(next) => { | |
02d1b455 M |
163 | expect(picker.state.open).to.be(false); |
164 | ||
165 | Simulate.click(input); | |
166 | setTimeout(next, 100); | |
e9060dda | 167 | }, (next) => { |
02d1b455 M |
168 | expect(picker.state.open).to.be(true); |
169 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; | |
e9060dda | 170 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; |
171 | const option = selector.getElementsByTagName('li')[19]; | |
02d1b455 M |
172 | expect(header).to.be.ok(); |
173 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); | |
174 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); | |
175 | ||
176 | Simulate.click(option); | |
177 | setTimeout(next, 100); | |
e9060dda | 178 | }, (next) => { |
02d1b455 M |
179 | expect(change).to.be.ok(); |
180 | expect(change.getSeconds()).to.be(19); | |
181 | expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19'); | |
182 | expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19'); | |
183 | expect(picker.state.open).to.be.ok(); | |
184 | ||
185 | next(); | |
e9060dda | 186 | }], () => { |
02d1b455 M |
187 | done(); |
188 | }); | |
189 | }); | |
02d1b455 M |
190 | }); |
191 | }); |