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

test(NavBar): add demo test

Browse Source
This commit is contained in:
nemo-shen 2021-12-12 22:48:31 +08:00 committed by neverland
parent fa3b17fdaa
commit 0bc139bfb0
10 changed files with 423 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -98,6 +98,7 @@
"van-loading": "./dist/loading/index",
"van-loading-demo": "./dist/loading/demo/index",
"van-nav-bar": "./dist/nav-bar/index",
"van-nav-bar-demo": "./dist/nav-bar/demo/index",
"van-notice-bar": "./dist/notice-bar/index",
"van-notice-bar-demo": "./dist/notice-bar/demo/index",
"van-notify": "./dist/notify/index",

10
example/pages/nav-bar/index.js
View File

@ -1,11 +1,3 @@
import Page from '../../common/page';
Page({
onClickLeft() {
wx.showToast({ title: '点击返回', icon: 'none' });
},
onClickRight() {
wx.showToast({ title: '点击按钮', icon: 'none' });
}
});
Page();

16
example/pages/nav-bar/index.wxml
View File

@ -1,15 +1 @@
<demo-block title="基础用法">
<van-nav-bar
title="标题"
right-text="按钮"
left-arrow
bind:click-left="onClickLeft"
bind:click-right="onClickRight"
/>
</demo-block>
<demo-block title="高级用法">
<van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" custom-class="icon" size="18" />
</van-nav-bar>
</demo-block>
<van-nav-bar-demo />

8
packages/nav-bar/demo/index.json Normal file
View File

@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"van-icon": "../../icon/index",
"van-nav-bar": "../../nav-bar/index",
"demo-block": "../../../example/components/demo-block/index"
}
}

0
example/pages/nav-bar/index.wxss → packages/nav-bar/demo/index.less
View File

13
packages/nav-bar/demo/index.ts Normal file
View File

@ -0,0 +1,13 @@
import { VantComponent } from '../../common/component';
VantComponent({
methods: {
onClickLeft() {
wx.showToast({ title: '点击返回', icon: 'none' });
},
onClickRight() {
wx.showToast({ title: '点击按钮', icon: 'none' });
},
},
});

14
packages/nav-bar/demo/index.wxml Normal file
View File

@ -0,0 +1,14 @@
<demo-block title="基础用法">
<van-nav-bar
title="标题"
right-text="按钮"
left-arrow
bind:click-left="onClickLeft"
bind:click-right="onClickRight"
/>
</demo-block>
<demo-block title="高级用法">
<van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" custom-class="icon" size="18" />
</van-nav-bar>
</demo-block>

125
packages/nav-bar/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,125 @@
// 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-nav-bar
bind:click-left="onClickLeft"
bind:click-right="onClickRight"
>
<wx-view
class="van-nav-bar custom-class van-hairline--bottom"
style="z-index:1;padding-top:20px; "
>
<wx-view
class="van-nav-bar__content"
>
<wx-view
class="van-nav-bar__left"
bind:tap="onClickLeft"
>
<van-icon
customClass="van-nav-bar__arrow"
>
<wx-view
class="custom-class van-icon van-icon-arrow-left"
style="font-size:16px"
bind:tap="onClick"
/>
</van-icon>
</wx-view>
<wx-view
class="van-nav-bar__title title-class van-ellipsis"
>
标题
</wx-view>
<wx-view
class="van-nav-bar__right"
bind:tap="onClickRight"
>
<wx-view
class="van-nav-bar__text"
hoverClass="van-nav-bar__text--hover"
hoverStayTime="70"
>
按钮
</wx-view>
</wx-view>
</wx-view>
</wx-view>
</van-nav-bar>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
高级用法
</wx-view>
<van-nav-bar>
<wx-view
class="van-nav-bar custom-class van-hairline--bottom"
style="z-index:1;padding-top:20px; "
>
<wx-view
class="van-nav-bar__content"
>
<wx-view
class="van-nav-bar__left"
bind:tap="onClickLeft"
>
<van-icon
customClass="van-nav-bar__arrow"
>
<wx-view
class="custom-class van-icon van-icon-arrow-left"
style="font-size:16px"
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-nav-bar__text"
hoverClass="van-nav-bar__text--hover"
hoverStayTime="70"
>
返回
</wx-view>
</wx-view>
<wx-view
class="van-nav-bar__title title-class van-ellipsis"
>
标题
</wx-view>
<wx-view
class="van-nav-bar__right"
bind:tap="onClickRight"
>
<van-icon
customClass="icon"
slot="right"
>
<wx-view
class="custom-class van-icon van-icon-search"
style="font-size:18px"
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</wx-view>
</van-nav-bar>
</wx-view>
</demo-block>
</main>
`;

11
packages/nav-bar/test/demo.spec.ts Normal file
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();
});

249
packages/notice-bar/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,249 @@
// 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-notice-bar>
<wx-view
class="custom-class van-notice-bar"
style=""
bind:tap="onClick"
>
<van-icon
class="van-notice-bar__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-volume-o"
style="font-size:16px"
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</wx-view>
</wx-view>
</wx-view>
</van-notice-bar>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
滚动模式
</wx-view>
<van-notice-bar
customClass="demo-margin-bottom"
>
<wx-view
class="custom-class van-notice-bar"
style=""
bind:tap="onClick"
>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
技术是开发它的人的共同灵魂。
</wx-view>
</wx-view>
</wx-view>
</van-notice-bar>
<van-notice-bar
customClass="demo-margin-bottom"
>
<wx-view
class="custom-class van-notice-bar"
style=""
bind:tap="onClick"
>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content van-ellipsis"
>
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</wx-view>
</wx-view>
</wx-view>
</van-notice-bar>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
多行展示
</wx-view>
<van-notice-bar>
<wx-view
class="custom-class van-notice-bar van-notice-bar--wrapable"
style=""
bind:tap="onClick"
>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</wx-view>
</wx-view>
</wx-view>
</van-notice-bar>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
通知栏模式
</wx-view>
<van-notice-bar>
<wx-view
class="custom-class van-notice-bar van-notice-bar--withicon"
style=""
bind:tap="onClick"
>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
技术是开发它的人的共同灵魂。
</wx-view>
</wx-view>
<van-icon
class="van-notice-bar__right-icon"
catch:tap="onClickIcon"
>
<wx-view
class="custom-class van-icon van-icon-cross"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</van-notice-bar>
<van-notice-bar
customClass="margin-top"
>
<wx-view
class="custom-class van-notice-bar van-notice-bar--withicon"
style=""
bind:tap="onClick"
>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
技术是开发它的人的共同灵魂。
</wx-view>
</wx-view>
<wx-navigator
openType="navigate"
url=""
>
<van-icon
class="van-notice-bar__right-icon"
>
<wx-view
class="custom-class van-icon van-icon-arrow"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-navigator>
</wx-view>
</van-notice-bar>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
自定义样式
</wx-view>
<van-notice-bar>
<wx-view
class="custom-class van-notice-bar"
style="color:#1989fa;background:#ecf9ff"
bind:tap="onClick"
>
<van-icon
class="van-notice-bar__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-info-o"
style="font-size:16px"
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-notice-bar__wrap"
>
<wx-view
animation=""
class="van-notice-bar__content "
>
技术是开发它的人的共同灵魂。
</wx-view>
</wx-view>
</wx-view>
</van-notice-bar>
</wx-view>
</demo-block>
</main>
`;