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

test(Picker): add demo test

Browse Source
This commit is contained in:
nemo-shen 2021-12-12 23:19:10 +08:00 committed by neverland
parent 459bd1652f
commit 460607c2c4
9 changed files with 808 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -153,6 +153,7 @@
"van-collapse-demo": "./dist/collapse/demo/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index",
"van-picker-demo": "./dist/picker/demo/index",
"van-overlay": "./dist/overlay/index",
"van-overlay-demo": "./dist/overlay/demo/index",
"van-circle": "./dist/circle/index",

47
example/pages/picker/index.js
View File

@ -1,48 +1,3 @@
import Page from '../../common/page';
import Toast from '../../dist/toast/toast';
Page({
data: {
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
column2: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州']
},
column4: [
{
values: ['浙江', '福建'],
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
className: 'column2',
defaultIndex: 2
}
]
},
onChange1(event) {
const { value, index } = event.detail;
Toast(`Value: ${value}, Index：${index}`);
},
onConfirm(event) {
const { value, index } = event.detail;
Toast(`Value: ${value}, Index：${index}`);
},
onCancel() {
Toast('取消');
},
onChange2(event) {
const { picker, value } = event.detail;
picker.setColumnValues(1, this.data.column3[value[0]]);
getApp().picker = picker;
}
});
Page();

46
example/pages/picker/index.wxml
View File

@ -1,45 +1 @@
<demo-block title="基础用法">
<van-picker
columns="{{ column1 }}"
bind:change="onChange1"
/>
</demo-block>
<demo-block title="默认选中项">
<van-picker
columns="{{ column1 }}"
default-index="{{ 2 }}"
bind:change="onChange1"
/>
</demo-block>
<demo-block title="展示顶部栏">
<van-picker
show-toolbar
title="标题"
columns="{{ column1 }}"
bind:change="onChange1"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
</demo-block>
<demo-block title="多列联动">
<van-picker
columns="{{ column4 }}"
bind:change="onChange2"
/>
</demo-block>
<demo-block title="禁用选项">
<van-picker columns="{{ column2 }}" />
</demo-block>
<demo-block title="加载状态">
<van-picker
loading
columns="{{ column4 }}"
/>
</demo-block>
<van-toast id="van-toast" />
<van-picker-demo />

0
example/pages/picker/index.wxss
View File

8
packages/picker/demo/index.json Normal file
View File

@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"van-toast": "../../toast/index",
"van-picker": "../../picker/index",
"demo-block": "../../../example/components/demo-block/index"
}
}

59
packages/picker/demo/index.ts Normal file
View File

@ -0,0 +1,59 @@
import { VantComponent } from '../../common/component';
import Toast from '../../toast/toast';
VantComponent({
data: {
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
column2: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' },
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
},
column4: [
{
values: ['浙江', '福建'],
className: 'column1',
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
className: 'column2',
defaultIndex: 2,
},
],
},
methods: {
onChange1(event) {
const { value, index } = event.detail;
Toast({
context: this,
message: `Value: ${value}, Index：${index}`,
});
},
onConfirm(event) {
const { value, index } = event.detail;
Toast({
context: this,
message: `Value: ${value}, Index：${index}`,
});
},
onCancel() {
Toast({
context: this,
message: '取消',
});
},
onChange2(event) {
const { picker, value } = event.detail;
picker.setColumnValues(1, this.data.column3[value[0]]);
getApp().picker = picker;
},
},
});

45
packages/picker/demo/index.wxml Normal file
View File

@ -0,0 +1,45 @@
<demo-block title="基础用法">
<van-picker
columns="{{ column1 }}"
bind:change="onChange1"
/>
</demo-block>
<demo-block title="默认选中项">
<van-picker
columns="{{ column1 }}"
default-index="{{ 2 }}"
bind:change="onChange1"
/>
</demo-block>
<demo-block title="展示顶部栏">
<van-picker
show-toolbar
title="标题"
columns="{{ column1 }}"
bind:change="onChange1"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
</demo-block>
<demo-block title="多列联动">
<van-picker
columns="{{ column4 }}"
bind:change="onChange2"
/>
</demo-block>
<demo-block title="禁用选项">
<van-picker columns="{{ column2 }}" />
</demo-block>
<demo-block title="加载状态">
<van-picker
loading
columns="{{ column4 }}"
/>
</demo-block>
<van-toast id="van-toast" />

