diff --git a/packages/coupon-list/test/index.spec.js b/packages/coupon-list/test/index.spec.js
index f2d0ad9e9..b8051c604 100644
--- a/packages/coupon-list/test/index.spec.js
+++ b/packages/coupon-list/test/index.spec.js
@@ -6,10 +6,12 @@ test('exchange coupon', () => {
const wrapper = mount(CouponList);
const exchange = wrapper.find('.van-coupon-list__exchange');
- wrapper.vm.displayedCouponIndex = 1;
- wrapper.vm.currentCode = '1';
+ wrapper.setData({
+ currentCode: '1',
+ displayedCouponIndex: 1
+ });
exchange.trigger('click');
- wrapper.vm.code = '2';
+ wrapper.setProps({ code: '2' });
exchange.trigger('click');
expect(wrapper.emitted('exchange')[0][0]).toBe('1');
diff --git a/packages/field/test/field.spec.js b/packages/field/test/field.spec.js
index 55eab740a..242bd8817 100644
--- a/packages/field/test/field.spec.js
+++ b/packages/field/test/field.spec.js
@@ -45,11 +45,11 @@ test('keypress event', () => {
press(50);
expect(calls.length).toBe(1);
- wrapper.vm.value = '0.1';
+ wrapper.setProps({ value: '0.1' });
press(46);
expect(calls.length).toBe(2);
- wrapper.vm.type = 'text';
+ wrapper.setProps({ type: 'text' });
press(0);
expect(calls.length).toBe(2);
});
@@ -75,11 +75,11 @@ test('autosize textarea field', () => {
}
});
- const longText = '1'.repeat(20);
+ const value = '1'.repeat(20);
const textarea = wrapper.find('.van-field__control');
- wrapper.vm.value = longText;
- expect(textarea.element.value).toEqual(longText);
+ wrapper.setProps({ value });
+ expect(textarea.element.value).toEqual(value);
});
test('autosize object', done => {
diff --git a/packages/list/test/index.spec.js b/packages/list/test/index.spec.js
index 501138ae5..62cee2c6b 100644
--- a/packages/list/test/index.spec.js
+++ b/packages/list/test/index.spec.js
@@ -16,7 +16,7 @@ test('load event', done => {
setTimeout(() => {
expect(wrapper.emitted('input')[1]).toBeTruthy();
- wrapper.vm.$destroy();
+ wrapper.destroy();
done();
});
});
diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js
index 485517f9f..7be8d9ea5 100644
--- a/packages/number-keyboard/test/index.spec.js
+++ b/packages/number-keyboard/test/index.spec.js
@@ -19,7 +19,7 @@ test('click number key', () => {
mockTouch(wrapper, 'touchstart', 10);
mockTouch(wrapper, 'touchstart', 0);
mockTouch(wrapper, 'touchend', 0);
- wrapper.vm.$destroy();
+ wrapper.destroy();
expect(wrapper.emitted('input')[0][0]).toEqual(1);
});
diff --git a/packages/picker/test/index.spec.js b/packages/picker/test/index.spec.js
index d73c00b7e..f9bfccf3a 100644
--- a/packages/picker/test/index.spec.js
+++ b/packages/picker/test/index.spec.js
@@ -1,7 +1,7 @@
import Picker from '../';
import PickerColumn from '../PickerColumn';
import { mount } from '@vue/test-utils';
-import { triggerDrag } from '../../../test/touch-utils';
+import { triggerDrag } from '../../../test/utils';
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
const columns = [
@@ -27,7 +27,7 @@ test('simple columns confirm & cancel event', () => {
wrapper.find('.van-picker__cancel').trigger('click');
expect(wrapper.emitted('confirm')[0]).toEqual(['1990', 0]);
expect(wrapper.emitted('cancel')[0]).toEqual(['1990', 0]);
- wrapper.vm.$destroy();
+ wrapper.destroy();
});
test('multiple columns confirm & cancel event', () => {
diff --git a/packages/popup/test/index.spec.js b/packages/popup/test/index.spec.js
index 7f45eec3f..a2b8b604b 100644
--- a/packages/popup/test/index.spec.js
+++ b/packages/popup/test/index.spec.js
@@ -1,13 +1,13 @@
import Vue from 'vue';
import Popup from '../';
import { mount, TransitionStub } from '@vue/test-utils';
-import { triggerDrag } from '../../../test/touch-utils';
+import { triggerDrag } from '../../../test/utils';
Vue.component('transition', TransitionStub);
let wrapper;
afterEach(() => {
- wrapper.vm.$destroy();
+ wrapper.destroy();
});
test('lazy render', () => {
diff --git a/packages/pull-refresh/test/index.spec.js b/packages/pull-refresh/test/index.spec.js
index 85e15c24f..45ccd9d04 100644
--- a/packages/pull-refresh/test/index.spec.js
+++ b/packages/pull-refresh/test/index.spec.js
@@ -1,6 +1,6 @@
import PullRefresh from '..';
import { mount } from '@vue/test-utils';
-import { triggerTouch, triggerDrag } from '../../../test/touch-utils';
+import { trigger, triggerDrag } from '../../../test/utils';
test('change head content when pulling down', () => {
const wrapper = mount(PullRefresh, {
@@ -16,16 +16,16 @@ test('change head content when pulling down', () => {
const track = wrapper.find('.van-pull-refresh__track');
// pulling
- triggerTouch(track, 'touchstart', 0, 0);
- triggerTouch(track, 'touchmove', 0, 10);
+ trigger(track, 'touchstart', 0, 0);
+ trigger(track, 'touchmove', 0, 10);
expect(wrapper.html()).toMatchSnapshot();
// loosing
- triggerTouch(track, 'touchmove', 0, 100);
+ trigger(track, 'touchmove', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
// loading
- triggerTouch(track, 'touchend', 0, 100);
+ trigger(track, 'touchend', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
// still loading
@@ -65,7 +65,7 @@ test('not in page top', () => {
// ignore touch event when not at page top
triggerDrag(track, 0, 100);
window.scrollTop = 0;
- triggerTouch(track, 'touchmove', 0, 100);
+ trigger(track, 'touchmove', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
});
diff --git a/packages/slider/test/__snapshots__/index.spec.js.snap b/packages/slider/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..0be3d7053
--- /dev/null
+++ b/packages/slider/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`click bar 1`] = `
+
+`;
+
+exports[`click bar 2`] = `
+
+`;
+
+exports[`drag button 1`] = `
+
+`;
+
+exports[`drag button 2`] = `
+
+`;
diff --git a/packages/slider/test/index.spec.js b/packages/slider/test/index.spec.js
new file mode 100644
index 000000000..04b2e63b7
--- /dev/null
+++ b/packages/slider/test/index.spec.js
@@ -0,0 +1,47 @@
+import Slider from '..';
+import { mount } from '@vue/test-utils';
+import { triggerDrag, trigger } from '../../../test/utils';
+
+Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100, left: 0 }));
+
+test('drag button', () => {
+ const wrapper = mount(Slider, {
+ attachToDocument: true,
+ propsData: {
+ 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();
+
+ wrapper.setData({ disabled: false });
+ triggerDrag(button, 50, 0);
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+it('click bar', () => {
+ const wrapper = mount(Slider, {
+ propsData: {
+ 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();
+});
diff --git a/test/touch-utils.js b/test/utils.js
similarity index 61%
rename from test/touch-utils.js
rename to test/utils.js
index 1b742289d..b79b2fd43 100644
--- a/test/touch-utils.js
+++ b/test/utils.js
@@ -1,5 +1,5 @@
-// Trigger touch event
-export function triggerTouch(wrapper, eventName, x = 0, y = 0) {
+// Trigger pointer/touch event
+export function trigger(wrapper, eventName, x = 0, y = 0) {
const el = wrapper.element ? wrapper.element : wrapper;
const touch = {
identifier: Date.now(),
@@ -19,16 +19,18 @@ export function triggerTouch(wrapper, eventName, x = 0, y = 0) {
event.touches = [touch];
event.targetTouches = [touch];
event.changedTouches = [touch];
+ event.clientX = x;
+ event.clientY = y;
el.dispatchEvent(event);
}
// simulate drag gesture
export function triggerDrag(el, x = 0, y = 0) {
- triggerTouch(el, 'touchstart', 0, 0);
- triggerTouch(el, 'touchmove', x / 4, y / 4);
- triggerTouch(el, 'touchmove', x / 3, y / 3);
- triggerTouch(el, 'touchmove', x / 2, y / 2);
- triggerTouch(el, 'touchmove', x, y);
- triggerTouch(el, 'touchend', x, y);
+ 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);
}