test(Progress): add demo test

This commit is contained in:
nemo-shen 2021-12-07 00:03:55 +08:00 committed by neverland
parent 88529e642f
commit 970967a63f
8 changed files with 230 additions and 23 deletions

View File

@ -105,6 +105,7 @@
"van-popup": "./dist/popup/index",
"van-popup-demo": "./dist/popup/demo/index",
"van-progress": "./dist/progress/index",
"van-progress-demo": "./dist/progress/demo/index",
"van-radio": "./dist/radio/index",
"van-radio-demo": "./dist/radio/demo/index",
"van-radio-group": "./dist/radio-group/index",

View File

@ -1,23 +1 @@
<demo-block title="基础用法">
<van-progress custom-class="progress-position" percentage="0" />
</demo-block>
<demo-block title="线条粗细">
<van-progress custom-class="progress-position" stroke-width="8" percentage="100" />
</demo-block>
<demo-block title="置灰">
<van-progress custom-class="progress-position" inactive percentage="50" />
</demo-block>
<demo-block title="样式定制">
<van-progress custom-class="progress-position" pivot-text="橙色" color="#f2826a" percentage="25" />
<van-progress custom-class="progress-position" pivot-text="红色" color="#ee0a24" percentage="50" />
<van-progress
custom-class="progress-position"
percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>
<van-progress-demo />

View File

@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"van-progress": "../../progress/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,23 @@
<demo-block title="基础用法">
<van-progress custom-class="progress-position" percentage="0" />
</demo-block>
<demo-block title="线条粗细">
<van-progress custom-class="progress-position" stroke-width="8" percentage="100" />
</demo-block>
<demo-block title="置灰">
<van-progress custom-class="progress-position" inactive percentage="50" />
</demo-block>
<demo-block title="样式定制">
<van-progress custom-class="progress-position" pivot-text="橙色" color="#f2826a" percentage="25" />
<van-progress custom-class="progress-position" pivot-text="红色" color="#ee0a24" percentage="50" />
<van-progress
custom-class="progress-position"
percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>

View File

@ -0,0 +1,182 @@
// 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-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:4px"
>
<wx-view
class="van-progress__portion"
style="background:#1989fa"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#1989fa"
>
0%
</wx-view>
</wx-view>
</wx-view>
</van-progress>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
线条粗细
</wx-view>
<van-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:8px"
>
<wx-view
class="van-progress__portion"
style="background:#1989fa;width:100%"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#1989fa"
>
100%
</wx-view>
</wx-view>
</wx-view>
</van-progress>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
置灰
</wx-view>
<van-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:4px"
>
<wx-view
class="van-progress__portion"
style="background:#cacaca;width:50%"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#cacaca"
>
50%
</wx-view>
</wx-view>
</wx-view>
</van-progress>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
样式定制
</wx-view>
<van-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:4px"
>
<wx-view
class="van-progress__portion"
style="background:#f2826a;width:25%"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#f2826a"
>
橙色
</wx-view>
</wx-view>
</wx-view>
</van-progress>
<van-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:4px"
>
<wx-view
class="van-progress__portion"
style="background:#ee0a24;width:50%"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#ee0a24"
>
红色
</wx-view>
</wx-view>
</wx-view>
</van-progress>
<van-progress
customClass="progress-position"
>
<wx-view
class="van-progress custom-class"
style="height:4px"
>
<wx-view
class="van-progress__portion"
style="background:linear-gradient(to right, #be99ff, #7232dd);width:75%"
>
<wx-view
class="van-progress__pivot"
style="color:#fff;right:0px;background:#7232dd"
>
紫色
</wx-view>
</wx-view>
</wx-view>
</van-progress>
</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();
});