diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-12-04 15:49:46 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-12-04 15:49:46 +0800 |
commit | 38ecfddfa7719dfa88b11a2113b53b6ffc8842d5 (patch) | |
tree | d8d67cf4a66ecfb121a544d99e8f703f3f6d7fbf | |
parent | 886312ffa19f856eaf4c60f096d6afe7b44359a9 (diff) | |
parent | 02d1b455617089d59a5202135eb43850f42e08a1 (diff) | |
download | time-picker-38ecfddfa7719dfa88b11a2113b53b6ffc8842d5.tar.gz time-picker-38ecfddfa7719dfa88b11a2113b53b6ffc8842d5.tar.zst time-picker-38ecfddfa7719dfa88b11a2113b53b6ffc8842d5.zip |
Merge pull request #7 from react-component/add-test-cases
Add test cases
-rw-r--r-- | HISTORY.md | 6 | ||||
-rw-r--r-- | examples/pick-time.js | 3 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/module/Panel.jsx | 2 | ||||
-rw-r--r-- | tests/Header.spec.jsx | 246 | ||||
-rw-r--r-- | tests/Select.spec.jsx | 198 | ||||
-rw-r--r-- | tests/TimePicker.spec.jsx | 162 | ||||
-rw-r--r-- | tests/index.spec.js | 3 | ||||
-rw-r--r-- | tests/runner.html | 1 |
9 files changed, 618 insertions, 5 deletions
@@ -2,6 +2,12 @@ | |||
2 | 2 | ||
3 | --- | 3 | --- |
4 | 4 | ||
5 | 0.7.2 / 2015-12-03 | ||
6 | ------------------ | ||
7 | |||
8 | `fix` IE8 compatible. | ||
9 | `new` add test users. | ||
10 | |||
5 | 0.7.1 / 2015-11-20 | 11 | 0.7.1 / 2015-11-20 |
6 | ------------------ | 12 | ------------------ |
7 | 13 | ||
diff --git a/examples/pick-time.js b/examples/pick-time.js index 178b622..f26952c 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js | |||
@@ -29,6 +29,3 @@ ReactDom.render( | |||
29 | onChange={onChange}/>, | 29 | onChange={onChange}/>, |
30 | document.getElementById('__react-content') | 30 | document.getElementById('__react-content') |
31 | ); | 31 | ); |
32 | |||
33 | |||
34 | console.log(zhCn); \ No newline at end of file | ||
diff --git a/package.json b/package.json index f9246c0..59ca784 100644 --- a/package.json +++ b/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "rc-time-picker", | 2 | "name": "rc-time-picker", |
3 | "version": "1.0.0-alpha1", | 3 | "version": "1.0.0-alpha2", |
4 | "description": "React TimePicker", | 4 | "description": "React TimePicker", |
5 | "keywords": [ | 5 | "keywords": [ |
6 | "react", | 6 | "react", |
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 4c7eaae..2c2f554 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx | |||
@@ -8,7 +8,7 @@ function noop() { | |||
8 | 8 | ||
9 | function generateOptions(length) { | 9 | function generateOptions(length) { |
10 | const arr = []; | 10 | const arr = []; |
11 | for(let i = 0; i < length; i++){ | 11 | for (let i = 0; i < length; i++) { |
12 | arr.push(i); | 12 | arr.push(i); |
13 | } | 13 | } |
14 | return arr; | 14 | return arr; |
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx new file mode 100644 index 0000000..e574d38 --- /dev/null +++ b/tests/Header.spec.jsx | |||
@@ -0,0 +1,246 @@ | |||
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 | }); | ||
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx new file mode 100644 index 0000000..036a0f9 --- /dev/null +++ b/tests/Select.spec.jsx | |||
@@ -0,0 +1,198 @@ | |||
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 | }); | ||
diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx new file mode 100644 index 0000000..5bd056e --- /dev/null +++ b/tests/TimePicker.spec.jsx | |||
@@ -0,0 +1,162 @@ | |||
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 | |||
10 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
11 | import GregorianCalendar from 'gregorian-calendar'; | ||
12 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
13 | import TimePickerLocale from '../src/locale/zh_CN'; | ||
14 | |||
15 | describe('TimePicker', function () { | ||
16 | var container; | ||
17 | |||
18 | function renderPicker(props) { | ||
19 | var showSecond = true; | ||
20 | var formatter = new DateTimeFormat('HH:mm:ss'); | ||
21 | |||
22 | return ReactDOM.render( | ||
23 | <TimePicker | ||
24 | formatter={formatter} | ||
25 | locale={TimePickerLocale} | ||
26 | showSecond={showSecond} | ||
27 | defaultValue={formatTime('12:57:58', formatter)} | ||
28 | {...props} | ||
29 | />, container); | ||
30 | } | ||
31 | |||
32 | function renderPickerWithoutSeconds(props) { | ||
33 | var showSecond = false; | ||
34 | var formatter = new DateTimeFormat('HH:mm'); | ||
35 | |||
36 | return ReactDOM.render( | ||
37 | <TimePicker | ||
38 | formatter={formatter} | ||
39 | locale={TimePickerLocale} | ||
40 | showSecond={showSecond} | ||
41 | defaultValue={formatTime('08:24', formatter)} | ||
42 | {...props} | ||
43 | />, container); | ||
44 | } | ||
45 | |||
46 | function formatTime(time, formatter) { | ||
47 | return formatter.parse(time, { | ||
48 | locale: zhCn, | ||
49 | obeyCount: true, | ||
50 | }); | ||
51 | } | ||
52 | |||
53 | beforeEach(function () { | ||
54 | container = document.createElement('div'); | ||
55 | document.body.appendChild(container); | ||
56 | }); | ||
57 | |||
58 | afterEach(function () { | ||
59 | ReactDOM.unmountComponentAtNode(container); | ||
60 | document.body.removeChild(container); | ||
61 | }); | ||
62 | |||
63 | describe('render panel to body', function () { | ||
64 | it('popup correctly', function (done) { | ||
65 | var change; | ||
66 | var picker = renderPicker({ | ||
67 | onChange: function (v) { | ||
68 | change = v; | ||
69 | } | ||
70 | }); | ||
71 | expect(picker.state.open).not.to.be.ok(); | ||
72 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | ||
73 | expect(ReactDOM.findDOMNode(input).value).to.be('12:57:58'); | ||
74 | async.series([function (next) { | ||
75 | Simulate.click(input); | ||
76 | setTimeout(next, 100); | ||
77 | }, function (next) { | ||
78 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); | ||
79 | expect(picker.state.open).to.be(true); | ||
80 | var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | ||
81 | Simulate.click(hour); | ||
82 | setTimeout(next, 100); | ||
83 | }, function (next) { | ||
84 | expect(change).to.be.ok(); | ||
85 | expect(change.getHourOfDay()).to.be(1); | ||
86 | expect(change.getMinutes()).to.be(57); | ||
87 | expect(change.getSeconds()).to.be(58); | ||
88 | expect(ReactDOM.findDOMNode(input).value).to.be('01:57:58'); | ||
89 | expect(picker.state.open).to.be.ok(); | ||
90 | next(); | ||
91 | }], function () { | ||
92 | done(); | ||
93 | }); | ||
94 | }); | ||
95 | |||
96 | it('destroy correctly', function (done) { | ||
97 | var change; | ||
98 | var picker = renderPicker({ | ||
99 | onChange: function (v) { | ||
100 | change = v; | ||
101 | } | ||
102 | }); | ||
103 | expect(picker.state.open).not.to.be.ok(); | ||
104 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | ||
105 | async.series([function (next) { | ||
106 | Simulate.click(input); | ||
107 | setTimeout(next, 100); | ||
108 | }, function (next) { | ||
109 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-panel-inner')[0]).not.to.be.ok(); | ||
110 | expect(picker.state.open).to.be(true); | ||
111 | if (document.querySelectorAll) { | ||
112 | expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); | ||
113 | } | ||
114 | expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[0]).to.be.ok(); | ||
115 | ReactDOM.unmountComponentAtNode(container); | ||
116 | setTimeout(next, 100); | ||
117 | }, function (next) { | ||
118 | if (document.querySelectorAll) { | ||
119 | expect(document.querySelectorAll('.rc-time-picker').length).to.be(0); | ||
120 | } | ||
121 | expect(picker.panelInstance).not.to.be.ok(); | ||
122 | next(); | ||
123 | }], function () { | ||
124 | done(); | ||
125 | }); | ||
126 | }); | ||
127 | }); | ||
128 | |||
129 | describe('render panel to body (without seconds)', function () { | ||
130 | it('popup correctly', function (done) { | ||
131 | var change; | ||
132 | var picker = renderPickerWithoutSeconds({ | ||
133 | onChange: function (v) { | ||
134 | change = v; | ||
135 | } | ||
136 | }); | ||
137 | expect(picker.state.open).not.to.be.ok(); | ||
138 | var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | ||
139 | expect(ReactDOM.findDOMNode(input).value).to.be('08:24'); | ||
140 | async.series([function (next) { | ||
141 | Simulate.click(input); | ||
142 | setTimeout(next, 100); | ||
143 | }, function (next) { | ||
144 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); | ||
145 | expect(picker.state.open).to.be(true); | ||
146 | var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | ||
147 | Simulate.click(hour); | ||
148 | setTimeout(next, 100); | ||
149 | }, function (next) { | ||
150 | expect(change).to.be.ok(); | ||
151 | expect(change.getHourOfDay()).to.be(1); | ||
152 | expect(change.getMinutes()).to.be(24); | ||
153 | expect(ReactDOM.findDOMNode(input).value).to.be('01:24'); | ||
154 | expect(picker.state.open).to.be.ok(); | ||
155 | next(); | ||
156 | }], function () { | ||
157 | done(); | ||
158 | }); | ||
159 | }); | ||
160 | }); | ||
161 | |||
162 | }); | ||
diff --git a/tests/index.spec.js b/tests/index.spec.js new file mode 100644 index 0000000..ae3918a --- /dev/null +++ b/tests/index.spec.js | |||
@@ -0,0 +1,3 @@ | |||
1 | import './TimePicker.spec'; | ||
2 | import './Header.spec'; | ||
3 | import './Select.spec'; | ||
diff --git a/tests/runner.html b/tests/runner.html new file mode 100644 index 0000000..39802f6 --- /dev/null +++ b/tests/runner.html | |||
@@ -0,0 +1 @@ | |||
stub | |||