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

Browse Source
This commit is contained in:
nemo-shen 2021-12-02 13:19:55 +08:00 committed by neverland
parent fd85dcb64b
commit 0ec0925001
9 changed files with 210 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -125,6 +125,7 @@
"van-picker": "./dist/picker/index",
"van-overlay": "./dist/overlay/index",
"van-circle": "./dist/circle/index",
"van-circle-demo": "./dist/circle/demo/index",
"van-index-bar": "./dist/index-bar/index",
"van-index-anchor": "./dist/index-anchor/index",
"van-grid": "./dist/grid/index",

19
example/pages/circle/index.js
View File

@ -1,20 +1,3 @@
import Page from '../../common/page';
const format = rate => Math.min(Math.max(rate, 0), 100);
Page({
data: {
value: 25,
gradientColor: {
'0%': '#ffd01e',
'100%': '#ee0a24'
}
},
run(e) {
const step = parseFloat(e.currentTarget.dataset.step);
this.setData({
value: format((this.data.value += step))
});
}
});
Page();

15
example/pages/circle/index.wxml
View File

@ -1,14 +1 @@
<demo-block title="基础用法">
<van-circle type="2d" value="{{ value }}" text="{{ value }}%" />
</demo-block>
<demo-block title="样式定制">
<van-circle value="{{ value }}" stroke-width="{{ 6 }}" text="宽度定制" />
<van-circle value="{{ value }}" layer-color="#eee" color="#ee0a24" text="颜色定制" />
<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />
<van-circle value="{{ value }}" color="#07c160" clockwise="{{ false }}" text="逆时针" />
<van-circle value="{{ value }}" size="120" text="大小定制" />
</demo-block>
<van-button type="primary" size="small" data-step="10" bind:tap="run">增加</van-button>
<van-button type="danger" size="small" data-step="-10" bind:tap="run">减少</van-button>
<van-circle-demo />

7
packages/circle/demo/index.json Normal file
View File

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

2
example/pages/circle/index.wxss → packages/circle/demo/index.less
View File

@ -1,6 +1,6 @@
.van-circle {
margin: 5px 10px 20px;
}
.van-button{
.van-button {
margin-left: 10px;
}

22
packages/circle/demo/index.ts Normal file
View File

@ -0,0 +1,22 @@
import { VantComponent } from '../../common/component';
const format = (rate) => Math.min(Math.max(rate, 0), 100);
VantComponent({
data: {
value: 25,
gradientColor: {
'0%': '#ffd01e',
'100%': '#ee0a24',
},
},
methods: {
run(e) {
const step = parseFloat(e.currentTarget.dataset.step);
this.setData({
value: format((this.data.value += step)),
});
},
},
});

14
packages/circle/demo/index.wxml Normal file
View File

@ -0,0 +1,14 @@
<demo-block title="基础用法">
<van-circle type="2d" value="{{ value }}" text="{{ value }}%" />
</demo-block>
<demo-block title="样式定制">
<van-circle value="{{ value }}" stroke-width="{{ 6 }}" text="宽度定制" />
<van-circle value="{{ value }}" layer-color="#eee" color="#ee0a24" text="颜色定制" />
<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />
<van-circle value="{{ value }}" color="#07c160" clockwise="{{ false }}" text="逆时针" />
<van-circle value="{{ value }}" size="120" text="大小定制" />
</demo-block>
<van-button type="primary" size="small" data-step="10" bind:tap="run">增加</van-button>
<van-button type="danger" size="small" data-step="-10" bind:tap="run">减少</van-button>

152
packages/circle/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,152 @@
// 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-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 100px;height:100px"
type="2d"
/>
<wx-cover-view
class="van-circle__text"
>
25%
</wx-cover-view>
</wx-view>
</van-circle>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
样式定制
</wx-view>
<van-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 100px;height:100px"
type=""
/>
<wx-cover-view
class="van-circle__text"
>
宽度定制
</wx-cover-view>
</wx-view>
</van-circle>
<van-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 100px;height:100px"
type=""
/>
<wx-cover-view
class="van-circle__text"
>
颜色定制
</wx-cover-view>
</wx-view>
</van-circle>
<van-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 100px;height:100px"
type=""
/>
<wx-cover-view
class="van-circle__text"
>
渐变色
</wx-cover-view>
</wx-view>
</van-circle>
<van-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 100px;height:100px"
type=""
/>
<wx-cover-view
class="van-circle__text"
>
逆时针
</wx-cover-view>
</wx-view>
</van-circle>
<van-circle>
<wx-view
class="van-circle"
>
<wx-canvas
canvasId="van-circle"
class="van-circle__canvas"
id="van-circle"
style="width: 120px;height:120px"
type=""
/>
<wx-cover-view
class="van-circle__text"
>
大小定制
</wx-cover-view>
</wx-view>
</van-circle>
</wx-view>
</demo-block>
<van-button
data-step="10"
size="small"
type="primary"
bind:tap="run"
>
增加
</van-button>
<van-button
data-step="-10"
size="small"
type="danger"
bind:tap="run"
>
减少
</van-button>
</main>
`;

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