mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 10:22:44 +08:00
test(Slider): add demo test
This commit is contained in:
nemo-shen
neverland
parent
4ada479baf
commit
338f90d5c5
@ -119,6 +119,7 @@
|
||||
"van-sidebar": "./dist/sidebar/index",
|
||||
"van-sidebar-item": "./dist/sidebar-item/index",
|
||||
"van-slider": "./dist/slider/index",
|
||||
"van-slider-demo": "./dist/slider/demo/index",
|
||||
"van-stepper": "./dist/stepper/index",
|
||||
"van-stepper-demo": "./dist/stepper/demo/index",
|
||||
"van-steps": "./dist/steps/index",
|
||||
|
||||
@ -1,20 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
currentValue: 50,
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: `当前值：${event.detail}`,
|
||||
});
|
||||
},
|
||||
|
||||
onDrag(event) {
|
||||
this.setData({
|
||||
currentValue: event.detail.value,
|
||||
});
|
||||
},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,83 +1 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-slider
|
||||
value="50"
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="双滑块">
|
||||
<van-slider
|
||||
range
|
||||
value="{{ [20, 60 ] }}"
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定选择范围">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
min="-50"
|
||||
max="50"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
value="50"
|
||||
disabled
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定步长">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
value="50"
|
||||
step="10"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义样式">
|
||||
<van-slider
|
||||
value="50"
|
||||
custom-class="slider"
|
||||
bar-height="4px"
|
||||
active-color="#ee0a24"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义按钮">
|
||||
<van-slider
|
||||
value="{{ currentValue }}"
|
||||
custom-class="slider"
|
||||
use-button-slot
|
||||
active-color="#ee0a24"
|
||||
bind:drag="onDrag"
|
||||
>
|
||||
<view class="custom-button" slot="button">
|
||||
{{ currentValue }}
|
||||
</view>
|
||||
</van-slider>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="垂直方向">
|
||||
<view style="height: 150px; padding-left: 30px;">
|
||||
<van-slider
|
||||
value="{{ 50 }}"
|
||||
vertical
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
<van-slider
|
||||
value="{{ [20, 60 ] }}"
|
||||
vertical
|
||||
range
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</demo-block>
|
||||
<van-slider-demo />
|
||||
|
||||
7
packages/slider/demo/index.json
Normal file
7
packages/slider/demo/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-slider": "../../slider/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
22
packages/slider/demo/index.ts
Normal file
22
packages/slider/demo/index.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
currentValue: 50,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: `当前值：${event.detail}`,
|
||||
});
|
||||
},
|
||||
|
||||
onDrag(event) {
|
||||
this.setData({
|
||||
currentValue: event.detail.value,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
83
packages/slider/demo/index.wxml
Normal file
83
packages/slider/demo/index.wxml
Normal file
@ -0,0 +1,83 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-slider
|
||||
value="50"
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="双滑块">
|
||||
<van-slider
|
||||
range
|
||||
value="{{ [20, 60 ] }}"
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定选择范围">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
min="-50"
|
||||
max="50"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
value="50"
|
||||
disabled
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定步长">
|
||||
<van-slider
|
||||
custom-class="slider"
|
||||
value="50"
|
||||
step="10"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义样式">
|
||||
<van-slider
|
||||
value="50"
|
||||
custom-class="slider"
|
||||
bar-height="4px"
|
||||
active-color="#ee0a24"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义按钮">
|
||||
<van-slider
|
||||
value="{{ currentValue }}"
|
||||
custom-class="slider"
|
||||
use-button-slot
|
||||
active-color="#ee0a24"
|
||||
bind:drag="onDrag"
|
||||
>
|
||||
<view class="custom-button" slot="button">
|
||||
{{ currentValue }}
|
||||
</view>
|
||||
</van-slider>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="垂直方向">
|
||||
<view style="height: 150px; padding-left: 30px;">
|
||||
<van-slider
|
||||
value="{{ 50 }}"
|
||||
vertical
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
<van-slider
|
||||
value="{{ [20, 60 ] }}"
|
||||
vertical
|
||||
range
|
||||
custom-class="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</demo-block>
|
||||
442
packages/slider/test/__snapshots__/demo.spec.ts.snap
Normal file
442
packages/slider/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,442 @@
|
||||
// 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-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
双滑块
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 40%;
|
||||
left: 20%;
|
||||
top: 0;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper-left"
|
||||
data-index="{{0}}"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper-right"
|
||||
data-index="{{1}}"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
指定选择范围
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
禁用
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider van-slider--disabled"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
指定步长
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义样式
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: 4px;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; background-color:#ee0a24"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义按钮
|
||||
</wx-view>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:drag="onDrag"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider"
|
||||
style="
|
||||
background: ;
|
||||
height: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
width: 50%;
|
||||
left: 0%;
|
||||
top: 0;
|
||||
|
||||
; background-color:#ee0a24"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-button"
|
||||
slot="button"
|
||||
>
|
||||
|
||||
50
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
垂直方向
|
||||
</wx-view>
|
||||
<wx-view
|
||||
style="height: 150px; padding-left: 30px;"
|
||||
>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider van-slider--vertical"
|
||||
style="
|
||||
background: ;
|
||||
width: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
height: 50%;
|
||||
left: 0;
|
||||
top: 0%;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
<van-slider
|
||||
customClass="slider"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-slider van-slider--vertical"
|
||||
style="
|
||||
background: ;
|
||||
width: ;
|
||||
"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__bar"
|
||||
style="
|
||||
height: 40%;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
|
||||
; "
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper-left"
|
||||
data-index="{{0}}"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-slider__button-wrapper-right"
|
||||
data-index="{{1}}"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
bind:touchend="onTouchEnd"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchstart="onTouchStart"
|
||||
>
|
||||
<wx-view
|
||||
class="van-slider__button"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-slider>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
11
packages/slider/test/demo.spec.ts
Normal file
11
packages/slider/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