[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,144 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div class="van-ellipsis van-picker__title">标题</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>城市</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="选择城市" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,58 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`column watch default index 1`] = `
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`column watch default index 2`] = `
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>Custom title<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,194 @@
|
||||
import Picker from '..';
|
||||
import PickerColumn from '../PickerColumn';
|
||||
import { mount, triggerDrag, later } from '../../../test/utils';
|
||||
|
||||
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
||||
const columns = [
|
||||
{
|
||||
values: ['vip', 'normal'],
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: simpleColumn,
|
||||
className: 'column2'
|
||||
}
|
||||
];
|
||||
|
||||
test('simple columns confirm & cancel event', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true,
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual(['1990', 0]);
|
||||
expect(wrapper.emitted('cancel')[0]).toEqual(['1990', 0]);
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
test('multiple columns confirm & cancel event', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual([[], []]);
|
||||
expect(wrapper.emitted('cancel')[0]).toEqual([[], []]);
|
||||
});
|
||||
|
||||
test('set picker values', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns
|
||||
}
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
|
||||
expect(vm.getColumnValues(-1)).toEqual(undefined);
|
||||
expect(vm.getColumnValues(1).length).toEqual(6);
|
||||
expect(vm.getColumnValue(1)).toEqual('1990');
|
||||
|
||||
vm.setColumnValue(0, 'normal');
|
||||
expect(vm.getColumnValue(0)).toEqual('normal');
|
||||
|
||||
vm.setColumnIndex(0, 0);
|
||||
expect(vm.getColumnValue(0)).toEqual('vip');
|
||||
|
||||
vm.setColumnValue(1, '1991');
|
||||
expect(vm.getColumnValue(1)).toEqual('1991');
|
||||
|
||||
vm.setColumnValues(0, ['vip', 'normal', 'other']);
|
||||
expect(vm.getColumnValues(0).length).toEqual(3);
|
||||
expect(vm.getValues().length).toEqual(2);
|
||||
|
||||
vm.setColumnValues(-1, []);
|
||||
expect(vm.getValues().length).toEqual(2);
|
||||
|
||||
vm.setValues(['vip', '1992']);
|
||||
expect(vm.getColumnIndex(1)).toEqual(2);
|
||||
expect(vm.getColumnIndex(2)).toEqual(undefined);
|
||||
expect(vm.getIndexes(2)).toEqual([0, 2]);
|
||||
|
||||
vm.setIndexes([1, 4]);
|
||||
expect(vm.getColumnValue(1)).toEqual('1994');
|
||||
expect(vm.getColumnValue(2)).toEqual(undefined);
|
||||
});
|
||||
|
||||
test('drag columns', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns
|
||||
}
|
||||
});
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
|
||||
});
|
||||
|
||||
test('drag simple columns', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
||||
});
|
||||
|
||||
test('column watch default index', async () => {
|
||||
const disabled = { disabled: true, text: 1 };
|
||||
const wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
initialOptions: [disabled, ...simpleColumn],
|
||||
valueKey: 'text',
|
||||
itemHeight: 50
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.vm.defaultIndex = 2;
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render title slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<picker show-toolbar>
|
||||
<template v-slot:title>Custom title</template>
|
||||
</picker>
|
||||
`,
|
||||
components: {
|
||||
Picker
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('simulation finger swipe again before transitionend', () => {
|
||||
// mock getComputedStyle
|
||||
// see: https://github.com/jsdom/jsdom/issues/2588
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
window.getComputedStyle = ele => {
|
||||
const style = originGetComputedStyle(ele);
|
||||
|
||||
return {
|
||||
...style,
|
||||
transform: 'matrix(1, 0, 0, 1, 0, -5)'
|
||||
};
|
||||
};
|
||||
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
|
||||
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
||||
});
|
||||
|
||||
test('click column\'s item', () => {
|
||||
const columns = [
|
||||
{ text: '杭州' },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州', disabled: true },
|
||||
{ text: '嘉兴', disabled: true }
|
||||
];
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.findAll('.van-picker-column__item').at(3).trigger('click');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual(columns[1]);
|
||||
});
|
||||
|
||||
test('toolbar-position prop', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true,
|
||||
toolbarPosition: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
Reference in New Issue
Block a user