提交 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 @@
<view class="uni-title">不同颜色和大小的滑块</view>
<view>
<slider @change="sliderChange" :value="50" backgroundColor="#000000" activeColor="#FFCC33" block-color="#8A6DE9"
:block-size="20" />
<slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
:block-size="sliderBlockSize" />
</view>
</view>
</template>
......@@ -28,7 +28,12 @@
export default {
data() {
return {
title: 'slider 滑块'
title: 'slider 滑块',
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: '#000000',
sliderActiveColor: '#FFCC33',
sliderBlockColor: '#8A6DE9',
}
},
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 @@
<view class="uni-common-mt">
<view class="uni-title">默认样式</view>
<view class="flex-row">
<switch :checked="true" @change="switch1Change" />
<switch class="switch-checked" :checked="checked" @change="switch1Change" />
<switch @change="switch2Change" />
<!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
</view>
<view class="uni-title">不同颜色和尺寸的switch</view>
<view class="flex-row">
<switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" />
<switch color="#FFCC33" style="transform:scale(0.7)" />
<switch class="switch-color-checked" :color="color" style="transform:scale(0.7)" :checked="true" />
<switch class="switch-color" :color="color" style="transform:scale(0.7)" />
</view>
<view class="uni-title">推荐展示样式</view>
</view>
......@@ -30,11 +31,15 @@
export default {
data() {
return {
title: 'switch 开关'
title: 'switch 开关',
checked: true,
color: '#FFCC33',
clickCheckedValue: true
}
},
methods: {
switch1Change: function (e : SwitchChangeEvent) {
this.clickCheckedValue = e.detail.value
console.log('switch1 发生 change 事件,携带值为', e.detail.value)
},
switch2Change: function (e : SwitchChangeEvent) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册