mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Tabbar): add demo test
This commit is contained in:
nemo-shen
neverland
parent
efbc3a9ce6
commit
eda2100dfa
@ -127,6 +127,7 @@
|
|||||||
"van-tab-demo": "./dist/tab/demo/index",
|
"van-tab-demo": "./dist/tab/demo/index",
|
||||||
"van-tabs": "./dist/tabs/index",
|
"van-tabs": "./dist/tabs/index",
|
||||||
"van-tabbar": "./dist/tabbar/index",
|
"van-tabbar": "./dist/tabbar/index",
|
||||||
|
"van-tabbar-demo": "./dist/tabbar/demo/index",
|
||||||
"van-tabbar-item": "./dist/tabbar-item/index",
|
"van-tabbar-item": "./dist/tabbar-item/index",
|
||||||
"van-tag": "./dist/tag/index",
|
"van-tag": "./dist/tag/index",
|
||||||
"van-toast": "./dist/toast/index",
|
"van-toast": "./dist/toast/index",
|
||||||
|
|||||||
@ -1,27 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
active: 0,
|
|
||||||
active2: 'home',
|
|
||||||
active3: 0,
|
|
||||||
active4: 0,
|
|
||||||
active5: 0,
|
|
||||||
active6: 0,
|
|
||||||
icon: {
|
|
||||||
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
|
||||||
active: 'https://img.yzcdn.cn/vant/user-active.png'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
const { key } = event.currentTarget.dataset;
|
|
||||||
this.setData({ [key]: event.detail });
|
|
||||||
},
|
|
||||||
|
|
||||||
handleChange(event) {
|
|
||||||
const { key } = event.currentTarget.dataset;
|
|
||||||
this.setData({ [key]: event.detail });
|
|
||||||
wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,105 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-tabbar-demo />
|
||||||
<van-tabbar
|
|
||||||
active="{{ active }}"
|
|
||||||
data-key="active"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="通过名称匹配">
|
|
||||||
<van-tabbar
|
|
||||||
active="{{ active2 }}"
|
|
||||||
data-key="active2"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="显示徽标">
|
|
||||||
<van-tabbar
|
|
||||||
active="{{ active3 }}"
|
|
||||||
data-key="active3"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义图标">
|
|
||||||
<van-tabbar
|
|
||||||
active="{{ active4 }}"
|
|
||||||
data-key="active4"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item info="3">
|
|
||||||
<image
|
|
||||||
slot="icon"
|
|
||||||
src="{{ icon.normal }}"
|
|
||||||
mode="aspectFit"
|
|
||||||
style="width: 30px; height: 18px;"
|
|
||||||
/>
|
|
||||||
<image
|
|
||||||
slot="icon-active"
|
|
||||||
src="{{ icon.active }}"
|
|
||||||
mode="aspectFit"
|
|
||||||
style="width: 30px; height: 18px;"
|
|
||||||
/>
|
|
||||||
自定义
|
|
||||||
</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义颜色">
|
|
||||||
<van-tabbar
|
|
||||||
active="{{ active5 }}"
|
|
||||||
data-key="active5"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
active-color="#07c160"
|
|
||||||
inactive-color="#000"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
|
|
||||||
<demo-block title="切换标签事件">
|
|
||||||
<van-tabbar
|
|
||||||
active="{{ active6 }}"
|
|
||||||
data-key="active6"
|
|
||||||
custom-class="tabbar-position"
|
|
||||||
safe-area-inset-bottom="{{ false }}"
|
|
||||||
bind:change="handleChange"
|
|
||||||
>
|
|
||||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
|
||||||
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</demo-block>
|
|
||||||
|
|||||||
8
packages/tabbar/demo/index.json
Normal file
8
packages/tabbar/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-tabbar": "../../tabbar/index",
|
||||||
|
"van-tabbar-item": "../../tabbar-item/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
29
packages/tabbar/demo/index.ts
Normal file
29
packages/tabbar/demo/index.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
active: 0,
|
||||||
|
active2: 'home',
|
||||||
|
active3: 0,
|
||||||
|
active4: 0,
|
||||||
|
active5: 0,
|
||||||
|
active6: 0,
|
||||||
|
icon: {
|
||||||
|
normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||||
|
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(event) {
|
||||||
|
const { key } = event.currentTarget.dataset;
|
||||||
|
this.setData({ [key]: event.detail });
|
||||||
|
},
|
||||||
|
|
||||||
|
handleChange(event) {
|
||||||
|
const { key } = event.currentTarget.dataset;
|
||||||
|
this.setData({ [key]: event.detail });
|
||||||
|
wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
105
packages/tabbar/demo/index.wxml
Normal file
105
packages/tabbar/demo/index.wxml
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active }}"
|
||||||
|
data-key="active"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="通过名称匹配">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active2 }}"
|
||||||
|
data-key="active2"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="显示徽标">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active3 }}"
|
||||||
|
data-key="active3"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义图标">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active4 }}"
|
||||||
|
data-key="active4"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item info="3">
|
||||||
|
<image
|
||||||
|
slot="icon"
|
||||||
|
src="{{ icon.normal }}"
|
||||||
|
mode="aspectFit"
|
||||||
|
style="width: 30px; height: 18px;"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
slot="icon-active"
|
||||||
|
src="{{ icon.active }}"
|
||||||
|
mode="aspectFit"
|
||||||
|
style="width: 30px; height: 18px;"
|
||||||
|
/>
|
||||||
|
自定义
|
||||||
|
</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义颜色">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active5 }}"
|
||||||
|
data-key="active5"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
active-color="#07c160"
|
||||||
|
inactive-color="#000"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
|
||||||
|
<demo-block title="切换标签事件">
|
||||||
|
<van-tabbar
|
||||||
|
active="{{ active6 }}"
|
||||||
|
data-key="active6"
|
||||||
|
custom-class="tabbar-position"
|
||||||
|
safe-area-inset-bottom="{{ false }}"
|
||||||
|
bind:change="handleChange"
|
||||||
|
>
|
||||||
|
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</demo-block>
|
||||||
11
packages/tabbar/test/demo.spec.ts
Normal file
11
packages/tabbar/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