mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +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);
|
||||
});
|
||||
@ -113,8 +113,8 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识符，可以在事件参数中获取到 | _number \| string_ | - |
|
||||
| left-width | 指定左侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` |
|
||||
| right-width | 指定右侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` |
|
||||
| left-width | 指定左侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` |
|
||||
| right-width | 指定右侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` |
|
||||
| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise_ | - |
|
||||
| disabled | 是否禁用滑动 | _boolean_ | `false` |
|
||||
| stop-propagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` |
|
||||
|
||||
@ -52,11 +52,13 @@ export function triggerDrag(
|
||||
el: VueWrapper<ComponentPublicInstance> | HTMLElement,
|
||||
x = 0,
|
||||
y = 0
|
||||
): void {
|
||||
) {
|
||||
trigger(el, 'touchstart', 0, 0);
|
||||
trigger(el, 'touchmove', x / 4, y / 4);
|
||||
trigger(el, 'touchmove', x / 3, y / 3);
|
||||
trigger(el, 'touchmove', x / 2, y / 2);
|
||||
trigger(el, 'touchmove', x, y);
|
||||
trigger(el, 'touchend', x, y);
|
||||
|
||||
return nextTick();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user