mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(DropdownMenu): add demo test
This commit is contained in:
nemo-shen
neverland
parent
0df5fa9fca
commit
99aff7a1ea
@ -167,6 +167,7 @@
|
|||||||
"van-grid-demo": "./dist/grid/demo/index",
|
"van-grid-demo": "./dist/grid/demo/index",
|
||||||
"van-grid-item": "./dist/grid-item/index",
|
"van-grid-item": "./dist/grid-item/index",
|
||||||
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
||||||
|
"van-dropdown-menu-demo": "./dist/dropdown-menu/demo/index",
|
||||||
"van-dropdown-item": "./dist/dropdown-item/index",
|
"van-dropdown-item": "./dist/dropdown-item/index",
|
||||||
"van-skeleton": "./dist/skeleton/index",
|
"van-skeleton": "./dist/skeleton/index",
|
||||||
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
||||||
|
|||||||
@ -1,35 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
switchTitle1: '包邮',
|
|
||||||
switchTitle2: '团购',
|
|
||||||
itemTitle: '筛选',
|
|
||||||
option1: [
|
|
||||||
{ text: '全部商品', value: 0 },
|
|
||||||
{ text: '新款商品', value: 1 },
|
|
||||||
{ text: '活动商品', value: 2 }
|
|
||||||
],
|
|
||||||
option2: [
|
|
||||||
{ text: '默认排序', value: 'a' },
|
|
||||||
{ text: '好评排序', value: 'b' },
|
|
||||||
{ text: '销量排序', value: 'c' }
|
|
||||||
],
|
|
||||||
switch1: true,
|
|
||||||
switch2: false,
|
|
||||||
value1: 0,
|
|
||||||
value2: 'a'
|
|
||||||
},
|
|
||||||
|
|
||||||
onConfirm () {
|
|
||||||
this.selectComponent('#item').toggle();
|
|
||||||
},
|
|
||||||
|
|
||||||
onSwitch1Change ({ detail }) {
|
|
||||||
this.setData({ switch1: detail });
|
|
||||||
},
|
|
||||||
|
|
||||||
onSwitch2Change ({ detail }) {
|
|
||||||
this.setData({ switch2: detail });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,61 +1 @@
|
|||||||
<demo-block custom-class="white" title="基础用法">
|
<van-dropdown-menu-demo />
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
|
||||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block custom-class="white" title="自定义菜单内容">
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
|
||||||
<van-dropdown-item id="item" title="{{ itemTitle }}">
|
|
||||||
<van-cell title="{{ switchTitle1 }}">
|
|
||||||
<van-switch
|
|
||||||
slot="right-icon"
|
|
||||||
size="24px"
|
|
||||||
style="height: 26px"
|
|
||||||
checked="{{ switch1 }}"
|
|
||||||
active-color="#ee0a24"
|
|
||||||
bind:change="onSwitch1Change"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
<van-cell title="{{ switchTitle2 }}">
|
|
||||||
<van-switch
|
|
||||||
slot="right-icon"
|
|
||||||
size="24px"
|
|
||||||
style="height: 26px"
|
|
||||||
checked="{{ switch2 }}"
|
|
||||||
active-color="#ee0a24"
|
|
||||||
bind:change="onSwitch2Change"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
<view style="padding: 5px 16px;">
|
|
||||||
<van-button type="danger" block round bind:click="onConfirm">
|
|
||||||
确认
|
|
||||||
</van-button>
|
|
||||||
</view>
|
|
||||||
</van-dropdown-item>
|
|
||||||
</van-dropdown-menu>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block custom-class="white" title="自定义选中状态颜色">
|
|
||||||
<van-dropdown-menu active-color="#1989fa">
|
|
||||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
|
||||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block custom-class="white" title="向上展开">
|
|
||||||
<van-dropdown-menu direction="up">
|
|
||||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
|
||||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block custom-class="white" title="禁用菜单">
|
|
||||||
<van-dropdown-menu>
|
|
||||||
<van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
|
|
||||||
<van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
|
|
||||||
</van-dropdown-menu>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
/** empty */
|
|
||||||
11
packages/dropdown-menu/demo/index.json
Normal file
11
packages/dropdown-menu/demo/index.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-cell": "../../cell/index",
|
||||||
|
"van-switch": "../../switch/index",
|
||||||
|
"van-button": "../../button/index",
|
||||||
|
"van-dropdown-item": "../../dropdown-item/index",
|
||||||
|
"van-dropdown-menu": "../../dropdown-menu/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
37
packages/dropdown-menu/demo/index.ts
Normal file
37
packages/dropdown-menu/demo/index.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
switchTitle1: '包邮',
|
||||||
|
switchTitle2: '团购',
|
||||||
|
itemTitle: '筛选',
|
||||||
|
option1: [
|
||||||
|
{ text: '全部商品', value: 0 },
|
||||||
|
{ text: '新款商品', value: 1 },
|
||||||
|
{ text: '活动商品', value: 2 },
|
||||||
|
],
|
||||||
|
option2: [
|
||||||
|
{ text: '默认排序', value: 'a' },
|
||||||
|
{ text: '好评排序', value: 'b' },
|
||||||
|
{ text: '销量排序', value: 'c' },
|
||||||
|
],
|
||||||
|
switch1: true,
|
||||||
|
switch2: false,
|
||||||
|
value1: 0,
|
||||||
|
value2: 'a',
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onConfirm() {
|
||||||
|
this.selectComponent('#item').toggle();
|
||||||
|
},
|
||||||
|
|
||||||
|
onSwitch1Change({ detail }) {
|
||||||
|
this.setData({ switch1: detail });
|
||||||
|
},
|
||||||
|
|
||||||
|
onSwitch2Change({ detail }) {
|
||||||
|
this.setData({ switch2: detail });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
61
packages/dropdown-menu/demo/index.wxml
Normal file
61
packages/dropdown-menu/demo/index.wxml
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<demo-block custom-class="white" title="基础用法">
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||||
|
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block custom-class="white" title="自定义菜单内容">
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||||
|
<van-dropdown-item id="item" title="{{ itemTitle }}">
|
||||||
|
<van-cell title="{{ switchTitle1 }}">
|
||||||
|
<van-switch
|
||||||
|
slot="right-icon"
|
||||||
|
size="24px"
|
||||||
|
style="height: 26px"
|
||||||
|
checked="{{ switch1 }}"
|
||||||
|
active-color="#ee0a24"
|
||||||
|
bind:change="onSwitch1Change"
|
||||||
|
/>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell title="{{ switchTitle2 }}">
|
||||||
|
<van-switch
|
||||||
|
slot="right-icon"
|
||||||
|
size="24px"
|
||||||
|
style="height: 26px"
|
||||||
|
checked="{{ switch2 }}"
|
||||||
|
active-color="#ee0a24"
|
||||||
|
bind:change="onSwitch2Change"
|
||||||
|
/>
|
||||||
|
</van-cell>
|
||||||
|
<view style="padding: 5px 16px;">
|
||||||
|
<van-button type="danger" block round bind:click="onConfirm">
|
||||||
|
确认
|
||||||
|
</van-button>
|
||||||
|
</view>
|
||||||
|
</van-dropdown-item>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block custom-class="white" title="自定义选中状态颜色">
|
||||||
|
<van-dropdown-menu active-color="#1989fa">
|
||||||
|
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||||
|
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block custom-class="white" title="向上展开">
|
||||||
|
<van-dropdown-menu direction="up">
|
||||||
|
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||||
|
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block custom-class="white" title="禁用菜单">
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
|
||||||
|
<van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
293
packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
Normal file
293
packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
|
<main>
|
||||||
|
<demo-block
|
||||||
|
customClass="white"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
基础用法
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
全部商品
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
默认排序
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-item />
|
||||||
|
<van-dropdown-item />
|
||||||
|
</wx-view>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
customClass="white"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义菜单内容
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
全部商品
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
筛选
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-item />
|
||||||
|
<van-dropdown-item
|
||||||
|
id="item"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
customClass="white"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义选中状态颜色
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
全部商品
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
默认排序
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-item />
|
||||||
|
<van-dropdown-item />
|
||||||
|
</wx-view>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
customClass="white"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
向上展开
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title van-dropdown-menu__title--down"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
全部商品
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title van-dropdown-menu__title--down"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
默认排序
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-item />
|
||||||
|
<van-dropdown-item />
|
||||||
|
</wx-view>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
customClass="white"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
禁用菜单
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
全部商品
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:tap="onTitleTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class=" van-dropdown-menu__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
>
|
||||||
|
|
||||||
|
默认排序
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<van-dropdown-item />
|
||||||
|
<van-dropdown-item />
|
||||||
|
</wx-view>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/dropdown-menu/test/demo.spec.ts
Normal file
11
packages/dropdown-menu/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