test(Loading): add demo test

This commit is contained in:
nemo-shen 2021-12-02 23:39:39 +08:00 committed by neverland
parent 24017c1c88
commit 0893406a63
8 changed files with 266 additions and 17 deletions

View File

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

View File

@ -1,17 +1 @@
<demo-block title="加载类型" padding>
<van-loading custom-class="demo-loading" />
<van-loading custom-class="demo-loading" type="spinner" />
</demo-block>
<demo-block title="自定义颜色" padding>
<van-loading custom-class="demo-loading" color="#1989fa" />
<van-loading custom-class="demo-loading" type="spinner" color="#1989fa" />
</demo-block>
<demo-block title="加载文案" padding>
<van-loading custom-class="demo-loading" size="24px">加载中...</van-loading>
</demo-block>
<demo-block title="垂直排列" padding>
<van-loading custom-class="demo-loading" size="24px" vertical>加载中...</van-loading>
</demo-block>
<van-loading-demo />

View File

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

View File

@ -0,0 +1,5 @@
import { VantComponent } from '../../common/component';
VantComponent({
data: {},
});

View File

@ -0,0 +1,17 @@
<demo-block title="加载类型" padding>
<van-loading custom-class="demo-loading" />
<van-loading custom-class="demo-loading" type="spinner" />
</demo-block>
<demo-block title="自定义颜色" padding>
<van-loading custom-class="demo-loading" color="#1989fa" />
<van-loading custom-class="demo-loading" type="spinner" color="#1989fa" />
</demo-block>
<demo-block title="加载文案" padding>
<van-loading custom-class="demo-loading" size="24px">加载中...</van-loading>
</demo-block>
<demo-block title="垂直排列" padding>
<van-loading custom-class="demo-loading" size="24px" vertical>加载中...</van-loading>
</demo-block>

View File

@ -0,0 +1,224 @@
// 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 demo-block--padding"
>
<wx-view
class="demo-block__title"
>
加载类型
</wx-view>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--circular"
style=""
/>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--spinner"
style=""
>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
</wx-view>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix demo-block--padding"
>
<wx-view
class="demo-block__title"
>
自定义颜色
</wx-view>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--circular"
style="color:#1989fa"
/>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--spinner"
style="color:#1989fa"
>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
</wx-view>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix demo-block--padding"
>
<wx-view
class="demo-block__title"
>
加载文案
</wx-view>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading"
>
<wx-view
class="van-loading__spinner van-loading__spinner--circular"
style="width:24px;height:24px"
/>
<wx-view
class="van-loading__text"
style=""
>
加载中...
</wx-view>
</wx-view>
</van-loading>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix demo-block--padding"
>
<wx-view
class="demo-block__title"
>
垂直排列
</wx-view>
<van-loading
customClass="demo-loading"
>
<wx-view
class="custom-class van-loading van-loading--vertical"
>
<wx-view
class="van-loading__spinner van-loading__spinner--circular"
style="width:24px;height:24px"
/>
<wx-view
class="van-loading__text"
style=""
>
加载中...
</wx-view>
</wx-view>
</van-loading>
</wx-view>
</demo-block>
</main>
`;

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();
});