feat(Stepper): add decimal-length prop (#4443)

src/stepper/test/index.spec.js

@@ -60,35 +60,45 @@ test('long press', async () => {
   expect(wrapper.emitted('input')).toEqual([[2], [3], [4]]);
 });
 
-test('correct value when value is not correct', () => {
+test('filter value during user input', () => {
   const wrapper = mount(Stepper, {
     propsData: {
-      value: 50,
-      max: 30,
-      min: 10
+      value: 1
     }
   });
 
-  const input = wrapper.find('input');
-  input.element.value = 1;
-  input.trigger('input');
-  input.element.value = 'abc';
-  input.trigger('input');
-  wrapper.setData({ value: 'abc' });
-  input.trigger('input');
-  wrapper.setData({ value: '' });
-  input.trigger('input');
-  wrapper.setData({ value: 40 });
-  input.trigger('input');
-  wrapper.setData({ value: 30 });
+  const input = wrapper.find('.van-stepper__input');
+  input.element.value = '';
   input.trigger('input');
+  expect(wrapper.emitted('input')).toBeFalsy();
 
-  expect(wrapper.emitted('input')).toEqual([[30], [1], [0], [40], [30]]);
+  input.element.value = 'a';
+  input.trigger('input');
+  expect(input.element.value).toEqual('');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  input.element.value = '2';
+  input.trigger('input');
+  expect(input.element.value).toEqual('2');
+  expect(wrapper.emitted('input')[0][0]).toEqual('2');
+});
+
+test('shoud watch value and format it', () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: 1,
+      max: 5
+    }
+  });
+
+  wrapper.setData({ value: 10 });
+  expect(wrapper.emitted('input')[0][0]).toEqual(5);
 });
 
 test('only allow interger', () => {
   const wrapper = mount(Stepper, {
     propsData: {
+      value: 1,
       integer: true
     }
   });
@@ -98,7 +108,8 @@ test('only allow interger', () => {
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')).toEqual([[1]]);
+  expect(wrapper.emitted('input')[0][0]).toEqual('1');
+  expect(wrapper.emitted('input')[1][0]).toEqual(1);
 });
 
 test('stepper focus', () => {
@@ -121,16 +132,15 @@ test('stepper blur', () => {
   });
 
   const input = wrapper.find('input');
-  input.trigger('blur');
   input.element.value = '';
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')).toEqual([[0], [3]]);
+  expect(wrapper.emitted('input')[0][0]).toEqual(3);
   expect(wrapper.emitted('blur')).toBeTruthy();
 });
 
-test('input width', () => {
+test('input-width prop', () => {
   const wrapper = mount(Stepper, {
     propsData: {
       inputWidth: '10rem'
@@ -139,7 +149,7 @@ test('input width', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('async change', () => {
+test('async-change prop', () => {
   const wrapper = mount(Stepper, {
     propsData: {
       value: 1,
@@ -157,8 +167,8 @@ test('async change', () => {
   input.element.value = '3';
   input.trigger('input');
 
-  expect(wrapper.emitted('input')[1][0]).toEqual(3);
-  expect(wrapper.emitted('change')[1][0]).toEqual(3);
+  expect(wrapper.emitted('input')[1][0]).toEqual('3');
+  expect(wrapper.emitted('change')[1][0]).toEqual('3');
 });
 
 test('min value is 0', () => {
@@ -174,7 +184,7 @@ test('min value is 0', () => {
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')[0][0]).toEqual(0);
+  expect(input.element.value).toEqual('0');
 });
 
 test('show-plus & show-minus props', () => {
@@ -187,3 +197,19 @@ test('show-plus & show-minus props', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('decimal-length prop', () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: 1,
+      step: 0.2,
+      decimalLength: 2
+    }
+  });
+
+  expect(wrapper.emitted('input')[0][0]).toEqual('1.00');
+
+  const plus = wrapper.find('.van-stepper__plus');
+  plus.trigger('click');
+  expect(wrapper.emitted('input')[1][0]).toEqual('1.20');
+});