InputNumber, DatePicker: Clearify the logic of increase and decrease. Fix...

InputNumber, DatePicker: Clearify the logic of increase and decrease. Fix date-picker.spec.js bugs. (#2145)

* InputNumber: clearify the logic of increase and decrease.

* DatePicker: Fix test specs

packages/input-number/src/input-number.vue

@@ -27,6 +27,8 @@
       @blur="handleBlur"
       :disabled="disabled"
       :size="size"
+      :max="max"
+      :min="min"
       ref="input"
     >
         <template slot="prepend" v-if="$slots.prepend">
@@ -49,8 +51,7 @@
         bind(el, binding, vnode) {
           let interval = null;
           let startTime;
-
-          const handler = () => vnode.context[binding.expression]();
+          const handler = () => vnode.context[binding.expression].apply();
           const clear = () => {
             if (new Date() - startTime < 100) {
               handler();
@@ -81,7 +82,7 @@
       },
       min: {
         type: Number,
-        default: 0
+        default: -Infinity
       },
       value: {
         default: 0
@@ -104,6 +105,7 @@
         this.$emit('input', this.max);
         value = this.max;
       }
+
       return {
         currentValue: value
       };
@@ -124,69 +126,57 @@
     },
     computed: {
       minDisabled() {
-        return this.accSub(this.value, this.step) < this.min;
+        return this._decrease(this.value, this.step) < this.min;
       },
       maxDisabled() {
-        return this.accAdd(this.value, this.step) > this.max;
+        return this._increase(this.value, this.step) > this.max;
+      },
+      precision() {
+        const { value, step, getPrecision } = this;
+        return Math.max(getPrecision(value), getPrecision(step));
       }
     },
     methods: {
-      accSub(arg1, arg2) {
-        var r1, r2, m, n;
-        try {
-          r1 = arg1.toString().split('.')[1].length;
-        } catch (e) {
-          r1 = 0;
-        }
-        try {
-          r2 = arg2.toString().split('.')[1].length;
-        } catch (e) {
-          r2 = 0;
-        }
-        m = Math.pow(10, Math.max(r1, r2));
-        n = (r1 >= r2) ? r1 : r2;
-        return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
+      toPrecision(num, precision) {
+        if (precision === undefined) precision = this.precision;
+        return parseFloat(parseFloat(Number(num).toFixed(precision)));
       },
-      accAdd(arg1, arg2) {
-        var r1, r2, m, c;
-        try {
-          r1 = arg1.toString().split('.')[1].length;
-        } catch (e) {
-          r1 = 0;
+      getPrecision(value) {
+        const valueString = value.toString();
+        const dotPosition = valueString.indexOf('.');
+        let precision = 0;
+        if (dotPosition !== -1) {
+          precision = valueString.length - dotPosition - 1;
         }
-        try {
-          r2 = arg2.toString().split('.')[1].length;
-        } catch (e) {
-          r2 = 0;
-        }
-        c = Math.abs(r1 - r2);
-        m = Math.pow(10, Math.max(r1, r2));
-        if (c > 0) {
-          var cm = Math.pow(10, c);
-          if (r1 > r2) {
-            arg1 = Number(arg1.toString().replace('.', ''));
-            arg2 = Number(arg2.toString().replace('.', '')) * cm;
-          } else {
-            arg1 = Number(arg1.toString().replace('.', '')) * cm;
-            arg2 = Number(arg2.toString().replace('.', ''));
-          }
-        } else {
-          arg1 = Number(arg1.toString().replace('.', ''));
-          arg2 = Number(arg2.toString().replace('.', ''));
-        }
-        return (arg1 + arg2) / m;
+        return precision;
+      },
+      _increase(val, step) {
+        if (typeof val !== 'number') return this.currentValue;
+
+        const precisionFactor = Math.pow(10, this.precision);
+
+        return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
+      },
+      _decrease(val, step) {
+        if (typeof val !== 'number') return this.currentValue;
+
+        const precisionFactor = Math.pow(10, this.precision);
+
+        return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
       },
       increase() {
-        if (this.maxDisabled) return;
+        if (this.disabled || this.maxDisabled) return;
         const value = this.value || 0;
-        if (this.accAdd(value, this.step) > this.max || this.disabled) return;
-        this.currentValue = this.accAdd(value, this.step);
+        const newVal = this._increase(value, this.step);
+        if (newVal > this.max) return;
+        this.currentValue = newVal;
       },
       decrease() {
-        if (this.minDisabled) return;
+        if (this.disabled || this.minDisabled) return;
         const value = this.value || 0;
-        if (this.accSub(value, this.step) < this.min || this.disabled) return;
-        this.currentValue = this.accSub(value, this.step);
+        const newVal = this._decrease(value, this.step);
+        if (newVal < this.min) return;
+        this.currentValue = newVal;
       },
       handleBlur() {
         this.$refs.input.setCurrentValue(this.currentValue);

test/unit/specs/date-picker.spec.js

-import { createTest, createVue, destroyVM, triggerEvent } from '../util';
+import {
+  createTest,
+  createVue,
+  destroyVM,
+  triggerEvent
+} from '../util';
 import DatePicker from 'packages/date-picker';
 
 const DELAY = 10;
@@ -27,7 +32,9 @@ describe('DatePicker', () => {
         <el-date-picker ref="compo" v-model="value"></el-date-picker>
       `,
       data() {
-        return { value: '' };
+        return {
+          value: ''
+        };
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -50,13 +57,13 @@ describe('DatePicker', () => {
         arrowLeftElm.click();
       }
 
-      count = 18;
+      count = 20;
       while (--count) {
         arrowRightElm.click();
       }
       setTimeout(_ => {
         expect(spans[0].textContent).to.include(date.getFullYear() - 1);
-        expect(spans[1].textContent).to.include(date.getMonth() - 1);
+        expect(spans[1].textContent).to.include(date.getMonth() + 1);
         $el.querySelector('td.available').click();
         vm.$nextTick(_ => {
           expect(vm.value).to.exist;
@@ -72,7 +79,9 @@ describe('DatePicker', () => {
         <el-date-picker v-model="value" ref="compo"></el-date-picker>
       `,
       data() {
-        return { value: '' };
+        return {
+          value: ''
+        };
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -97,7 +106,9 @@ describe('DatePicker', () => {
         <el-date-picker v-model="value" ref="compo" :clearable="false"></el-date-picker>
       `,
       data() {
-        return { value: '' };
+        return {
+          value: ''
+        };
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -122,7 +133,9 @@ describe('DatePicker', () => {
         <el-date-picker ref="compo" v-model="value"></el-date-picker>
       `,
       data() {
-        return { value: '' };
+        return {
+          value: ''
+        };
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -163,7 +176,9 @@ describe('DatePicker', () => {
       },
 
       data() {
-        return { value: '' };
+        return {
+          value: ''
+        };
       }
     }, true);
 
@@ -178,8 +193,10 @@ describe('DatePicker', () => {
       picker.$el.querySelector('td.available').click();
       vm.$nextTick(_ => {
         const date = picker.date;
+        let month = date.getMonth() + 1;
+        if (month < 10) month = '0' + month;
 
-        expect(inputValue).to.equal(`${date.getFullYear()}-${date.getMonth() + 1 }`);
+        expect(inputValue).to.equal(`${date.getFullYear()}-${ month }`);
         done();
       });
     }, DELAY);
@@ -442,7 +459,10 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         panels[1].querySelector('td.available').click();
 
-        const { minDate, maxDate } = vm.picker;
+        const {
+          minDate,
+          maxDate
+        } = vm.picker;
         expect(minDate).to.exist;
         expect(maxDate).to.exist;
         expect(maxDate > minDate).to.true;
@@ -534,7 +554,10 @@ describe('DatePicker', () => {
         triggerEvent(rightCell, 'click', true);
 
         setTimeout(_ => {
-          const { minDate, maxDate } = vm.picker;
+          const {
+            minDate,
+            maxDate
+          } = vm.picker;
           const minMonth = minDate.getMonth();
           const maxMonth = maxDate.getMonth();
 
@@ -698,9 +721,10 @@ describe('DatePicker', () => {
       const prevMonthLen = vm.picker.$el.querySelectorAll('.prev-month').length;
       const firstWeek = vm.picker.$el.querySelector('tr th');
       const offset = i > 3 ? 7 - i : -i;
+      const day = FirstDayOfCurrentMonth === 0 ? 7 : FirstDayOfCurrentMonth;
 
       expect(firstWeek.innerText).to.equal(chineseWeek[i - 1]);
-      expect(prevMonthLen - FirstDayOfCurrentMonth).to.equal(offset);
+      expect(prevMonthLen - day).to.equal(offset);
       done();
     });
   });
@@ -712,15 +736,13 @@ describe('DatePicker', () => {
     let test;
     vm = createTest(DatePicker, {
       pickerOptions: {
-        shortcuts: [
-          {
-            text: '今天',
-            onClick(picker) {
-              test = true;
-              picker.$emit('pick', new Date());
-            }
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            test = true;
+            picker.$emit('pick', new Date());
           }
-        ]
+        }]
       }
     }, true);
     const input = vm.$el.querySelector('input');