mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Stepper): update test cases
This commit is contained in:
chenjiahan
parent
81494dfa13
commit
81f15e868a
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`button-size prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 2rem; height: 2rem;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 2rem;"><button type="button" class="van-stepper__plus" style="width: 2rem; height: 2rem;"></button></div>`;
|
||||
|
||||
exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" disabled="disabled" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
|
||||
|
||||
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`placeholder prop 1`] = `<input type="text" role="spinbutton" inputmode="decimal" placeholder="foo" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input">`;
|
||||
|
||||
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;
|
||||
47
src/stepper/test/__snapshots__/index.spec.js.snap
Normal file
47
src/stepper/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should disable buttons and input when using disabled prop 1`] = `
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
disabled
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-stepper__plus--disabled"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should update input height and button size when using button-size prop 1`] = `
|
||||
<div class="van-stepper">
|
||||
<button type="button"
|
||||
style="width: 2rem; height: 2rem;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
style="height: 2rem;"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 2rem; height: 2rem;"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -1,415 +0,0 @@
|
||||
import Stepper from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
|
||||
test('disabled stepper', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable stepper input', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disableInput: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable button', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 5,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
const minus = wrapper.find('.van-stepper__minus');
|
||||
|
||||
minus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('overlimit')).toBeFalsy();
|
||||
expect(wrapper.emitted('minus')).toBeTruthy();
|
||||
expect(wrapper.emitted('change')[0]).toEqual([4, { name: '' }]);
|
||||
|
||||
wrapper.setProps({
|
||||
disablePlus: true,
|
||||
disableMinus: true,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
minus.trigger('click');
|
||||
expect(wrapper.emitted('overlimit')[0][0]).toBe('minus');
|
||||
plus.trigger('click');
|
||||
expect(wrapper.emitted('overlimit')[1][0]).toBe('plus');
|
||||
});
|
||||
|
||||
test('click button', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
max: 2,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
const minus = wrapper.find('.van-stepper__minus');
|
||||
|
||||
plus.trigger('click');
|
||||
plus.trigger('click');
|
||||
minus.trigger('click');
|
||||
minus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('input')).toEqual([[2], [1]]);
|
||||
expect(wrapper.emitted('overlimit')).toEqual([['plus'], ['minus']]);
|
||||
});
|
||||
|
||||
test('long press', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
|
||||
plus.trigger('touchstart');
|
||||
plus.trigger('touchend');
|
||||
plus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(2);
|
||||
|
||||
plus.trigger('touchstart');
|
||||
await later(1000);
|
||||
plus.trigger('touchend');
|
||||
expect(wrapper.emitted('input')).toEqual([[2], [3], [4]]);
|
||||
});
|
||||
|
||||
test('disable long press', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
longPress: false,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
plus.trigger('touchstart');
|
||||
await later(800);
|
||||
plus.trigger('touchend');
|
||||
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('filter value during user input', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-stepper__input');
|
||||
input.element.value = '';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('');
|
||||
|
||||
input.element.value = 'a';
|
||||
input.trigger('input');
|
||||
expect(input.element.value).toEqual('');
|
||||
expect(wrapper.emitted('input')[1]).toBeFalsy();
|
||||
|
||||
input.element.value = '2';
|
||||
input.trigger('input');
|
||||
expect(input.element.value).toEqual('2');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual(2);
|
||||
});
|
||||
|
||||
test('shoud watch value and format it', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
max: 5,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setData({ value: 10 });
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(5);
|
||||
});
|
||||
|
||||
test('only allow interger', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
integer: true,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '2.2';
|
||||
input.trigger('input');
|
||||
input.trigger('blur');
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(2);
|
||||
});
|
||||
|
||||
test('input invalid value and blur', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: '',
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '.';
|
||||
input.trigger('input');
|
||||
input.trigger('blur');
|
||||
|
||||
expect(wrapper.emitted('input').pop()).toEqual([1]);
|
||||
});
|
||||
|
||||
test('stepper focus', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disableInput: true,
|
||||
},
|
||||
});
|
||||
const input = wrapper.find('input');
|
||||
|
||||
input.trigger('focus');
|
||||
expect(wrapper.emitted('focus')).toBeFalsy();
|
||||
|
||||
wrapper.setProps({ disableInput: false });
|
||||
input.trigger('focus');
|
||||
expect(wrapper.emitted('focus')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('stepper blur', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 5,
|
||||
min: 3,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', (value) => {
|
||||
wrapper.setProps({ value });
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('');
|
||||
|
||||
input.trigger('blur');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual(3);
|
||||
expect(wrapper.emitted('blur')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('input-width prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
inputWidth: '10rem',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('button-size prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
buttonSize: '2rem',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('async-change prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
asyncChange: true,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
plus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(2);
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual(2);
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '3';
|
||||
input.trigger('input');
|
||||
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual(3);
|
||||
expect(wrapper.emitted('change')[1][0]).toEqual(3);
|
||||
});
|
||||
|
||||
test('min value is 0', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
min: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '';
|
||||
input.trigger('input');
|
||||
input.trigger('blur');
|
||||
|
||||
expect(input.element.value).toEqual('0');
|
||||
});
|
||||
|
||||
test('show-plus & show-minus props', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
showPlus: false,
|
||||
showMinus: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should hide input when show-input prop is false', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
showInput: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('input').element.style.display).toEqual('none');
|
||||
});
|
||||
|
||||
test('decimal-length prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
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');
|
||||
});
|
||||
|
||||
test('should limit decimal-length when input', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
step: 0.2,
|
||||
decimalLength: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '1.25';
|
||||
input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual('1.2');
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const wrapper = mount(Stepper);
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
|
||||
plus.trigger('click');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual({ name: '' });
|
||||
|
||||
wrapper.setProps({ name: 'name' });
|
||||
plus.trigger('click');
|
||||
expect(wrapper.emitted('change')[1][1]).toEqual({ name: 'name' });
|
||||
});
|
||||
|
||||
test('change min and max', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
min: 10,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(10);
|
||||
|
||||
wrapper.setProps({
|
||||
min: 3,
|
||||
max: 8,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual(8);
|
||||
});
|
||||
|
||||
test('change decimal-length', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1.33,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
decimalLength: 1,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('1.3');
|
||||
});
|
||||
|
||||
test('change integer', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: 1.33,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
integer: true,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(1);
|
||||
});
|
||||
|
||||
test('placeholder prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
placeholder: 'foo',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-stepper__input')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('allow-empty prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
value: '',
|
||||
allowEmpty: true,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.trigger('blur');
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
|
||||
wrapper.setProps({ allowEmpty: false });
|
||||
input.trigger('blur');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(1);
|
||||
});
|
||||
424
src/stepper/test/index.spec.js
Normal file
424
src/stepper/test/index.spec.js
Normal file
@ -0,0 +1,424 @@
|
||||
import Stepper from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
|
||||
test('should disable buttons and input when using disabled prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should make input readonly when using disable-input prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disableInput: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('input').element.hasAttribute('readonly')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should emit minus event when clicking the minus button', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 2,
|
||||
},
|
||||
});
|
||||
const minus = wrapper.find('.van-stepper__minus');
|
||||
await minus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('overlimit')).toBeFalsy();
|
||||
expect(wrapper.emitted('minus')).toBeTruthy();
|
||||
expect(wrapper.emitted('change')[0]).toEqual([1, { name: '' }]);
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1);
|
||||
});
|
||||
|
||||
test('should emit plus event when clicking the plus button', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 2,
|
||||
},
|
||||
});
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
await plus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('overlimit')).toBeFalsy();
|
||||
expect(wrapper.emitted('plus')).toBeTruthy();
|
||||
expect(wrapper.emitted('change')[0]).toEqual([3, { name: '' }]);
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(3);
|
||||
});
|
||||
|
||||
test('should emit overlimit event when clicking disabled buttons', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
max: 1,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const minus = wrapper.find('.van-stepper__minus');
|
||||
await minus.trigger('click');
|
||||
expect(wrapper.emitted('overlimit')[0][0]).toEqual('minus');
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('overlimit')[1][0]).toEqual('plus');
|
||||
});
|
||||
|
||||
test('should disable plus button when disable-plus prop is true', async () => {
|
||||
const wrapper = mount(Stepper);
|
||||
const plus = wrapper.find('.van-stepper__plus').element;
|
||||
expect(plus.classList.contains('van-stepper__plus--disabled')).toBeFalsy();
|
||||
await wrapper.setProps({ disablePlus: true });
|
||||
expect(plus.classList.contains('van-stepper__plus--disabled')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should disable minus button when disable-minus prop is true', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 2,
|
||||
},
|
||||
});
|
||||
const minus = wrapper.find('.van-stepper__minus').element;
|
||||
expect(minus.classList.contains('van-stepper__minus--disabled')).toBeFalsy();
|
||||
await wrapper.setProps({ disableMinus: true });
|
||||
expect(minus.classList.contains('van-stepper__minus--disabled')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should limit max value when using max prop', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
max: 2,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
const minus = wrapper.find('.van-stepper__minus');
|
||||
|
||||
await plus.trigger('click');
|
||||
await plus.trigger('click');
|
||||
await minus.trigger('click');
|
||||
await minus.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([[2], [1]]);
|
||||
expect(wrapper.emitted('overlimit')).toEqual([['plus'], ['minus']]);
|
||||
});
|
||||
|
||||
test('should update value after long pressing', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
|
||||
await plus.trigger('touchstart');
|
||||
await plus.trigger('touchend');
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(2);
|
||||
|
||||
await plus.trigger('touchstart');
|
||||
await later(1000);
|
||||
await plus.trigger('touchend');
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([[2], [3], [4]]);
|
||||
});
|
||||
|
||||
test('should allow to disable long press', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
longPress: false,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
await plus.trigger('touchstart');
|
||||
await later(800);
|
||||
await plus.trigger('touchend');
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should filter invalid value during user input', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-stepper__input');
|
||||
input.element.value = '';
|
||||
await input.trigger('input');
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('');
|
||||
|
||||
input.element.value = 'a';
|
||||
await input.trigger('input');
|
||||
expect(input.element.value).toEqual('');
|
||||
expect(wrapper.emitted('update:modelValue')[1]).toBeFalsy();
|
||||
|
||||
input.element.value = '2';
|
||||
await input.trigger('input');
|
||||
expect(input.element.value).toEqual('2');
|
||||
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(2);
|
||||
});
|
||||
|
||||
test('shoud watch modelValue and format it', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
max: 5,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ modelValue: 10 });
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(5);
|
||||
});
|
||||
|
||||
test('should format value to integer when using integer prop', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
integer: true,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '2.2';
|
||||
await input.trigger('input');
|
||||
await input.trigger('blur');
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(2);
|
||||
});
|
||||
|
||||
test('should format value to default value when input is invalid', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: '',
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '.';
|
||||
await input.trigger('input');
|
||||
await input.trigger('blur');
|
||||
|
||||
expect(wrapper.emitted('update:modelValue').pop()).toEqual([1]);
|
||||
});
|
||||
|
||||
test('should emit focus event when input is focused', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
disableInput: true,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
await input.trigger('focus');
|
||||
expect(wrapper.emitted('focus')).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({ disableInput: false });
|
||||
await input.trigger('focus');
|
||||
expect(wrapper.emitted('focus')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should format input value when stepper blured', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
min: 3,
|
||||
modelValue: 5,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '';
|
||||
await input.trigger('input');
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('');
|
||||
|
||||
await input.trigger('blur');
|
||||
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(3);
|
||||
expect(wrapper.emitted('blur')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should update input width when using input-width prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
inputWidth: '10rem',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('input').element.style.width).toEqual('10rem');
|
||||
});
|
||||
|
||||
test('should update input height and button size when using button-size prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
buttonSize: '2rem',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should allow to using before-change prop', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1,
|
||||
beforeChange: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should allow min value to be 0', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
min: 0,
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '';
|
||||
await input.trigger('input');
|
||||
await input.trigger('blur');
|
||||
|
||||
expect(input.element.value).toEqual('0');
|
||||
});
|
||||
|
||||
test('should hide plus button when show-plus prop is false', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
showPlus: false,
|
||||
},
|
||||
});
|
||||
const plus = wrapper.find('.van-stepper__plus').element;
|
||||
expect(plus.style.display).toEqual('none');
|
||||
});
|
||||
|
||||
test('should hide minus button when show-minus prop is false', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
showMinus: false,
|
||||
},
|
||||
});
|
||||
const minus = wrapper.find('.van-stepper__minus').element;
|
||||
expect(minus.style.display).toEqual('none');
|
||||
});
|
||||
|
||||
test('should hide input when show-input prop is false', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
showInput: false,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('input').element.style.display).toEqual('none');
|
||||
});
|
||||
|
||||
test('should limit dicimal length when using decimal-length prop', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
step: 0.2,
|
||||
modelValue: 1,
|
||||
decimalLength: 2,
|
||||
},
|
||||
});
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1.20');
|
||||
});
|
||||
|
||||
test('should limit decimal-length when inputing', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
step: 0.2,
|
||||
modelValue: 1,
|
||||
decimalLength: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '1.25';
|
||||
await input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual('1.2');
|
||||
});
|
||||
|
||||
test('should emit change event with name when using name prop', async () => {
|
||||
const wrapper = mount(Stepper);
|
||||
const plus = wrapper.find('.van-stepper__plus');
|
||||
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual({ name: '' });
|
||||
|
||||
await wrapper.setProps({ name: 'name' });
|
||||
await plus.trigger('click');
|
||||
expect(wrapper.emitted('change')[1][1]).toEqual({ name: 'name' });
|
||||
});
|
||||
|
||||
test('should watch min and max props and format modelValue', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ min: 10 });
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(10);
|
||||
|
||||
await wrapper.setProps({
|
||||
min: 3,
|
||||
max: 8,
|
||||
});
|
||||
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(8);
|
||||
});
|
||||
|
||||
test('should watch decimal-length prop and format modelValue', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1.33,
|
||||
},
|
||||
});
|
||||
await wrapper.setProps({ decimalLength: 1 });
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1.3');
|
||||
});
|
||||
|
||||
test('should watch integer prop and format modelValue', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: 1.33,
|
||||
},
|
||||
});
|
||||
await wrapper.setProps({ integer: true });
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1);
|
||||
});
|
||||
|
||||
test('should render placeholder correctly', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
placeholder: 'foo',
|
||||
},
|
||||
});
|
||||
const input = wrapper.find('.van-stepper__input').element;
|
||||
expect(input.getAttribute('placeholder')).toEqual('foo');
|
||||
});
|
||||
|
||||
test('should allow input be to empty when using allow-empty prop', async () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
props: {
|
||||
modelValue: '',
|
||||
allowEmpty: true,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
await input.trigger('blur');
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({ allowEmpty: false });
|
||||
await input.trigger('blur');
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1);
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user