mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Area): add test demo
This commit is contained in:
nemo-shen
neverland
parent
7819c25be0
commit
2591498204
@ -66,6 +66,7 @@
|
|||||||
"van-action-sheet": "./dist/action-sheet/index",
|
"van-action-sheet": "./dist/action-sheet/index",
|
||||||
"van-action-sheet-demo": "./dist/action-sheet/demo/index",
|
"van-action-sheet-demo": "./dist/action-sheet/demo/index",
|
||||||
"van-area": "./dist/area/index",
|
"van-area": "./dist/area/index",
|
||||||
|
"van-area-demo": "./dist/area/demo/index",
|
||||||
"van-button": "./dist/button/index",
|
"van-button": "./dist/button/index",
|
||||||
"van-button-demo": "./dist/button/demo/index",
|
"van-button-demo": "./dist/button/demo/index",
|
||||||
"van-card": "./dist/card/index",
|
"van-card": "./dist/card/index",
|
||||||
|
|||||||
@ -1,43 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
import Toast from '../../dist/toast/toast';
|
|
||||||
|
|
||||||
const db = wx.cloud.database();
|
Page();
|
||||||
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
areaList: {},
|
|
||||||
loading: true,
|
|
||||||
value: 330302
|
|
||||||
},
|
|
||||||
|
|
||||||
onShow() {
|
|
||||||
db.collection('region').limit(1).get().then(res => {
|
|
||||||
if (res.data && res.data.length > 0) {
|
|
||||||
this.setData({
|
|
||||||
loading: false,
|
|
||||||
areaList: res.data[0]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
this.setData({
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
const { values } = event.detail;
|
|
||||||
|
|
||||||
Toast(values.map(item => item.name).join('-'));
|
|
||||||
},
|
|
||||||
|
|
||||||
onConfirm(event) {
|
|
||||||
console.log(event);
|
|
||||||
},
|
|
||||||
|
|
||||||
onCancel(event) {
|
|
||||||
console.log(event);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,46 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-area-demo />
|
||||||
<van-area
|
|
||||||
value="{{ value }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
area-list="{{ areaList }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
bind:cancel="onCancel"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="选中省市县">
|
|
||||||
<van-area
|
|
||||||
value="{{ value }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
area-list="{{ areaList }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="配置显示列">
|
|
||||||
<van-area
|
|
||||||
title="标题"
|
|
||||||
columns-num="{{ 2 }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
area-list="{{ areaList }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="配置列占位提示文字">
|
|
||||||
<van-area
|
|
||||||
title="标题"
|
|
||||||
columns-num="{{ 2 }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
area-list="{{ areaList }}"
|
|
||||||
columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
|
|
||||||
<van-toast id="van-toast" />
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
|
|
||||||
8
packages/area/demo/index.json
Normal file
8
packages/area/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-area": "../../area/index",
|
||||||
|
"van-toast": "../../toast/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
51
packages/area/demo/index.ts
Normal file
51
packages/area/demo/index.ts
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
import Toast from '../../toast/toast';
|
||||||
|
|
||||||
|
const db = wx.cloud?.database();
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
areaList: {},
|
||||||
|
loading: true,
|
||||||
|
value: 330302,
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
db?.collection('region')
|
||||||
|
.limit(1)
|
||||||
|
.get()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data && res.data.length > 0) {
|
||||||
|
this.setData({
|
||||||
|
loading: false,
|
||||||
|
areaList: res.data[0],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
this.setData({
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(event) {
|
||||||
|
const { values } = event.detail;
|
||||||
|
|
||||||
|
Toast({
|
||||||
|
context: this,
|
||||||
|
message: values.map((item) => item.name).join('-'),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm(event) {
|
||||||
|
console.log(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
onCancel(event) {
|
||||||
|
console.log(event);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
11
packages/area/demo/index.wxml
Normal file
11
packages/area/demo/index.wxml
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-area
|
||||||
|
value="{{ value }}"
|
||||||
|
loading="{{ loading }}"
|
||||||
|
area-list="{{ areaList }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
bind:confirm="onConfirm"
|
||||||
|
bind:cancel="onCancel"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
<van-toast id="van-toast" />
|
||||||
162
packages/area/test/__snapshots__/demo.spec.ts.snap
Normal file
162
packages/area/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
// 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-area
|
||||||
|
bind:cancel="onCancel"
|
||||||
|
bind:change="onChange"
|
||||||
|
bind:confirm="onConfirm"
|
||||||
|
>
|
||||||
|
<van-picker
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-area__picker"
|
||||||
|
columnClass="column-class"
|
||||||
|
toolbarClass="toolbar-class"
|
||||||
|
bind:cancel="onCancel"
|
||||||
|
bind:change="onChange"
|
||||||
|
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__confirm"
|
||||||
|
data-type="confirm"
|
||||||
|
hoverClass="van-picker__confirm--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="emit"
|
||||||
|
>
|
||||||
|
|
||||||
|
确认
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__loading"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</picker-column>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{2}}"
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
</van-area>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<van-toast
|
||||||
|
id="van-toast"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-toast__container"
|
||||||
|
/>
|
||||||
|
</van-toast>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/area/test/demo.spec.ts
Normal file
11
packages/area/test/demo.spec.ts
Normal 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();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user