tests/Header.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 {KeyCode} from 'rc-util';
  10
  11 import DateTimeFormat from 'gregorian-calendar-format';
  12 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
  13 import TimePickerLocale from '../src/locale/zh_CN';
  14
  15 function formatTime(time, formatter) {
  16   return formatter.parse(time, {
  17     locale: zhCn,
  18     obeyCount: true,
  19   });
  20 }
  21
  22 describe('Header', () => {
  23   let container;
  24
  25   function renderPicker(props) {
  26     const showSecond = true;
  27     const formatter = new DateTimeFormat('HH:mm:ss');
  28
  29     return ReactDOM.render(
  30       <TimePicker
  31         formatter={formatter}
  32         locale={TimePickerLocale}
  33         showSecond={showSecond}
  34         defaultValue={formatTime('01:02:03', formatter)}
  35         {...props}
  36       />, container);
  37   }
  38
  39   beforeEach(() => {
  40     container = document.createElement('div');
  41     document.body.appendChild(container);
  42   });
  43
  44   afterEach(() => {
  45     ReactDOM.unmountComponentAtNode(container);
  46     document.body.removeChild(container);
  47   });
  48
  49   describe('input to change value', () => {
  50     it('input correctly', (done) => {
  51       const picker = renderPicker();
  52       expect(picker.state.open).not.to.be.ok();
  53       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  54       let header;
  55       async.series([(next) => {
  56         Simulate.click(input);
  57         setTimeout(next, 100);
  58       }, (next) => {
  59         expect(picker.state.open).to.be(true);
  60         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
  61         expect(header).to.be.ok();
  62         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
  63         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
  64
  65         ReactDOM.findDOMNode(header).value = '12:34:56';
  66         Simulate.change(header);
  67         setTimeout(next, 100);
  68       }, (next) => {
  69         expect(picker.state.open).to.be(true);
  70         expect(ReactDOM.findDOMNode(header).value).to.be('12:34:56');
  71         expect(ReactDOM.findDOMNode(input).value).to.be('12:34:56');
  72
  73         next();
  74       }], () => {
  75         done();
  76       });
  77     });
  78
  79     it('carry correctly', (done) => {
  80       const picker = renderPicker();
  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         Simulate.click(input);
  86         setTimeout(next, 100);
  87       }, (next) => {
  88         expect(picker.state.open).to.be(true);
  89         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
  90         expect(header).to.be.ok();
  91         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
  92         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
  93
  94         ReactDOM.findDOMNode(header).value = '33:44:55';
  95         Simulate.change(header);
  96         setTimeout(next, 100);
  97       }, (next) => {
  98         expect(picker.state.open).to.be(true);
  99         expect(ReactDOM.findDOMNode(header).value).to.be('09:44:55');
 100         expect(ReactDOM.findDOMNode(input).value).to.be('09:44:55');
 101
 102         ReactDOM.findDOMNode(header).value = '10:90:30';
 103         Simulate.change(header);
 104         setTimeout(next, 100);
 105       }, (next) => {
 106         expect(picker.state.open).to.be(true);
 107         expect(ReactDOM.findDOMNode(header).value).to.be('11:30:30');
 108         expect(ReactDOM.findDOMNode(input).value).to.be('11:30:30');
 109
 110         ReactDOM.findDOMNode(header).value = '34:56:78';
 111         Simulate.change(header);
 112         setTimeout(next, 100);
 113       }, (next) => {
 114         expect(picker.state.open).to.be(true);
 115         expect(ReactDOM.findDOMNode(header).value).to.be('10:57:18');
 116         expect(ReactDOM.findDOMNode(input).value).to.be('10:57:18');
 117
 118         next();
 119       }], () => {
 120         done();
 121       });
 122     });
 123
 124     it('check correctly', (done) => {
 125       const picker = renderPicker();
 126       expect(picker.state.open).not.to.be.ok();
 127       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 128       let header;
 129       async.series([(next) => {
 130         Simulate.click(input);
 131         setTimeout(next, 100);
 132       }, (next) => {
 133         expect(picker.state.open).to.be(true);
 134         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 135         expect(header).to.be.ok();
 136         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 137         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 138
 139         ReactDOM.findDOMNode(header).value = '3:34:56';
 140         Simulate.change(header);
 141         setTimeout(next, 100);
 142       }, (next) => {
 143         expect(picker.state.open).to.be(true);
 144         expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56');
 145         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 146         expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
 147
 148         ReactDOM.findDOMNode(header).value = '13:3:56';
 149         Simulate.change(header);
 150         setTimeout(next, 100);
 151       }, (next) => {
 152         expect(picker.state.open).to.be(true);
 153         expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56');
 154         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 155         expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
 156
 157         ReactDOM.findDOMNode(header).value = '13:34:5';
 158         Simulate.change(header);
 159         setTimeout(next, 100);
 160       }, (next) => {
 161         expect(picker.state.open).to.be(true);
 162         expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5');
 163         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 164         expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
 165         next();
 166       }], () => {
 167         done();
 168       });
 169     });
 170   });
 171
 172   describe('other operations', () => {
 173     it('clear correctly', (done) => {
 174       let change;
 175       const picker = renderPicker({
 176         onChange(v) {
 177           change = v;
 178         },
 179       });
 180       expect(picker.state.open).not.to.be.ok();
 181       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 182       let header;
 183       async.series([(next) => {
 184         expect(picker.state.open).to.be(false);
 185
 186         Simulate.click(input);
 187         setTimeout(next, 100);
 188       }, (next) => {
 189         expect(picker.state.open).to.be(true);
 190         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 191         const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0];
 192         expect(header).to.be.ok();
 193         expect(clearButton).to.be.ok();
 194         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 195         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 196
 197         Simulate.mouseDown(clearButton);
 198         setTimeout(next, 100);
 199       }, (next) => {
 200         expect(picker.state.open).to.be(false);
 201         expect(change).to.be(null);
 202         expect(ReactDOM.findDOMNode(header).value).to.be('');
 203         expect(ReactDOM.findDOMNode(input).value).to.be('');
 204
 205         next();
 206       }], () => {
 207         done();
 208       });
 209     });
 210
 211     it('exit correctly', (done) => {
 212       const picker = renderPicker();
 213       expect(picker.state.open).not.to.be.ok();
 214       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 215       let header;
 216       async.series([(next) => {
 217         expect(picker.state.open).to.be(false);
 218
 219         Simulate.click(input);
 220         setTimeout(next, 100);
 221       }, (next) => {
 222         expect(picker.state.open).to.be(true);
 223         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 224         expect(header).to.be.ok();
 225         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 226         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 227
 228         Simulate.keyDown(ReactDOM.findDOMNode(header), {
 229           keyCode: KeyCode.ESC,
 230         });
 231         setTimeout(next, 100);
 232       }, (next) => {
 233         expect(picker.state.open).to.be(false);
 234         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 235         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 236
 237         next();
 238       }], () => {
 239         done();
 240       });
 241     });
 242   });
 243 });