提交 03114d53 编写于 作者: H hdx

feat: add slider test

上级 a8d19576
const PAGE_PATH = '/pages/component/slider/slider'
describe('slider', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
// it('change', async () => {})
it('value', async () => {
const slider = await page.$('.slider-custom-color-and-size')
const sliderValue = 80
await page.setData({
sliderValue: sliderValue,
})
await page.waitFor(100)
expect(await slider.property('value')).toBe(sliderValue)
})
it('color', async () => {
const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('backgroundColor')).toBe('#000000')
expect(await slider.property('activeColor')).toBe('#FFCC33')
expect(await slider.property('blockColor')).toBe('#8A6DE9')
const backgroundColor = '#008000'
const activeColor = '#00FF00'
const blockColor = '#0000A0'
await page.setData({
sliderBackgroundColor: backgroundColor,
sliderActiveColor: activeColor,
sliderBlockColor: blockColor,
})
await page.waitFor(100)
expect(await slider.property('backgroundColor')).toBe(backgroundColor)
expect(await slider.property('activeColor')).toBe(activeColor)
expect(await slider.property('blockColor')).toBe(blockColor)
})
it('block-size', async () => {
const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('blockSize')).toBe(20)
const blockSize = 18
await page.setData({
sliderBlockSize: blockSize,
})
await page.waitFor(100)
expect(await slider.property('blockSize')).toBe(blockSize)
})
})
\ No newline at end of file
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
<view class="uni-title">不同颜色和大小的滑块</view> <view class="uni-title">不同颜色和大小的滑块</view>
<view> <view>
<slider @change="sliderChange" :value="50" backgroundColor="#000000" activeColor="#FFCC33" block-color="#8A6DE9" <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
:block-size="20" /> :block-size="sliderBlockSize" />
</view> </view>
</view> </view>
</template> </template>
...@@ -28,7 +28,12 @@ ...@@ -28,7 +28,12 @@
export default { export default {
data() { data() {
return { return {
title: 'slider 滑块' title: 'slider 滑块',
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: '#000000',
sliderActiveColor: '#FFCC33',
sliderBlockColor: '#8A6DE9',
} }
}, },
methods: { methods: {
......
const PAGE_PATH = '/pages/component/switch/switch'
describe('switch', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
// TODO
// it('click', async () => {
// const switch_element = await page.$('.switch-checked')
// const switch_element_value = await page.$('.switch-checked-value')
// expect(await switch_element_value.text()).toBe('true')
// await page.waitFor(200)
// await switch_element.tap()
// await page.waitFor(200)
// expect(await switch_element_value.text()).toBe('false')
// await switch_element.tap()
// await page.waitFor(200)
// expect(await switch_element_value.text()).toBe('true')
// })
it('checked', async () => {
const switch_element = await page.$('.switch-checked')
await page.setData({
checked: false,
})
await page.waitFor(100)
expect(await switch_element.property('checked')).toBe(false)
await page.setData({
checked: true,
})
await page.waitFor(100)
expect(await switch_element.property('checked')).toBe(true)
})
it('color', async () => {
const switch_element = await page.$('.switch-color')
expect(await switch_element.property('color')).toBe('#FFCC33')
const color = '#00ff00'
await page.setData({
color: color
})
await page.waitFor(100)
expect(await switch_element.property('color')).toBe(color)
})
})
\ No newline at end of file
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
<view class="uni-common-mt"> <view class="uni-common-mt">
<view class="uni-title">默认样式</view> <view class="uni-title">默认样式</view>
<view class="flex-row"> <view class="flex-row">
<switch :checked="true" @change="switch1Change" /> <switch class="switch-checked" :checked="checked" @change="switch1Change" />
<switch @change="switch2Change" /> <switch @change="switch2Change" />
<!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
</view> </view>
<view class="uni-title">不同颜色和尺寸的switch</view> <view class="uni-title">不同颜色和尺寸的switch</view>
<view class="flex-row"> <view class="flex-row">
<switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" /> <switch class="switch-color-checked" :color="color" style="transform:scale(0.7)" :checked="true" />
<switch color="#FFCC33" style="transform:scale(0.7)" /> <switch class="switch-color" :color="color" style="transform:scale(0.7)" />
</view> </view>
<view class="uni-title">推荐展示样式</view> <view class="uni-title">推荐展示样式</view>
</view> </view>
...@@ -30,11 +31,15 @@ ...@@ -30,11 +31,15 @@
export default { export default {
data() { data() {
return { return {
title: 'switch 开关' title: 'switch 开关',
checked: true,
color: '#FFCC33',
clickCheckedValue: true
} }
}, },
methods: { methods: {
switch1Change: function (e : SwitchChangeEvent) { switch1Change: function (e : SwitchChangeEvent) {
this.clickCheckedValue = e.detail.value
console.log('switch1 发生 change 事件,携带值为', e.detail.value) console.log('switch1 发生 change 事件,携带值为', e.detail.value)
}, },
switch2Change: function (e : SwitchChangeEvent) { switch2Change: function (e : SwitchChangeEvent) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册