Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6132
Star 98
Fork 169
H
hello uni-app x
提交 96469f1d 编写于 作者: Y yurj26
浏览文件
操作

feat: update button test

上级 58016106
隐藏空白更改
内联 并排
Showing with 154 addition and 64 deletion
pages/component/button/button.test.js 0 → 100644
浏览文件 @ 96469f1d
const PAGE_PATH = '/pages/component/button/button'
describe('Button.uvue', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
it('click', async () => {
// TODO 待测试框架支持text的dispatchEvent
// const btn = await page.$('.btn')
// expect((await page.data())['count']).toEqual(0)
// await btn.tap()
// expect((await page.data())['count']).toEqual(1)
// await page.setData({
// disabled_boolean: true,
// })
// await btn.tap()
// expect((await page.data())['count']).toEqual(1)
// await page.setData({
// disabled_boolean: false,
// })
// await btn.tap()
// expect((await page.data())['count']).toEqual(2)
})
it('length', async () => {
const elements = await page.$$('.btn')
expect(elements.length).toBe(1)
})
it('text', async () => {
const textBtn = await page.$('.btn')
expect(await textBtn.text()).toEqual('uni-app-x')
await page.setData({
text: 'uni-app-x button',
})
expect(await textBtn.text()).toEqual('uni-app-x button')
})
it('type', async () => {
const btn = await page.$('.btn')
expect(await btn.property('type')).toBe('default')
await page.setData({
type_enum_current: 1,
})
await page.waitFor(500)
expect(await btn.property('type')).toBe('primary')
await page.setData({
type_enum_current: 2,
})
await page.waitFor(500)
expect(await btn.property('type')).toBe('warn')
})
it('size', async () => {
const btn = await page.$('.btn')
expect(await btn.property('size')).toBe('default')
await page.setData({
size_enum_current: 1,
})
await page.waitFor(500)
expect(await btn.property('size')).toBe('mini')
})
it('plain', async () => {
const btn = await page.$('.btn')
expect(await btn.property('plain')).toBe(false)
await page.setData({
plain_boolean: true,
})
await page.waitFor(500)
expect(await btn.property('plain')).toBe(true)
})
it('disabled', async () => {
const btn = await page.$('.btn')
expect(await btn.property('disabled')).toBe(false)
await page.setData({
disabled_boolean: true,
})
await page.waitFor(500)
expect(await btn.property('disabled')).toBe(true)
})
})
\ No newline at end of file
pages/component/button/button.uvue
浏览文件 @ 96469f1d
<script> <script>
import { type ItemType } from '@/components/enum-data/enum-data.vue' import { type ItemType } from '@/components/enum-data/enum-data.vue'
export default { export default {
data() { data() {
return { return {
plain_boolean: false, plain_boolean: false,
disabled_boolean: false, disabled_boolean: false,
size_enum: [{"value":0,"name":"default"},{"value":1,"name":"mini"}] as ItemType[], default_style: false,
size_enum_current: 0, size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
type_enum: [{"value":0,"name":"default"},{"value":1,"name":"primary"},{"value":2,"name":"warn"}] as ItemType[], size_enum_current: 0,
type_enum_current: 0 type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
} type_enum_current: 0,
}, count: 0,
methods: { text: 'uni-app-x'
button_click() { console.log("组件被点击时触发") }, }
button_touchstart() { console.log("手指触摸动作开始") }, },
button_touchmove() { console.log("手指触摸后移动") }, methods: {
button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") }, button_click() {
button_touchend() { console.log("手指触摸动作结束") }, console.log("组件被点击时触发")
button_tap() { console.log("手指触摸后马上离开") }, this.count++
button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") }, },
change_plain_boolean(checked : boolean) { this.plain_boolean = checked }, button_touchstart() { console.log("手指触摸动作开始") },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked }, button_touchmove() { console.log("手指触摸后移动") },
radio_change_size_enum(checked : number) { this.size_enum_current = checked }, button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_change_type_enum(checked : number) { this.type_enum_current = checked } button_touchend() { console.log("手指触摸动作结束") },
} button_tap() { console.log("手指触摸后马上离开") },
} button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
</script> change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
<template> change_default_style(checked : boolean) { this.default_style = checked },
<!-- #ifdef APP --> radio_change_size_enum(checked : number) { this.size_enum_current = checked },
<scroll-view style="flex:1"> radio_change_type_enum(checked : number) { this.type_enum_current = checked }
<!-- #endif --> }
<view class="main"> }
<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress">uni-app-x</button> </script>
</view>
<template>
<view class="content nvue"> <!-- #ifdef APP -->
<boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data> <scroll-view style="flex:1">
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data> <!-- #endif -->
<enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data> <view class="main">
<enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data> <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
</view> :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
<!-- #ifdef APP --> @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
</scroll-view> @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
<!-- #endif --> :style="default_style ? 'color: #cccccc': ''">{{text}}</button>
</template> </view>
<style> <view class="content">
.main { <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
max-height: 500rpx; <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
padding: 10rpx 0; <boolean-data :defaultValue="false" title="是否设置文字颜色" @change="change_default_style"></boolean-data>
border-bottom: 1px solid rgba(0,0,0,.06); <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
flex-direction: row; <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
justify-content: center; </view>
} <!-- #ifdef APP -->
</scroll-view>
.main .list-item { <!-- #endif -->
width:100%; </template>
height:200rpx;
border: 1px solid #666; <style>
} .main {
max-height: 500rpx;
</style> padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或