mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Slider): update test cases
This commit is contained in:
chenjiahan
parent
eb47a3948d
commit
fd8ac0a582
@ -1,81 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`bar-height prop 1`] = `
|
|
||||||
<div class="van-slider" style="height: 10px;">
|
|
||||||
<div class="van-slider__bar" style="width: 50%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`button-size prop 1`] = `
|
|
||||||
<div class="van-slider">
|
|
||||||
<div class="van-slider__bar" style="width: 50%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button" style="width: 10px; height: 10px;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`click bar 1`] = `
|
|
||||||
<div class="van-slider van-slider--disabled">
|
|
||||||
<div class="van-slider__bar" style="width: 50%;">
|
|
||||||
<div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`click bar 2`] = `
|
|
||||||
<div class="van-slider">
|
|
||||||
<div class="van-slider__bar" style="width: 100%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`click vertical 1`] = `
|
|
||||||
<div class="van-slider van-slider--vertical">
|
|
||||||
<div class="van-slider__bar" style="height: 100%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`drag button 1`] = `
|
|
||||||
<div class="van-slider van-slider--disabled">
|
|
||||||
<div class="van-slider__bar" style="width: 50%;">
|
|
||||||
<div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`drag button 2`] = `
|
|
||||||
<div class="van-slider">
|
|
||||||
<div class="van-slider__bar" style="width: 100%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`drag button vertical 1`] = `
|
|
||||||
<div class="van-slider van-slider--vertical">
|
|
||||||
<div class="van-slider__bar" style="height: 100%;">
|
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
|
|
||||||
<div class="van-slider__button"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import Slider from '..';
|
|
||||||
import {
|
|
||||||
mount,
|
|
||||||
trigger,
|
|
||||||
triggerDrag,
|
|
||||||
mockGetBoundingClientRect,
|
|
||||||
} from '../../../test';
|
|
||||||
|
|
||||||
function mockRect(vertical) {
|
|
||||||
return mockGetBoundingClientRect({
|
|
||||||
width: vertical ? 0 : 100,
|
|
||||||
height: vertical ? 100 : 0,
|
|
||||||
top: vertical ? 0 : 100,
|
|
||||||
left: vertical ? 100 : 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
test('drag button', () => {
|
|
||||||
const restoreMock = mockRect();
|
|
||||||
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
});
|
|
||||||
|
|
||||||
const button = wrapper.find('.van-slider__button');
|
|
||||||
triggerDrag(button, 50, 0);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
expect(wrapper.emitted('drag-start')).toBeFalsy();
|
|
||||||
expect(wrapper.emitted('drag-end')).toBeFalsy();
|
|
||||||
|
|
||||||
wrapper.setData({ disabled: false });
|
|
||||||
trigger(button, 'touchstart', 0, 0);
|
|
||||||
trigger(button, 'touchend', 0, 0);
|
|
||||||
triggerDrag(button, 50, 0);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
expect(wrapper.emitted('drag-start')).toBeTruthy();
|
|
||||||
expect(wrapper.emitted('drag-end')).toBeTruthy();
|
|
||||||
|
|
||||||
restoreMock();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click bar', () => {
|
|
||||||
const restoreMock = mockRect();
|
|
||||||
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
});
|
|
||||||
|
|
||||||
trigger(wrapper, 'click', 100, 0);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
wrapper.setData({ disabled: false });
|
|
||||||
trigger(wrapper, 'click', 100, 0);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
restoreMock();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('drag button vertical', () => {
|
|
||||||
const restoreMock = mockRect(true);
|
|
||||||
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
vertical: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
});
|
|
||||||
|
|
||||||
const button = wrapper.find('.van-slider__button');
|
|
||||||
triggerDrag(button, 0, 50);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
restoreMock();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click vertical', () => {
|
|
||||||
const restoreMock = mockRect(true);
|
|
||||||
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
vertical: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
});
|
|
||||||
|
|
||||||
trigger(wrapper, 'click', 0, 100);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
restoreMock();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('bar-height prop', () => {
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
barHeight: 10,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('button-size prop', () => {
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
buttonSize: 10,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should not emit change event when value not changed', () => {
|
|
||||||
const wrapper = mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: 50,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input(value) {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
trigger(wrapper, 'click', 100, 0);
|
|
||||||
trigger(wrapper, 'click', 100, 0);
|
|
||||||
|
|
||||||
expect(wrapper.emitted('change').length).toEqual(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should format initial value', (done) => {
|
|
||||||
mount(Slider, {
|
|
||||||
props: {
|
|
||||||
value: null,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input(value) {
|
|
||||||
expect(value).toEqual(0);
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
176
src/slider/test/index.spec.js
Normal file
176
src/slider/test/index.spec.js
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
import Slider from '..';
|
||||||
|
import {
|
||||||
|
mount,
|
||||||
|
trigger,
|
||||||
|
triggerDrag,
|
||||||
|
mockGetBoundingClientRect,
|
||||||
|
} from '../../../test';
|
||||||
|
|
||||||
|
function mockRect(vertical) {
|
||||||
|
return mockGetBoundingClientRect({
|
||||||
|
width: vertical ? 0 : 100,
|
||||||
|
height: vertical ? 100 : 0,
|
||||||
|
top: vertical ? 0 : 100,
|
||||||
|
left: vertical ? 100 : 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test('should emit "update:modelValue" event after dragging button', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
triggerDrag(button, 50, 0);
|
||||||
|
expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit "update:modelValue" event after clicking slider', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
trigger(wrapper, 'click', 100, 0);
|
||||||
|
expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit drag-start event when start dragging', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
trigger(button, 'touchstart');
|
||||||
|
trigger(button, 'touchmove');
|
||||||
|
expect(wrapper.emitted('drag-start')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit drag-end event when end dragging', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
trigger(button, 'touchstart');
|
||||||
|
trigger(button, 'touchmove');
|
||||||
|
expect(wrapper.emitted('drag-end')).toBeFalsy();
|
||||||
|
trigger(button, 'touchend');
|
||||||
|
expect(wrapper.emitted('drag-end')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not allow to drag slider when disabled', async () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
triggerDrag(button, 50, 0);
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not allow to click slider when disabled', async () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
trigger(wrapper, 'click', 100, 0);
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should allow to drag vertical slider', () => {
|
||||||
|
const restoreMock = mockRect(true);
|
||||||
|
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
vertical: true,
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
triggerDrag(button, 0, 50);
|
||||||
|
expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
|
||||||
|
|
||||||
|
restoreMock();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change slider bar height when using bar-height prop', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
barHeight: 10,
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.element.style.height).toEqual('10px');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shoud change button size when using button-size prop', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
buttonSize: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button').element;
|
||||||
|
expect(button.style.width).toEqual('10px');
|
||||||
|
expect(button.style.height).toEqual('10px');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit "update:modelValue" event after clicking vertical slider', () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
vertical: true,
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
trigger(wrapper, 'click', 0, 100);
|
||||||
|
expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should format initial value', (done) => {
|
||||||
|
mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: null,
|
||||||
|
'onUpdate:modelValue': (value) => {
|
||||||
|
expect(value).toEqual(0);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit change event when value not changed', async () => {
|
||||||
|
const wrapper = mount(Slider, {
|
||||||
|
props: {
|
||||||
|
modelValue: 50,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = wrapper.find('.van-slider__button');
|
||||||
|
trigger(button, 'touchstart');
|
||||||
|
trigger(wrapper, 'click', 100, 0);
|
||||||
|
expect(wrapper.emitted('change').length).toEqual(1);
|
||||||
|
|
||||||
|
await wrapper.setProps({ modelValue: 100 });
|
||||||
|
trigger(button, 'touchstart');
|
||||||
|
trigger(wrapper, 'click', 100, 0);
|
||||||
|
|
||||||
|
expect(wrapper.emitted('change').length).toEqual(1);
|
||||||
|
});
|
||||||
@ -52,11 +52,13 @@ export function triggerDrag(
|
|||||||
el: VueWrapper<ComponentPublicInstance> | HTMLElement,
|
el: VueWrapper<ComponentPublicInstance> | HTMLElement,
|
||||||
x = 0,
|
x = 0,
|
||||||
y = 0
|
y = 0
|
||||||
): void {
|
) {
|
||||||
trigger(el, 'touchstart', 0, 0);
|
trigger(el, 'touchstart', 0, 0);
|
||||||
trigger(el, 'touchmove', x / 4, y / 4);
|
trigger(el, 'touchmove', x / 4, y / 4);
|
||||||
trigger(el, 'touchmove', x / 3, y / 3);
|
trigger(el, 'touchmove', x / 3, y / 3);
|
||||||
trigger(el, 'touchmove', x / 2, y / 2);
|
trigger(el, 'touchmove', x / 2, y / 2);
|
||||||
trigger(el, 'touchmove', x, y);
|
trigger(el, 'touchmove', x, y);
|
||||||
trigger(el, 'touchend', x, y);
|
trigger(el, 'touchend', x, y);
|
||||||
|
|
||||||
|
return nextTick();
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user