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         expect(header).to.be.ok();
  93         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
  94         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
  95
  96         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
  97         const option = selector.getElementsByTagName('li')[19];
  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         expect(header).to.be.ok();
 132         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 133         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 134
 135         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 136         const option = selector.getElementsByTagName('li')[19];
 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         expect(header).to.be.ok();
 171         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 172         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 173
 174         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
 175         const option = selector.getElementsByTagName('li')[19];
 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     it('disabled correctly', (done) => {
 192       let change;
 193       const picker = renderPicker({
 194         onChange(v) {
 195           change = v;
 196         },
 197         disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
 198       });
 199       expect(picker.state.open).not.to.be.ok();
 200       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 201       let header;
 202       async.series([(next) => {
 203         expect(picker.state.open).to.be(false);
 204
 205         Simulate.click(input);
 206         setTimeout(next, 100);
 207       }, (next) => {
 208         expect(picker.state.open).to.be(true);
 209         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 210         expect(header).to.be.ok();
 211         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 212         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 213
 214         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 215         const option = selector.getElementsByTagName('li')[6];
 216         Simulate.click(option);
 217         setTimeout(next, 100);
 218       }, (next) => {
 219         expect(change).not.to.be.ok();
 220         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 221         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 222         expect(picker.state.open).to.be.ok();
 223
 224         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 225         const option = selector.getElementsByTagName('li')[7];
 226         Simulate.click(option);
 227         setTimeout(next, 100);
 228       }, (next) => {
 229         expect(change).to.be.ok();
 230         expect(change.getMinutes()).to.be(7);
 231         expect(ReactDOM.findDOMNode(header).value).to.be('01:07:03');
 232         expect(ReactDOM.findDOMNode(input).value).to.be('01:07:03');
 233         expect(picker.state.open).to.be.ok();
 234
 235         next();
 236       }], () => {
 237         done();
 238       });
 239     });
 240
 241     it('hidden correctly', (done) => {
 242       let change;
 243       const picker = renderPicker({
 244         onChange(v) {
 245           change = v;
 246         },
 247         disabledHours: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23],
 248         hideDisabledOptions: true
 249       });
 250       expect(picker.state.open).not.to.be.ok();
 251       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 252       let header;
 253       async.series([(next) => {
 254         expect(picker.state.open).to.be(false);
 255
 256         Simulate.click(input);
 257         setTimeout(next, 100);
 258       }, (next) => {
 259         expect(picker.state.open).to.be(true);
 260         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 261         expect(header).to.be.ok();
 262         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 263         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 264
 265         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
 266         const option = selector.getElementsByTagName('li')[3];
 267         Simulate.click(option);
 268         setTimeout(next, 100);
 269       }, (next) => {
 270         expect(change).to.be.ok();
 271         expect(change.getHourOfDay()).to.be(6);
 272         expect(ReactDOM.findDOMNode(header).value).to.be('06:02:03');
 273         expect(ReactDOM.findDOMNode(input).value).to.be('06:02:03');
 274         expect(picker.state.open).to.be.ok();
 275
 276         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
 277         const option = selector.getElementsByTagName('li')[4];
 278         Simulate.click(option);
 279         setTimeout(next, 100);
 280       }, (next) => {
 281         expect(change).to.be.ok();
 282         expect(change.getHourOfDay()).to.be(8);
 283         expect(ReactDOM.findDOMNode(header).value).to.be('08:02:03');
 284         expect(ReactDOM.findDOMNode(input).value).to.be('08:02:03');
 285         expect(picker.state.open).to.be.ok();
 286
 287         next();
 288       }], () => {
 289         done();
 290       });
 291     });
 292   });
 293 });