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

test(Sidebar): add demo test

Browse Source
This commit is contained in:
nemo-shen 2021-12-12 23:08:01 +08:00 committed by neverland
parent 338f90d5c5
commit cecccc714b
10 changed files with 434 additions and 63 deletions

1
example/app.json

@ -117,6 +117,7 @@
"van-search": "./dist/search/index",
"van-search-demo": "./dist/search/demo/index",
"van-sidebar": "./dist/sidebar/index",
"van-sidebar-demo": "./dist/sidebar/demo/index",
"van-sidebar-item": "./dist/sidebar-item/index",
"van-slider": "./dist/slider/index",
"van-slider-demo": "./dist/slider/demo/index",

10
example/pages/sidebar/index.js

@ -1,11 +1,3 @@
import Page from '../../common/page';
import Notify from '../../dist/notify/notify';
Page({
onChange(event) {
Notify({
type: 'primary',
message: `切换至第${event.detail}项`
});
}
});
Page();

40
example/pages/sidebar/index.wxml

@ -1,39 +1 @@
<van-grid column-num="{{ 2 }}" border="{{ false }}">
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">基础用法</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">徽标提示</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" dot />
<van-sidebar-item title="标签名" badge="5" />
<van-sidebar-item title="标签名" badge="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">禁用选项</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" disabled />
<van-sidebar-item title="标签名" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">监听切换事件</h3>
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
<van-sidebar-item title="标签名 1" />
<van-sidebar-item title="标签名 2" />
<van-sidebar-item title="标签名 3" />
</van-sidebar>
</van-grid-item>
</van-grid>
<van-notify id="van-notify" />
<van-sidebar-demo />

15
example/pages/sidebar/index.wxss

@ -1,18 +1,3 @@
page {
background-color: #fff;
}
.custom-sidebar {
margin-left: 16px;
}
.demo-sidebar {
background-color: #fff;
}
.demo-sidebar-title {
margin-bottom: 16px;
color: #969799;
font-weight: normal;
font-size: 14px;
}

11
packages/sidebar/demo/index.json Normal file

@ -0,0 +1,11 @@
{
"component": true,
"usingComponents": {
"van-grid": "../../grid/index",
"van-grid-item": "../../grid-item/index",
"van-sidebar": "../../sidebar/index",
"van-sidebar-item": "../../sidebar-item/index",
"van-notify": "../../notify/index",
"demo-block": "../../../example/components/demo-block/index"
}
}

14
packages/sidebar/demo/index.less Normal file

@ -0,0 +1,14 @@
.custom-sidebar {
margin-left: 16px;
}
.demo-sidebar {
background-color: #fff;
}
.demo-sidebar-title {
margin-bottom: 16px;
color: #969799;
font-weight: normal;
font-size: 14px;
}

14
packages/sidebar/demo/index.ts Normal file

@ -0,0 +1,14 @@
import { VantComponent } from '../../common/component';
import Notify from '../../notify/notify';
VantComponent({
methods: {
onChange(event) {
Notify({
context: this,
type: 'primary',
message: `切换至第${event.detail}项`,
});
},
},
});

39
packages/sidebar/demo/index.wxml Normal file

@ -0,0 +1,39 @@
<van-grid column-num="{{ 2 }}" border="{{ false }}">
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">基础用法</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">徽标提示</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" dot />
<van-sidebar-item title="标签名" badge="5" />
<van-sidebar-item title="标签名" badge="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">禁用选项</h3>
<van-sidebar custom-class="custom-sidebar">
<van-sidebar-item title="标签名" />
<van-sidebar-item title="标签名" disabled />
<van-sidebar-item title="标签名" />
</van-sidebar>
</van-grid-item>
<van-grid-item use-slot>
<h3 class="demo-sidebar-title">监听切换事件</h3>
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
<van-sidebar-item title="标签名 1" />
<van-sidebar-item title="标签名 2" />
<van-sidebar-item title="标签名 3" />
</van-sidebar>
</van-grid-item>
</van-grid>
<van-notify id="van-notify" />

342
packages/sidebar/test/__snapshots__/demo.spec.ts.snap Normal file

@ -0,0 +1,342 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render demo and match snapshot 1`] = `
<main>
<van-grid>
<wx-view
class="van-grid custom-class "
style="padding-left:0px"
>
<van-grid-item>
<wx-view
class="custom-class van-grid-item"
style="width:50%;padding-right:0px"
bind:tap="onClick"
>
<wx-view
class="content-class van-grid-item__content van-grid-item__content--center "
style=""
>
<h3
class="demo-sidebar-title"
>
基础用法
</h3>
<van-sidebar
customClass="custom-sidebar"
>
<wx-view
class="van-sidebar custom-class"
>
<van-sidebar-item>
<wx-view
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
</wx-view>
</van-sidebar>
</wx-view>
</wx-view>
</van-grid-item>
<van-grid-item>
<wx-view
class="custom-class van-grid-item"
style="width:50%;padding-right:0px"
bind:tap="onClick"
>
<wx-view
class="content-class van-grid-item__content van-grid-item__content--center "
style=""
>
<h3
class="demo-sidebar-title"
>
徽标提示
</h3>
<van-sidebar
customClass="custom-sidebar"
>
<wx-view
class="van-sidebar custom-class"
>
<van-sidebar-item>
<wx-view
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<van-info>
<wx-view
class="van-info van-info van-info--dot custom-class"
style=""
>
</wx-view>
</van-info>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<van-info>
<wx-view
class="van-info van-info custom-class"
style=""
>
5
</wx-view>
</van-info>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<van-info>
<wx-view
class="van-info van-info custom-class"
style=""
>
99+
</wx-view>
</van-info>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
</wx-view>
</van-sidebar>
</wx-view>
</wx-view>
</van-grid-item>
<van-grid-item>
<wx-view
class="custom-class van-grid-item"
style="width:50%;padding-right:0px;margin-top:0px"
bind:tap="onClick"
>
<wx-view
class="content-class van-grid-item__content van-grid-item__content--center "
style=""
>
<h3
class="demo-sidebar-title"
>
禁用选项
</h3>
<van-sidebar
customClass="custom-sidebar"
>
<wx-view
class="van-sidebar custom-class"
>
<van-sidebar-item>
<wx-view
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item van-sidebar-item--disabled disabled-class custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
</wx-view>
</van-sidebar>
</wx-view>
</wx-view>
</van-grid-item>
<van-grid-item>
<wx-view
class="custom-class van-grid-item"
style="width:50%;padding-right:0px;margin-top:0px"
bind:tap="onClick"
>
<wx-view
class="content-class van-grid-item__content van-grid-item__content--center "
style=""
>
<h3
class="demo-sidebar-title"
>
监听切换事件
</h3>
<van-sidebar
customClass="custom-sidebar"
bind:change="onChange"
>
<wx-view
class="van-sidebar custom-class"
>
<van-sidebar-item>
<wx-view
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名 1
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名 2
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
<van-sidebar-item>
<wx-view
class="van-sidebar-item custom-class"
hoverClass="van-sidebar-item--hover"
hoverStayTime="70"
bind:tap="onClick"
>
<wx-view
class="van-sidebar-item__text"
>
<wx-view>
标签名 3
</wx-view>
</wx-view>
</wx-view>
</van-sidebar-item>
</wx-view>
</van-sidebar>
</wx-view>
</wx-view>
</van-grid-item>
</wx-view>
</van-grid>
<van-notify
id="van-notify"
>
<van-transition
customClass="van-notify__container"
bind:tap="onTap"
/>
</van-notify>
</main>
`;

11
packages/sidebar/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();
});