[Improvement] Slider: add test cases (#1192)

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.setData({
-  wrapper.vm.currentCode = '1';
+    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');

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;
+  wrapper.setProps({ value });
-  expect(textarea.element.value).toEqual(longText);
+  expect(textarea.element.value).toEqual(value);
 });
 
 test('autosize object', done => {

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();
     });
   });

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);
 });
 

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', () => {

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', () => {

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);
+  trigger(track, 'touchstart', 0, 0);
-  triggerTouch(track, 'touchmove', 0, 10);
+  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();
 });

packages/slider/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`click bar 1`] = `
+<div class="van-slider van-slider--disabled">
+  <div class="van-slider__bar" style="width: 50%; height: 2px;"><span class="van-slider__button"></span></div>
+</div>
+`;
+
+exports[`click bar 2`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 100%; height: 2px;"><span class="van-slider__button"></span></div>
+</div>
+`;
+
+exports[`drag button 1`] = `
+<div class="van-slider van-slider--disabled">
+  <div class="van-slider__bar" style="width: 50%; height: 2px;"><span class="van-slider__button"></span></div>
+</div>
+`;
+
+exports[`drag button 2`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 100%; height: 2px;"><span class="van-slider__button"></span></div>
+</div>
+`;

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();
+});

test/utils.js

@@ -1,5 +1,5 @@
-// Trigger touch event
+// Trigger pointer/touch event
-export function triggerTouch(wrapper, eventName, x = 0, y = 0) {
+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);
+  trigger(el, 'touchstart', 0, 0);
-  triggerTouch(el, 'touchmove', x / 4, y / 4);
+  trigger(el, 'touchmove', x / 4, y / 4);
-  triggerTouch(el, 'touchmove', x / 3, y / 3);
+  trigger(el, 'touchmove', x / 3, y / 3);
-  triggerTouch(el, 'touchmove', x / 2, y / 2);
+  trigger(el, 'touchmove', x / 2, y / 2);
-  triggerTouch(el, 'touchmove', x, y);
+  trigger(el, 'touchmove', x, y);
-  triggerTouch(el, 'touchend', x, y);
+  trigger(el, 'touchend', x, y);
 }