test(Collapse): add demo test

This commit is contained in:
nemo-shen 2021-12-12 23:14:42 +08:00 committed by neverland
parent cecccc714b
commit 459bd1652f
9 changed files with 812 additions and 75 deletions

View File

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

View File

@ -1,33 +1,3 @@
import Page from '../../common/page';
import Toast from '../../dist/toast/toast';
Page({
data: {
active1: [0],
active2: 0,
active3: [],
active4: [],
title1: '有赞微商城',
title2: '有赞零售',
title3: '有赞美业',
content1: '提供多样店铺模板,快速搭建网上商城',
content2:
'网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失',
content3: '线上拓客,随时预约,贴心顺手的开单收银',
},
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({
[key]: event.detail,
});
},
onOpen(event) {
Toast(`展开: ${event.detail}`);
},
onClose(event) {
Toast(`关闭: ${event.detail}`);
},
});
Page();

View File

@ -1,44 +1 @@
<demo-block title="基础用法">
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="手风琴">
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="事件监听">
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange" bind:open="onOpen" bind:close="onClose">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="自定义标题内容">
<van-collapse value="{{ active4 }}" data-key="active4" bind:change="onChange">
<van-collapse-item>
<view slot="title">
{{ title1 }}
<van-icon name="question-o" custom-class="van-icon-question" />
</view>
{{ content1 }}
</van-collapse-item>
<van-collapse-item
title="{{ title2 }}"
value="内容"
icon="shop-o"
>
{{ content2 }}
</van-collapse-item>
</van-collapse>
</demo-block>
<van-toast id="van-toast" />
<van-collapse-demo />

View File

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

View File

@ -0,0 +1,41 @@
import { VantComponent } from '../../common/component';
import Toast from '../../toast/toast';
VantComponent({
data: {
active1: [0],
active2: 0,
active3: [],
active4: [],
title1: '有赞微商城',
title2: '有赞零售',
title3: '有赞美业',
content1: '提供多样店铺模板,快速搭建网上商城',
content2:
'网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失',
content3: '线上拓客,随时预约,贴心顺手的开单收银',
},
methods: {
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({
[key]: event.detail,
});
},
onOpen(event) {
Toast({
context: this,
message: `展开: ${event.detail}`,
});
},
onClose(event) {
Toast({
context: this,
message: `关闭: ${event.detail}`,
});
},
},
});

View File

@ -0,0 +1,44 @@
<demo-block title="基础用法">
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="手风琴">
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="事件监听">
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange" bind:open="onOpen" bind:close="onClose">
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="自定义标题内容">
<van-collapse value="{{ active4 }}" data-key="active4" bind:change="onChange">
<van-collapse-item>
<view slot="title">
{{ title1 }}
<van-icon name="question-o" custom-class="van-icon-question" />
</view>
{{ content1 }}
</van-collapse-item>
<van-collapse-item
title="{{ title2 }}"
value="内容"
icon="shop-o"
>
{{ content2 }}
</van-collapse-item>
</van-collapse>
</demo-block>
<van-toast id="van-toast" />

View File

@ -0,0 +1,704 @@
// 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-collapse
data-key="active1"
bind:change="onChange"
>
<wx-view
class="custom-class van-collapse van-hairline--top-bottom"
>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class "
>
<van-cell
class="van-collapse-item__title van-collapse-item__title--expanded"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞微商城
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
提供多样店铺模板,快速搭建网上商城
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞零售
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title van-collapse-item__title--disabled"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞美业
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
线上拓客,随时预约,贴心顺手的开单收银
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
</wx-view>
</van-collapse>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
手风琴
</wx-view>
<van-collapse
data-key="active2"
bind:change="onChange"
>
<wx-view
class="custom-class van-collapse van-hairline--top-bottom"
>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class "
>
<van-cell
class="van-collapse-item__title van-collapse-item__title--expanded"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞微商城
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
提供多样店铺模板,快速搭建网上商城
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞零售
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞美业
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
线上拓客,随时预约,贴心顺手的开单收银
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
</wx-view>
</van-collapse>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
事件监听
</wx-view>
<van-collapse
data-key="active3"
bind:change="onChange"
bind:close="onClose"
bind:open="onOpen"
>
<wx-view
class="custom-class van-collapse van-hairline--top-bottom"
>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class "
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞微商城
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
提供多样店铺模板,快速搭建网上商城
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞零售
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞美业
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
线上拓客,随时预约,贴心顺手的开单收银
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
</wx-view>
</van-collapse>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
自定义标题内容
</wx-view>
<van-collapse
data-key="active4"
bind:change="onChange"
>
<wx-view
class="custom-class van-collapse van-hairline--top-bottom"
>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class "
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<wx-view
class="van-cell__title title-class"
style=""
>
<wx-view
slot="title"
>
有赞微商城
<van-icon
customClass="van-icon-question"
name="question-o"
/>
</wx-view>
</wx-view>
<wx-view
class="van-cell__value value-class"
/>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
提供多样店铺模板,快速搭建网上商城
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
<van-collapse-item>
<wx-view
class="van-collapse-item custom-class van-hairline--top"
>
<van-cell
class="van-collapse-item__title"
customClass="van-cell"
hoverClass="van-cell--hover"
rightIconClass="van-cell__right-icon"
titleClass="title-class"
bind:click="onClick"
>
<wx-view
class="custom-class van-cell van-cell--borderless van-cell--clickable"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style=""
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-shop-o"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style=""
>
有赞零售
</wx-view>
<wx-view
class="van-cell__value value-class"
>
内容
</wx-view>
<van-icon
class="van-cell__right-icon-wrap right-icon-class"
customClass="van-cell__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-cell>
<wx-view
animation=""
class="van-collapse-item__wrapper"
style="height: 0;"
>
<wx-view
class="van-collapse-item__content content-class"
>
网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
</wx-view>
</wx-view>
</wx-view>
</van-collapse-item>
</wx-view>
</van-collapse>
</wx-view>
</demo-block>
<van-toast
id="van-toast"
>
<van-transition
customClass="van-toast__container"
/>
</van-toast>
</main>
`;

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();
});