mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Skeleton): add demo test
This commit is contained in:
nemo-shen
neverland
parent
689c5d82ed
commit
606bf8aa25
@ -144,6 +144,7 @@
|
|||||||
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
||||||
"van-dropdown-item": "./dist/dropdown-item/index",
|
"van-dropdown-item": "./dist/dropdown-item/index",
|
||||||
"van-skeleton": "./dist/skeleton/index",
|
"van-skeleton": "./dist/skeleton/index",
|
||||||
|
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
||||||
"van-calendar": "./dist/calendar/index",
|
"van-calendar": "./dist/calendar/index",
|
||||||
"van-share-sheet": "./dist/share-sheet/index",
|
"van-share-sheet": "./dist/share-sheet/index",
|
||||||
"van-config-provider": "./dist/config-provider/index",
|
"van-config-provider": "./dist/config-provider/index",
|
||||||
|
|||||||
@ -1,11 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange({ detail }) {
|
|
||||||
this.setData({ show: detail });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,37 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-skeleton-demo />
|
||||||
<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>
|
|
||||||
|
|||||||
8
packages/skeleton/demo/index.json
Normal file
8
packages/skeleton/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-switch": "../../switch/index",
|
||||||
|
"van-skeleton": "../../skeleton/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,3 @@
|
|||||||
page {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-switch {
|
.van-switch {
|
||||||
margin: 0 16px 8px;
|
margin: 0 16px 8px;
|
||||||
}
|
}
|
||||||
13
packages/skeleton/demo/index.ts
Normal file
13
packages/skeleton/demo/index.ts
Normal 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
37
packages/skeleton/demo/index.wxml
Normal 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
138
packages/skeleton/test/__snapshots__/demo.spec.ts.snap
Normal 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
11
packages/skeleton/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