blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2018-05-30 14:57:14 +08:00 committed by GitHub
parent 4614260e1c
commit 92c108e245
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 104 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/coupon-list/test/index.spec.js
View File

@ -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');

10
packages/field/test/field.spec.js
View File

@ -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 => {

2
packages/list/test/index.spec.js
View File

@ -16,7 +16,7 @@ test('load event', done => {
setTimeout(() => {
expect(wrapper.emitted('input')[1]).toBeTruthy();
wrapper.vm.$destroy();
wrapper.destroy();
done();
});
});

2
packages/number-keyboard/test/index.spec.js
View File

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

4
packages/picker/test/index.spec.js
View File

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

4
packages/popup/test/index.spec.js
View File

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

12
packages/pull-refresh/test/index.spec.js
View File

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

25
packages/slider/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -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>
`;

47
packages/slider/test/index.spec.js Normal file
View File

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

18
test/touch-utils.js → test/utils.js
View File

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