mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Sidebar): add demo test
This commit is contained in:
nemo-shen
neverland
parent
338f90d5c5
commit
cecccc714b
@ -117,6 +117,7 @@
|
|||||||
"van-search": "./dist/search/index",
|
"van-search": "./dist/search/index",
|
||||||
"van-search-demo": "./dist/search/demo/index",
|
"van-search-demo": "./dist/search/demo/index",
|
||||||
"van-sidebar": "./dist/sidebar/index",
|
"van-sidebar": "./dist/sidebar/index",
|
||||||
|
"van-sidebar-demo": "./dist/sidebar/demo/index",
|
||||||
"van-sidebar-item": "./dist/sidebar-item/index",
|
"van-sidebar-item": "./dist/sidebar-item/index",
|
||||||
"van-slider": "./dist/slider/index",
|
"van-slider": "./dist/slider/index",
|
||||||
"van-slider-demo": "./dist/slider/demo/index",
|
"van-slider-demo": "./dist/slider/demo/index",
|
||||||
|
|||||||
@ -1,11 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
import Notify from '../../dist/notify/notify';
|
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
onChange(event) {
|
|
||||||
Notify({
|
|
||||||
type: 'primary',
|
|
||||||
message: `切换至第${event.detail}项`
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,39 +1 @@
|
|||||||
<van-grid column-num="{{ 2 }}" border="{{ false }}">
|
<van-sidebar-demo />
|
||||||
<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" />
|
|
||||||
|
|||||||
@ -1,18 +1,3 @@
|
|||||||
page {
|
page {
|
||||||
background-color: #fff;
|
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
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
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
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
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
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
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();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user