alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland
2019-09-12 17:35:16 +08:00
committed by GitHub
parent f14043c18d
commit 927bf464bf
7 changed files with 174 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/stepper/test/__snapshots__/demo.spec.js.snap
+8 -2
View File
@@ -33,9 +33,9 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>异步变更</span></div>
<div class="van-cell__title"><span>固定小数位数</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
@@ -44,5 +44,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>异步变更</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
</div>
</div>
</div>
`;
src/stepper/test/__snapshots__/index.spec.js.snap
+1 -1
View File
@@ -4,6 +4,6 @@ exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="va
exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
exports[`input width 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
exports[`input-width prop 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus" style="display: none;"></button></div>`;
src/stepper/test/index.spec.js
+51 -25
View File
@@ -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');
});