tests/Select.spec.jsx

   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 const Simulate = TestUtils.Simulate;
   7 import expect from 'expect.js';
   8 import async from 'async';
   9 import DateTimeFormat from 'gregorian-calendar-format';
  10 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
  11 import TimePickerLocale from '../src/locale/zh_CN';
  12
  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;
  22
  23   function renderPicker(props) {
  24     const showSecond = true;
  25     const formatter = new DateTimeFormat('HH:mm:ss');
  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
  37   beforeEach(() => {
  38     container = document.createElement('div');
  39     document.body.appendChild(container);
  40   });
  41
  42   afterEach(() => {
  43     ReactDOM.unmountComponentAtNode(container);
  44     document.body.removeChild(container);
  45   });
  46
  47   describe('select number', () => {
  48     it('select number correctly', (done) => {
  49       const picker = renderPicker();
  50       expect(picker.state.open).not.to.be.ok();
  51       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  52       let selector;
  53       async.series([(next) => {
  54         expect(picker.state.open).to.be(false);
  55
  56         Simulate.click(input);
  57         setTimeout(next, 100);
  58       }, (next) => {
  59         expect(picker.state.open).to.be(true);
  60         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select');
  61
  62         setTimeout(next, 100);
  63       }, (next) => {
  64         expect(selector.length).to.be(3);
  65
  66         next();
  67       }], () => {
  68         done();
  69       });
  70     });
  71   });
  72
  73   describe('select to change value', () => {
  74     it('hour correctly', (done) => {
  75       let change;
  76       const picker = renderPicker({
  77         onChange(v) {
  78           change = v;
  79         },
  80       });
  81       expect(picker.state.open).not.to.be.ok();
  82       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  83       let header;
  84       async.series([(next) => {
  85         expect(picker.state.open).to.be(false);
  86
  87         Simulate.click(input);
  88         setTimeout(next, 100);
  89       }, (next) => {
  90         expect(picker.state.open).to.be(true);
  91         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
  92         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
  93         const option = selector.getElementsByTagName('li')[19];
  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);
 100       }, (next) => {
 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();
 108       }], () => {
 109         done();
 110       });
 111     });
 112
 113     it('minute correctly', (done) => {
 114       let change;
 115       const picker = renderPicker({
 116         onChange(v) {
 117           change = v;
 118         },
 119       });
 120       expect(picker.state.open).not.to.be.ok();
 121       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 122       let header;
 123       async.series([(next) => {
 124         expect(picker.state.open).to.be(false);
 125
 126         Simulate.click(input);
 127         setTimeout(next, 100);
 128       }, (next) => {
 129         expect(picker.state.open).to.be(true);
 130         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 131         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 132         const option = selector.getElementsByTagName('li')[19];
 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);
 139       }, (next) => {
 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();
 147       }], () => {
 148         done();
 149       });
 150     });
 151
 152     it('second correctly', (done) => {
 153       let change;
 154       const picker = renderPicker({
 155         onChange(v) {
 156           change = v;
 157         },
 158       });
 159       expect(picker.state.open).not.to.be.ok();
 160       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 161       let header;
 162       async.series([(next) => {
 163         expect(picker.state.open).to.be(false);
 164
 165         Simulate.click(input);
 166         setTimeout(next, 100);
 167       }, (next) => {
 168         expect(picker.state.open).to.be(true);
 169         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 170         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
 171         const option = selector.getElementsByTagName('li')[19];
 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);
 178       }, (next) => {
 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();
 186       }], () => {
 187         done();
 188       });
 189     });
 190   });
 191 });