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:04', 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:04');
  94         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
  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:04');
 104         expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04');
 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:04');
 133         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 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:04');
 143         expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04');
 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:04');
 172         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 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(h) {
 198           return [h];
 199         },
 200         disabledSeconds(h, m) {
 201           return [h + m % 60];
 202         },
 203       });
 204       expect(picker.state.open).not.to.be.ok();
 205       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 206       let header;
 207       async.series([(next) => {
 208         expect(picker.state.open).to.be(false);
 209
 210         Simulate.click(input);
 211         setTimeout(next, 100);
 212       }, (next) => {
 213         expect(picker.state.open).to.be(true);
 214         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 215         expect(header).to.be.ok();
 216         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
 217         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 218
 219         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 220         const option = selector.getElementsByTagName('li')[1];
 221         Simulate.click(option);
 222         setTimeout(next, 100);
 223       }, (next) => {
 224         expect(change).not.to.be.ok();
 225         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
 226         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 227         expect(picker.state.open).to.be.ok();
 228
 229         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
 230         const option = selector.getElementsByTagName('li')[3];
 231         Simulate.click(option);
 232         setTimeout(next, 100);
 233       }, (next) => {
 234         expect(change).not.to.be.ok();
 235         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
 236         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 237         expect(picker.state.open).to.be.ok();
 238
 239         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 240         const option = selector.getElementsByTagName('li')[7];
 241         Simulate.click(option);
 242         setTimeout(next, 100);
 243       }, (next) => {
 244         expect(change).to.be.ok();
 245         expect(change.getMinutes()).to.be(7);
 246         expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04');
 247         expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04');
 248         expect(picker.state.open).to.be.ok();
 249
 250         next();
 251       }], () => {
 252         done();
 253       });
 254     });
 255
 256     it('hidden correctly', (done) => {
 257       let change;
 258       const picker = renderPicker({
 259         onChange(v) {
 260           change = v;
 261         },
 262         disabledHours() {
 263           return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23];
 264         },
 265         hideDisabledOptions: true,
 266       });
 267       expect(picker.state.open).not.to.be.ok();
 268       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 269       let header;
 270       async.series([(next) => {
 271         expect(picker.state.open).to.be(false);
 272
 273         Simulate.click(input);
 274         setTimeout(next, 100);
 275       }, (next) => {
 276         expect(picker.state.open).to.be(true);
 277         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 278         expect(header).to.be.ok();
 279         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
 280         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 281
 282         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
 283         const option = selector.getElementsByTagName('li')[3];
 284         Simulate.click(option);
 285         setTimeout(next, 100);
 286       }, (next) => {
 287         expect(change).to.be.ok();
 288         expect(change.getHourOfDay()).to.be(6);
 289         expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04');
 290         expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04');
 291         expect(picker.state.open).to.be.ok();
 292
 293         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
 294         const option = selector.getElementsByTagName('li')[4];
 295         Simulate.click(option);
 296         setTimeout(next, 100);
 297       }, (next) => {
 298         expect(change).to.be.ok();
 299         expect(change.getHourOfDay()).to.be(8);
 300         expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04');
 301         expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04');
 302         expect(picker.state.open).to.be.ok();
 303
 304         next();
 305       }], () => {
 306         done();
 307       });
 308     });
 309   });
 310 });