682
packages/picker/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,682 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render demo and match snapshot 1`] = `
<main>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
基础用法
</wx-view>
<van-picker
bind:change="onChange1"
>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{3}}"
style="height: 44px"
bind:tap="onClickItem"
>
嘉兴
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{4}}"
style="height: 44px"
bind:tap="onClickItem"
>
湖州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
默认选中项
</wx-view>
<van-picker
bind:change="onChange1"
>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{3}}"
style="height: 44px"
bind:tap="onClickItem"
>
嘉兴
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{4}}"
style="height: 44px"
bind:tap="onClickItem"
>
湖州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
展示顶部栏
</wx-view>
<van-picker
bind:cancel="onCancel"
bind:change="onChange1"
bind:confirm="onConfirm"
>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__toolbar toolbar-class"
>
<wx-view
class="van-picker__cancel"
data-type="cancel"
hoverClass="van-picker__cancel--hover"
hoverStayTime="70"
bind:tap="emit"
>
取消
</wx-view>
<wx-view
class="van-picker__title van-ellipsis"
>
标题
</wx-view>
<wx-view
class="van-picker__confirm"
data-type="confirm"
hoverClass="van-picker__confirm--hover"
hoverStayTime="70"
bind:tap="emit"
>
确认
</wx-view>
</wx-view>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{3}}"
style="height: 44px"
bind:tap="onClickItem"
>
嘉兴
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{4}}"
style="height: 44px"
bind:tap="onClickItem"
>
湖州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
多列联动
</wx-view>
<van-picker
bind:change="onChange2"
>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
浙江
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
福建
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{1}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{3}}"
style="height: 44px"
bind:tap="onClickItem"
>
嘉兴
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{4}}"
style="height: 44px"
bind:tap="onClickItem"
>
湖州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
禁用选项
</wx-view>
<van-picker>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected active-class"
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
加载状态
</wx-view>
<van-picker>
<wx-view
class="van-picker custom-class"
>
<wx-view
class="van-picker__loading"
>
<van-loading>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--circular"
style="color:#1989fa"
/>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
</wx-view>
<wx-view
class="van-picker__columns"
style="height:264px"
catch:touchmove="noop"
>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{0}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
浙江
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
福建
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<picker-column
activeClass="active-class"
class="van-picker__column"
customClass="column-class"
data-index="{{1}}"
bind:change="onChange"
>
<wx-view
class="van-picker-column custom-class"
style="height:264px"
bind:touchcancel="onTouchEnd"
bind:touchend="onTouchEnd"
catch:touchmove="onTouchMove"
bind:touchstart="onTouchStart"
>
<wx-view
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{0}}"
style="height: 44px"
bind:tap="onClickItem"
>
杭州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{1}}"
style="height: 44px"
bind:tap="onClickItem"
>
宁波
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
data-index="{{2}}"
style="height: 44px"
bind:tap="onClickItem"
>
温州
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{3}}"
style="height: 44px"
bind:tap="onClickItem"
>
嘉兴
</wx-view>
<wx-view
class="van-ellipsis van-picker-column__item "
data-index="{{4}}"
style="height: 44px"
bind:tap="onClickItem"
>
湖州
</wx-view>
</wx-view>
</wx-view>
</picker-column>
<wx-view
class="van-picker__mask"
style="background-size:100% 110px"
/>
<wx-view
class="van-picker__frame van-hairline--top-bottom"
style="height:44px"
/>
</wx-view>
</wx-view>
</van-picker>
</wx-view>
</demo-block>
<van-toast
id="van-toast"
>
<van-transition
customClass="van-toast__container"
/>
</van-toast>
</main>
`;

11
packages/picker/test/demo.spec.ts Normal file
View File

@ -0,0 +1,11 @@
import path from 'path';
import simulate from 'miniprogram-simulate';
test('should render demo and match snapshot', () => {
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
rootPath: path.resolve(__dirname, '../../'),
});
const comp = simulate.render(id);
comp.attach(document.createElement('parent-wrapper'));
expect(comp.toJSON()).toMatchSnapshot();
});