fix(datepicker): fix date prop change not invoke state change bug

xgfe · Mar 21, 2017 · 3c8099b · 3c8099b
1 parent 7d78554
commit 3c8099b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/index.js b/index.js
@@ -20,7 +20,7 @@ const FORMATS = {
   'time': 'HH:mm'
 };
 
-const SUPPORTED_ORIENTATIONS = ["portrait", "portrait-upside-down", "landscape", "landscape-left", "landscape-right"];
+const SUPPORTED_ORIENTATIONS = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'];
 
 class DatePicker extends Component {
   constructor(props) {
@@ -63,15 +63,15 @@ class DatePicker extends Component {
     // slide animation
     if (visible) {
       this.setState({modalVisible: visible});
-      Animated.timing(
+      return Animated.timing(
         this.state.animatedHeight,
         {
           toValue: height,
           duration: duration
         }
       ).start();
     } else {
-      Animated.timing(
+      return Animated.timing(
         this.state.animatedHeight,
         {
           toValue: 0,

diff --git a/test/index.test.js b/test/index.test.js
@@ -173,19 +173,22 @@ describe('DatePicker:', () => {
 
   it('onPressCancel', () => {
     const setModalVisible = sinon.spy();
-    const wrapper = shallow(<DatePicker />);
+    const onCloseModal = sinon.spy();
+    const wrapper = shallow(<DatePicker onCloseModal={onCloseModal}/>);
     const datePicker = wrapper.instance();
     datePicker.setModalVisible = setModalVisible;
 
     datePicker.onPressCancel();
 
     expect(setModalVisible.calledWith(false)).to.equal(true);
+    expect(onCloseModal.callCount).to.equal(1);
   });
 
   it('onPressConfirm', () => {
     const setModalVisible = sinon.spy();
     const datePicked = sinon.spy();
-    const wrapper = shallow(<DatePicker />);
+    const onCloseModal = sinon.spy();
+    const wrapper = shallow(<DatePicker onCloseModal={onCloseModal}/>);
     const datePicker = wrapper.instance();
     datePicker.setModalVisible = setModalVisible;
     datePicker.datePicked = datePicked;
@@ -194,6 +197,7 @@ describe('DatePicker:', () => {
 
     expect(setModalVisible.calledWith(false)).to.equal(true);
     expect(datePicked.callCount).to.equal(1);
+    expect(onCloseModal.callCount).to.equal(1);
   });
 
   it('getDate', () => {
@@ -277,7 +281,10 @@ describe('DatePicker:', () => {
   it('onPressDate', () => {
     Platform.OS = 'ios';
     const setModalVisible = sinon.spy();
-    const wrapper = shallow(<DatePicker date="2016-05-06" minDate="2016-04-01" maxDate="2016-06-01"/>);
+    const onOpenModal = sinon.spy();
+    const wrapper = shallow(
+      <DatePicker date="2016-05-06" minDate="2016-04-01" maxDate="2016-06-01" onOpenModal={onOpenModal}/>
+    );
     const datePicker = wrapper.instance();
     datePicker.setModalVisible = setModalVisible;
 
@@ -290,6 +297,7 @@ describe('DatePicker:', () => {
     datePicker.onPressDate();
     expect(wrapper.state('date')).to.deep.equal(datePicker.getDate());
     expect(setModalVisible.callCount).to.equal(1);
+    expect(onOpenModal.callCount).to.equal(1);
 
     Platform.OS = 'android';
     expect(datePicker.onPressDate).to.not.throw(Error);
@@ -331,6 +339,16 @@ describe('DatePicker:', () => {
 
     expect(datePicker.getTitleElement().props.children).to.equal(datePicker.getDateStr());
   });
+
+  it('`date` prop changes', () => {
+    const wrapper = mount(<DatePicker date="2016-06-04" />);
+
+    expect(wrapper.state('date')).to.deep.equal(new Date(2016, 5, 4));
+
+    wrapper.setProps({date: '2016-06-05'});
+
+    expect(wrapper.state('date')).to.deep.equal(new Date(2016, 5, 5));
+  });
 });