mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +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-demo": "./dist/action-sheet/demo/index",
|
||||
"van-area": "./dist/area/index",
|
||||
"van-area-demo": "./dist/area/demo/index",
|
||||
"van-button": "./dist/button/index",
|
||||
"van-button-demo": "./dist/button/demo/index",
|
||||
"van-card": "./dist/card/index",
|
||||
|
||||
@ -1,43 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
const db = wx.cloud.database();
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,46 +1 @@
|
||||
<demo-block title="基础用法">
|
||||
<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" />
|
||||
<van-area-demo />
|
||||
|
||||
@ -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