提交 fe0aa991 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

test: 补充 props-emits 返回值测试

上级 b0bf1462
const PAGE_PATH = "/pages/component-instance/methods/call-method-easycom-uni-modules-composition"
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('callMethodTest', async () => {
// a[[]] only issue 8582
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) {
expect(1).toBe(1)
return
}
const delay = () =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
await page.callMethod('onButtonClick')
await delay()
const resStr1 = await page.$("#isNumListValid")
const resStr2 = await page.$("#isObjListValid")
expect(await resStr1.text()).toBe(`true`)
expect(await resStr2.text()).toBe(`true`)
})
<template> <template>
<view> <view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules> <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
<!-- #ifdef APP -->
<view>---</view> <view>---</view>
<test-props :numList="numList" :objList='objList' @buttonclick='onButtonClick' @numListChange='numListChange' <test-props id="btn1" :numList="numList" :objList='objList' @buttonclick='onButtonClick'
@objListChange='objListChange' style="width: 80px;height: 30px;background-color: lightblue"></test-props> @numListChange='numListChange' @objListChange='objListChange'
style="width: 80px;height: 30px;background-color: lightblue"></test-props>
<view style="flex-direction: row ;"> <view style="flex-direction: row ;">
<text>isNumListValid: </text> <text>isNumListValid: </text>
<text id='isNumListValid'>{{isNumListValid}}</text> <text id='isNumListValid'>{{isNumListValid}}</text>
...@@ -12,12 +14,14 @@ ...@@ -12,12 +14,14 @@
<text>isObjListValid: </text> <text>isObjListValid: </text>
<text id='isObjListValid'>{{isObjListValid}}</text> <text id='isObjListValid'>{{isObjListValid}}</text>
</view> </view>
<!-- #endif -->
</view> </view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
import { testInOtherFile } from './call-method-easycom-uni-modules' import { testInOtherFile } from './call-method-easycom-uni-modules'
import { ref, isProxy, isRef } from 'vue' import { ref, isProxy, isRef } from 'vue'
import { PropsChangeEvent } from '@/uni_modules/test-props'
const delay = () : Promise<string> => const delay = () : Promise<string> =>
new Promise((resolve, _) => { new Promise((resolve, _) => {
...@@ -28,12 +32,8 @@ ...@@ -28,12 +32,8 @@
const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null) const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)
const isWatched = ref(false)
const changeTimes = ref(0)
const propsList = ref<number[]>([])
const numList = ref<number[]>([1]) // 传递 props const numList = ref<number[]>([1]) // 传递 props
const objList = ref<Array<{ id : string }>>([]) const objList = ref<any[]>([])
const isNumListValid = ref(false) const isNumListValid = ref(false)
const isObjListValid = ref(false) const isObjListValid = ref(false)
...@@ -69,13 +69,48 @@ ...@@ -69,13 +69,48 @@
return testInOtherFile(callEasyMethod1.value!, text) return testInOtherFile(callEasyMethod1.value!, text)
} }
// #ifdef APP-ANDROID
const numListChange = (res : Map<string, Map<string, any>>) => {
const value = res['detail']!['value'] as number[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
isNumListValid.value = isArray && isLengthGt0
}
// #endif
// #ifdef APP-IOS
const numListChange = (res : any) => { const numListChange = (res : any) => {
isNumListValid.value = res.detail as boolean const value = res['detail']!['value'] as number[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
isNumListValid.value = isArray && isLengthGt0
}
// #endif
// #ifdef APP-ANDROID
const objListChange = (res : Map<string, Map<string, any>>) => {
const value = res['detail']!['value'] as any[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
isObjListValid.value = isArray && isLengthGt0
} }
// #endif
// #ifdef APP-IOS
const objListChange = (res : any) => { const objListChange = (res : any) => {
isObjListValid.value = res.detail as boolean const value = res['detail']!['value'] as any[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
isObjListValid.value = isArray && isLengthGt0
} }
// #endif
const onButtonClick = () => { const onButtonClick = () => {
// 改变 props: 观察 props 返回值为非响应式值
numList.value = [3, 2, 1]
objList.value = [{ id: '3' }, { id: '4' }]
} }
...@@ -89,10 +124,6 @@ ...@@ -89,10 +124,6 @@
callMethod4() callMethod4()
await delay() await delay()
callMethod5() callMethod5()
await delay()
// 改变 props: 观察 props 返回值为非响应式值
numList.value = [3, 2, 1]
objList.value = [{ id: '3' }, { id: '4' }]
} }
onReady(() => { onReady(() => {
...@@ -102,7 +133,6 @@ ...@@ -102,7 +133,6 @@
defineExpose({ defineExpose({
callMethodTest, callMethodTest,
callMethodInOtherFile, callMethodInOtherFile,
isNumListValid, onButtonClick
isObjListValid
}) })
</script> </script>
const PAGE_PATH = "/pages/component-instance/methods/call-method-easycom-uni-modules-options"
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('callMethodTest', async () => {
// app only issue 8582
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) {
expect(1).toBe(1)
return
}
const delay = () =>
new Promise((resolve, _) => {
setTimeout(() => {
resolve('')
}, 1000)
})
await page.callMethod('onButtonClick')
await delay()
const resStr1 = await page.$("#isNumListValid")
const resStr2 = await page.$("#isObjListValid")
expect(await resStr1.text()).toBe(`true`)
expect(await resStr2.text()).toBe(`true`)
})
<template> <template>
<view> <view>
<call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules> <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
<!-- #ifdef APP -->
<view>---</view> <view>---</view>
<test-props :numList="numList" :objList='objList' @buttonclick='onButtonClick' @numListChange='numListChange' <test-props id="btn1" :numList="numList" :objList='objList' @buttonclick='onButtonClick'
@objListChange='objListChange' style="width: 80px;height: 30px;background-color: lightblue"></test-props> @numListChange='numListChange' @objListChange='objListChange'
style="width: 80px;height: 30px;background-color: lightblue"></test-props>
<view style="flex-direction: row ;"> <view style="flex-direction: row ;">
<text>isNumListValid: </text> <text>isNumListValid: </text>
<text id='isNumListValid'>{{isNumListValid}}</text> <text id='isNumListValid'>{{isNumListValid}}</text>
...@@ -12,6 +15,7 @@ ...@@ -12,6 +15,7 @@
<text>isObjListValid: </text> <text>isObjListValid: </text>
<text id='isObjListValid'>{{isObjListValid}}</text> <text id='isObjListValid'>{{isObjListValid}}</text>
</view> </view>
<!-- #endif -->
</view> </view>
</template> </template>
...@@ -33,7 +37,7 @@ ...@@ -33,7 +37,7 @@
isWatched: false, isWatched: false,
changeTimes: 0, changeTimes: 0,
numList: [1] as number[], // 传递 props numList: [1] as number[], // 传递 props
objList: [] as Array<{ id : string }>, objList: [] as any[],
isNumListValid: false, isNumListValid: false,
isObjListValid: false isObjListValid: false
} }
...@@ -55,10 +59,7 @@ ...@@ -55,10 +59,7 @@
this.callMethod4() this.callMethod4()
await delay() await delay()
this.callMethod5() this.callMethod5()
await delay()
// 改变 props: 观察 props 返回值为非响应式值
this.numList = [3, 2, 1]
this.objList = [{ id: '3' }, { id: '4' }]
}, },
callMethod1() { callMethod1() {
// 调用组件的 foo1 方法 // 调用组件的 foo1 方法
...@@ -91,14 +92,45 @@ ...@@ -91,14 +92,45 @@
return testInOtherFile(this.callEasyMethod1!, text) return testInOtherFile(this.callEasyMethod1!, text)
}, },
numListChange(res) { // #ifdef APP-ANDROID
this.isNumListValid = res.detail numListChange(res : Map<string, Map<string, any>>) {
}, const value = res['detail']!['value'] as number[]
objListChange(res) { const isArray = Array.isArray(value)
this.isObjListValid = res.detail const isLengthGt0 = value.length > 0
}, this.isNumListValid = isArray && isLengthGt0
onButtonClick() { },
} // #endif
// #ifdef APP-IOS
numListChange(res : any) {
const value = res['detail']!['value'] as number[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
this.isNumListValid = isArray && isLengthGt0
},
// #endif
// #ifdef APP-ANDROID
objListChange(res : Map<string, Map<string, any>>) {
const value = res['detail']!['value'] as number[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
this.isObjListValid = isArray && isLengthGt0
},
// #endif
// #ifdef APP-IOS
objListChange(res : any) {
const value = res['detail']!['value'] as number[]
const isArray = Array.isArray(value)
const isLengthGt0 = value.length > 0
this.isObjListValid = isArray && isLengthGt0
},
// #endif
onButtonClick() {
// 改变 props: 观察 props 返回值为非响应式值
console.log('button click');
this.numList = [3, 2, 1]
this.objList = [{ id: '3' }, { id: '4' }]
}
} }
} }
</script> </script>
import { PropsChangeEvent, PropsChangeEventDetail } from './index.uts'
export class PropChangeEventImpl extends UniCustomEvent<PropsChangeEventDetail> implements PropsChangeEvent {
constructor(detail : PropsChangeEventDetail) {
super("propChange", detail);
}
}
import { IPropsChangeEvent,IPropsChangeEventDetail } from '../interface.uts'
export type PropsChangeEvent = IPropsChangeEvent
export type PropsChangeEventDetail = IPropsChangeEventDetail
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
import TextUtils from 'android.text.TextUtils'; import TextUtils from 'android.text.TextUtils';
import Button from 'android.widget.Button'; import Button from 'android.widget.Button';
import View from 'android.view.View'; import View from 'android.view.View';
import { IObjItem ,IPropsChangeEvent} from '../interface.uts'
import {PropChangeEventImpl} from './event.uts'
/** /**
* 引入三方库 * 引入三方库
* [可选实现,按需引入] * [可选实现,按需引入]
...@@ -33,11 +34,11 @@ ...@@ -33,11 +34,11 @@
/** /**
* 组件名称,也就是开发者使用的标签 * 组件名称,也就是开发者使用的标签
*/ */
name: "uts-button", name: "test-props",
/** /**
* 组件涉及的事件声明,只有声明过的事件,才能被正常发送 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
*/ */
emits: ['buttonclick'], emits: ['buttonclick', 'numListChange', 'objListChange'],
/** /**
* 属性声明,组件的使用者会传递这些属性值到组件 * 属性声明,组件的使用者会传递这些属性值到组件
*/ */
...@@ -45,6 +46,14 @@ ...@@ -45,6 +46,14 @@
"buttontext": { "buttontext": {
type: String, type: String,
default: "点击触发" default: "点击触发"
},
numList: {
type: Array as PropType<number[]>,
default: () => [] as number[]
},
objList: {
type: Array as PropType<IObjItem[]>,
default: () => [] as IObjItem[]
} }
}, },
/** /**
...@@ -68,6 +77,30 @@ ...@@ -68,6 +77,30 @@
}, },
immediate: false // 创建时是否通过此方法更新属性,默认值为false immediate: false // 创建时是否通过此方法更新属性,默认值为false
}, },
numList: {
handler(newVal : number[], oldVal : number[]) {
let detail = new Map<string, number[]>()
detail.set("value", newVal)
let data = new Map<string, any>()
data.set("detail", detail)
// const event = new PropChangeEventImpl(newVal)
this.$emit('numListChange', data)
},
immediate: true
},
objList: {
handler(newVal : any[], oldVal : any[]) {
let detail = new Map<string, any>()
detail.set("value", newVal)
let data = new Map<string, any>()
data.set("detail", detail)
this.$emit('objListChange', data)
},
immediate: true
}
}, },
/** /**
* 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露 * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
...@@ -192,4 +225,4 @@ ...@@ -192,4 +225,4 @@
<style> <style>
</style> </style>
\ No newline at end of file
...@@ -86,25 +86,20 @@ ...@@ -86,25 +86,20 @@
}, },
numList: { numList: {
handler(newVal : number[], oldVal : number[]) { handler(newVal : number[], oldVal : number[]) {
const isNumber = (val : number) : boolean => typeof val == 'number' let detail = new Map<string, any>()
const isEveryNumber = (newVal as number[]).every(isNumber) detail.set("value", newVal)
const isRawType = Array.isArray(newVal) && isEveryNumber
let data = new Map<string, any>() let data = new Map<string, any>()
data.set("detail", isRawType) data.set("detail", detail)
this.$emit('numListChange', data) this.$emit('numListChange', data)
}, },
immediate: true immediate: true
}, },
objList: { objList: {
handler(newVal:any[], oldVal:any[]) { handler(newVal : any[], oldVal : any[]) {
let detail = new Map<string, any>()
const isObj = (item:any):boolean => item instanceof UTSJSONObject detail.set("value", newVal)
const isEveryObj = (newVal as any[]).every(isObj)
const isRawType = Array.isArray(newVal) && isEveryObj
let data = new Map<string, any>() let data = new Map<string, any>()
data.set("detail", isRawType) data.set("detail", detail)
console.log(111,newVal,isEveryObj,isRawType)
this.$emit('objListChange', data) this.$emit('objListChange', data)
}, },
immediate: true immediate: true
......
export type IObjItem = { export type IObjItem = {
id : string id : string
} }
export type IPropsChangeEventDetail = {
value : number
}
export interface IPropsChangeEvent extends UniVideoEvent {
detail : IPropsChangeEventDetail[]
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册