mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 03:44:48 +00:00
[Improvement] Area: default option (#1272)
This commit is contained in:
neverland
@@ -13,8 +13,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item">山西省</li>
|
||||
@@ -52,12 +51,26 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">西城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">朝阳区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">丰台区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">石景山区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">海淀区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">门头沟区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">房山区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">通州区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">顺义区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">昌平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">大兴区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">怀柔区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">平谷区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
@@ -75,8 +88,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item">山西省</li>
|
||||
@@ -114,8 +126,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">杭州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">宁波市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">温州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">嘉兴市</li>
|
||||
@@ -130,8 +141,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">鹿城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">鹿城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">龙湾区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">瓯海区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">洞头区</li>
|
||||
@@ -159,8 +169,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item">山西省</li>
|
||||
@@ -198,7 +207,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
|
||||
207
packages/area/test/__snapshots__/index.spec.js.snap
Normal file
207
packages/area/test/__snapshots__/index.spec.js.snap
Normal file
@@ -0,0 +1,207 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">河东区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">河东区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 4`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<!---->
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
68
packages/area/test/index.spec.js
Normal file
68
packages/area/test/index.spec.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import Area from '..';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import areaList from '../demo/area.simple';
|
||||
import { later, triggerDrag } from '../../../test/utils';
|
||||
|
||||
const firstOption = [
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' }
|
||||
];
|
||||
|
||||
test('confirm & cancel event', () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(firstOption);
|
||||
expect(wrapper.emitted('cancel')[0][0]).toEqual(firstOption);
|
||||
});
|
||||
|
||||
test('watch areaList & code', async() => {
|
||||
const wrapper = mount(Area);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper.setProps({ areaList });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper.setProps({ value: '110117' });
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({
|
||||
value: '',
|
||||
areaList: null
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('change option', () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
}
|
||||
});
|
||||
|
||||
const columns = wrapper.findAll('.van-picker-column');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
triggerDrag(columns.at(0), 0, -100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
triggerDrag(columns.at(2), 0, -100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('getValues method', () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
},
|
||||
created() {
|
||||
expect(this.getValues()).toEqual([]);
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.getValues()).toEqual(firstOption);
|
||||
});
|
||||
Reference in New Issue
Block a user