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