diff --git a/src/slider/test/__snapshots__/index.legacy.js.snap b/src/slider/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index e63f4f6d0..000000000
--- a/src/slider/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`bar-height prop 1`] = `
-
-`;
-
-exports[`button-size prop 1`] = `
-
-`;
-
-exports[`click bar 1`] = `
-
-`;
-
-exports[`click bar 2`] = `
-
-`;
-
-exports[`click vertical 1`] = `
-
-`;
-
-exports[`drag button 1`] = `
-
-`;
-
-exports[`drag button 2`] = `
-
-`;
-
-exports[`drag button vertical 1`] = `
-
-`;
diff --git a/src/slider/test/index.legacy.js b/src/slider/test/index.legacy.js
deleted file mode 100644
index a0d49d4a0..000000000
--- a/src/slider/test/index.legacy.js
+++ /dev/null
@@ -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();
- },
- },
- });
-});
diff --git a/src/slider/test/index.spec.js b/src/slider/test/index.spec.js
new file mode 100644
index 000000000..9cc3c7cce
--- /dev/null
+++ b/src/slider/test/index.spec.js
@@ -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);
+});
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index dea2b6c16..125cbc7ae 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -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` |
diff --git a/test/event.ts b/test/event.ts
index 71ce14608..a193dd03a 100644
--- a/test/event.ts
+++ b/test/event.ts
@@ -52,11 +52,13 @@ export function triggerDrag(
el: VueWrapper | 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();
}