mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Circle): add demo test
This commit is contained in:
nemo-shen
neverland
parent
fd85dcb64b
commit
0ec0925001
@ -125,6 +125,7 @@
|
|||||||
"van-picker": "./dist/picker/index",
|
"van-picker": "./dist/picker/index",
|
||||||
"van-overlay": "./dist/overlay/index",
|
"van-overlay": "./dist/overlay/index",
|
||||||
"van-circle": "./dist/circle/index",
|
"van-circle": "./dist/circle/index",
|
||||||
|
"van-circle-demo": "./dist/circle/demo/index",
|
||||||
"van-index-bar": "./dist/index-bar/index",
|
"van-index-bar": "./dist/index-bar/index",
|
||||||
"van-index-anchor": "./dist/index-anchor/index",
|
"van-index-anchor": "./dist/index-anchor/index",
|
||||||
"van-grid": "./dist/grid/index",
|
"van-grid": "./dist/grid/index",
|
||||||
|
|||||||
@ -1,20 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
const format = rate => Math.min(Math.max(rate, 0), 100);
|
Page();
|
||||||
|
|
||||||
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))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,14 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-circle-demo />
|
||||||
<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>
|
|
||||||
|
|||||||
7
packages/circle/demo/index.json
Normal file
7
packages/circle/demo/index.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-circle": "../../circle/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
.van-circle {
|
.van-circle {
|
||||||
margin: 5px 10px 20px;
|
margin: 5px 10px 20px;
|
||||||
}
|
}
|
||||||
.van-button{
|
.van-button {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
22
packages/circle/demo/index.ts
Normal file
22
packages/circle/demo/index.ts
Normal 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
14
packages/circle/demo/index.wxml
Normal 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
152
packages/circle/test/__snapshots__/demo.spec.ts.snap
Normal 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
11
packages/circle/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