From 0e62bf0b7bdc260e882fd185492939cbaed04d56 Mon Sep 17 00:00:00 2001 From: MG12 Date: Sun, 13 Dec 2015 00:03:19 +0800 Subject: update test case and fix bugs --- examples/disabled.html | 1 + examples/disabled.js | 36 +++++++++++++++ examples/hidden.html | 1 + examples/hidden.js | 37 ++++++++++++++++ examples/pick-time.js | 18 +------- src/module/Combobox.jsx | 2 +- src/module/Header.jsx | 6 +-- src/module/Panel.jsx | 2 +- tests/Header.spec.jsx | 81 ++++++++++++++++++++++++++++++++++ tests/Select.spec.jsx | 114 +++++++++++++++++++++++++++++++++++++++++++++--- 10 files changed, 270 insertions(+), 28 deletions(-) create mode 100644 examples/disabled.html create mode 100644 examples/disabled.js create mode 100644 examples/hidden.html create mode 100644 examples/hidden.js diff --git a/examples/disabled.html b/examples/disabled.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/disabled.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/disabled.js b/examples/disabled.js new file mode 100644 index 0000000..24d0068 --- /dev/null +++ b/examples/disabled.js @@ -0,0 +1,36 @@ +/* eslint no-console:0 */ + +import 'rc-time-picker/assets/index.less'; + +import React from 'react'; +import ReactDom from 'react-dom'; + +import GregorianCalendar from 'gregorian-calendar'; +import DateTimeFormat from 'gregorian-calendar-format'; +import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; + +import TimePicker from 'rc-time-picker'; +import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; + +const showSecond = true; +const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; + +const formatter = new DateTimeFormat(str); + +const now = new GregorianCalendar(zhCn); +now.setTime(Date.now()); + +function onChange(value) { + console.log(value && formatter.format(value)); +} + +ReactDom.render( + , + document.getElementById('__react-content') +); diff --git a/examples/hidden.html b/examples/hidden.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/hidden.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/hidden.js b/examples/hidden.js new file mode 100644 index 0000000..1084236 --- /dev/null +++ b/examples/hidden.js @@ -0,0 +1,37 @@ +/* eslint no-console:0 */ + +import 'rc-time-picker/assets/index.less'; + +import React from 'react'; +import ReactDom from 'react-dom'; + +import GregorianCalendar from 'gregorian-calendar'; +import DateTimeFormat from 'gregorian-calendar-format'; +import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; + +import TimePicker from 'rc-time-picker'; +import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; + +const showSecond = true; +const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; + +const formatter = new DateTimeFormat(str); + +const now = new GregorianCalendar(zhCn); +now.setTime(Date.now()); + +function onChange(value) { + console.log(value && formatter.format(value)); +} + +ReactDom.render( + , + document.getElementById('__react-content') +); diff --git a/examples/pick-time.js b/examples/pick-time.js index 074e72c..f66e416 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js @@ -24,27 +24,11 @@ function onChange(value) { console.log(value && formatter.format(value)); } -const options = { - disabledHours() { - return [0, 2, 21]; - }, - disabledMinutes(h) { - return h === 22 ? [0, 3, 31] : []; - }, - disabledSeconds(h, m) { - return []; - }, -}; - ReactDom.render( , + onChange={onChange} />, document.getElementById('__react-content') ); diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx index 27a8226..1e172a7 100644 --- a/src/module/Combobox.jsx +++ b/src/module/Combobox.jsx @@ -9,7 +9,7 @@ const formatOption = (option, disabledOptions) => { } let disabled = false; - if (disabledOptions.indexOf(option) >= 0) { + if (disabledOptions && disabledOptions.indexOf(option) >= 0) { disabled = true; } diff --git a/src/module/Header.jsx b/src/module/Header.jsx index c2f8eef..fec02af 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx @@ -88,9 +88,9 @@ const Header = React.createClass({ // if time value is disabled, response warning. if ( - disabledHours.indexOf(value.getHourOfDay()) >= 0 || - disabledMinutes.indexOf(value.getMinutes()) >= 0 || - disabledSeconds.indexOf(value.getSeconds()) >= 0 + (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) || + (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) || + (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0) ) { this.setState({ invalid: true, diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 72934e5..12d23f7 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -9,7 +9,7 @@ function noop() { function generateOptions(length, disabledOptions, hideDisabledOptions) { const arr = []; for (let value = 0; value < length; value++) { - if ((disabledOptions && disabledOptions.indexOf(value) < 0) || !hideDisabledOptions) { + if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) { arr.push(value); } } diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx index cc8f954..18d61c5 100644 --- a/tests/Header.spec.jsx +++ b/tests/Header.spec.jsx @@ -121,6 +121,87 @@ describe('Header', () => { }); }); + it('carry disabled correctly', (done) => { + const picker = renderPicker({ + disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] + }); + expect(picker.state.open).not.to.be.ok(); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + let header; + async.series([(next) => { + Simulate.click(input); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '12:15:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '12:10:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18'); + expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18'); + + next(); + }], () => { + done(); + }); + }); + + it('carry hidden correctly', (done) => { + const picker = renderPicker({ + disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22], + hideDisabledOptions: true + }); + expect(picker.state.open).not.to.be.ok(); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + let header; + async.series([(next) => { + Simulate.click(input); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '12:15:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '12:10:78'; + Simulate.change(header); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18'); + expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18'); + + next(); + }], () => { + done(); + }); + }); + it('check correctly', (done) => { const picker = renderPicker(); expect(picker.state.open).not.to.be.ok(); diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx index 7e53c31..6dd7796 100644 --- a/tests/Select.spec.jsx +++ b/tests/Select.spec.jsx @@ -89,12 +89,12 @@ describe('Select', () => { }, (next) => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; - const option = selector.getElementsByTagName('li')[19]; expect(header).to.be.ok(); expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { @@ -128,12 +128,12 @@ describe('Select', () => { }, (next) => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; - const option = selector.getElementsByTagName('li')[19]; expect(header).to.be.ok(); expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { @@ -167,12 +167,12 @@ describe('Select', () => { }, (next) => { expect(picker.state.open).to.be(true); header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; - const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; - const option = selector.getElementsByTagName('li')[19]; expect(header).to.be.ok(); expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; + const option = selector.getElementsByTagName('li')[19]; Simulate.click(option); setTimeout(next, 100); }, (next) => { @@ -187,5 +187,107 @@ describe('Select', () => { done(); }); }); + + it('disabled correctly', (done) => { + let change; + const picker = renderPicker({ + onChange(v) { + change = v; + }, + disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] + }); + expect(picker.state.open).not.to.be.ok(); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + let header; + async.series([(next) => { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const option = selector.getElementsByTagName('li')[6]; + Simulate.click(option); + setTimeout(next, 100); + }, (next) => { + expect(change).not.to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(picker.state.open).to.be.ok(); + + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + const option = selector.getElementsByTagName('li')[7]; + Simulate.click(option); + setTimeout(next, 100); + }, (next) => { + expect(change).to.be.ok(); + expect(change.getMinutes()).to.be(7); + expect(ReactDOM.findDOMNode(header).value).to.be('01:07:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:07:03'); + expect(picker.state.open).to.be.ok(); + + next(); + }], () => { + done(); + }); + }); + + it('hidden correctly', (done) => { + let change; + const picker = renderPicker({ + onChange(v) { + change = v; + }, + disabledHours: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23], + hideDisabledOptions: true + }); + expect(picker.state.open).not.to.be.ok(); + const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + let header; + async.series([(next) => { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, (next) => { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const option = selector.getElementsByTagName('li')[3]; + Simulate.click(option); + setTimeout(next, 100); + }, (next) => { + expect(change).to.be.ok(); + expect(change.getHourOfDay()).to.be(6); + expect(ReactDOM.findDOMNode(header).value).to.be('06:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('06:02:03'); + expect(picker.state.open).to.be.ok(); + + const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + const option = selector.getElementsByTagName('li')[4]; + Simulate.click(option); + setTimeout(next, 100); + }, (next) => { + expect(change).to.be.ok(); + expect(change.getHourOfDay()).to.be(8); + expect(ReactDOM.findDOMNode(header).value).to.be('08:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('08:02:03'); + expect(picker.state.open).to.be.ok(); + + next(); + }], () => { + done(); + }); + }); }); }); -- cgit v1.2.3