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