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(Skeleton): add demo test

Browse Source
This commit is contained in:
nemo-shen 2021-12-02 23:55:08 +08:00 committed by neverland
parent 689c5d82ed
commit 606bf8aa25
9 changed files with 210 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -144,6 +144,7 @@
"van-dropdown-menu": "./dist/dropdown-menu/index",
"van-dropdown-item": "./dist/dropdown-item/index",
"van-skeleton": "./dist/skeleton/index",
"van-skeleton-demo": "./dist/skeleton/demo/index",
"van-calendar": "./dist/calendar/index",
"van-share-sheet": "./dist/share-sheet/index",
"van-config-provider": "./dist/config-provider/index",

10
example/pages/skeleton/index.js
View File

@ -1,11 +1,3 @@
import Page from '../../common/page';
Page({
data: {
show: false
},
onChange({ detail }) {
this.setData({ show: detail });
},
});
Page();

38
example/pages/skeleton/index.wxml
View File

@ -1,37 +1 @@
<demo-block title="基础用法">
<van-skeleton
title
row="3"
row-width="{{ ['100%', '100%', '80%'] }}"
/>
</demo-block>
<demo-block title="显示头像">
<van-skeleton
title
avatar
row="3"
/>
</demo-block>
<demo-block title="展示子组件">
<van-switch
checked="{{ show }}"
size="24px"
bind:change="onChange"
/>
<van-skeleton
title
avatar
row="3"
loading="{{ !show }}"
>
<view class="demo-preview">
<image class="demo-preview-img" src="https://img.yzcdn.cn/vant/logo.png" />
<view class="demo-content">
<view class="demo-content-h3">关于 Vant Weapp</view>
<view class="domo-content-p">Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。</view>
</view>
</view>
</van-skeleton>
</demo-block>
<van-skeleton-demo />

8
packages/skeleton/demo/index.json Normal file
View File

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

4
example/pages/skeleton/index.wxss → packages/skeleton/demo/index.less
View File

@ -1,7 +1,3 @@
page {
background-color: white;
}
.van-switch {
margin: 0 16px 8px;
}

13
packages/skeleton/demo/index.ts Normal file
View File

@ -0,0 +1,13 @@
import { VantComponent } from '../../common/component';
VantComponent({
data: {
show: false,
},
methods: {
onChange({ detail }) {
this.setData({ show: detail });
},
},
});

37
packages/skeleton/demo/index.wxml Normal file
View File

@ -0,0 +1,37 @@
<demo-block title="基础用法">
<van-skeleton
title
row="3"
row-width="{{ ['100%', '100%', '80%'] }}"
/>
</demo-block>
<demo-block title="显示头像">
<van-skeleton
title
avatar
row="3"
/>
</demo-block>
<demo-block title="展示子组件">
<van-switch
checked="{{ show }}"
size="24px"
bind:change="onChange"
/>
<van-skeleton
title
avatar
row="3"
loading="{{ !show }}"
>
<view class="demo-preview">
<image class="demo-preview-img" src="https://img.yzcdn.cn/vant/logo.png" />
<view class="demo-content">
<view class="demo-content-h3">关于 Vant Weapp</view>
<view class="domo-content-p">Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。</view>
</view>
</view>
</van-skeleton>
</demo-block>

138
packages/skeleton/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,138 @@
// 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-skeleton>
<wx-view
class="custom-class van-skeleton van-skeleton--animate"
>
<wx-view
class="van-skeleton__content"
>
<wx-view
class="title-class van-skeleton__title"
style="width:40%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:80%"
/>
</wx-view>
</wx-view>
</van-skeleton>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
显示头像
</wx-view>
<van-skeleton>
<wx-view
class="custom-class van-skeleton van-skeleton--animate"
>
<wx-view
class="avatar-class van-skeleton__avatar van-skeleton__avatar--round"
style="width:32px;height:32px"
/>
<wx-view
class="van-skeleton__content"
>
<wx-view
class="title-class van-skeleton__title"
style="width:40%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
</wx-view>
</wx-view>
</van-skeleton>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
展示子组件
</wx-view>
<van-switch
bind:change="onChange"
>
<wx-view
class="van-switch custom-class"
style="font-size:24px"
bind:tap="onClick"
>
<wx-view
class="van-switch__node node-class"
/>
</wx-view>
</van-switch>
<van-skeleton>
<wx-view
class="custom-class van-skeleton van-skeleton--animate"
>
<wx-view
class="avatar-class van-skeleton__avatar van-skeleton__avatar--round"
style="width:32px;height:32px"
/>
<wx-view
class="van-skeleton__content"
>
<wx-view
class="title-class van-skeleton__title"
style="width:40%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
<wx-view
class="row-class van-skeleton__row"
style="width:100%"
/>
</wx-view>
</wx-view>
</van-skeleton>
</wx-view>
</demo-block>
</main>
`;

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