提交 abb4ab09 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor: 删除无用模块

上级 997e1a92
<template>
<view class="page">
<view class="row">
<text>子组件 初始值</text>
<text class="init-value">init</text>
</view>
<view class="row">
<text>子组件 val</text>
<text>{{ val }}</text>
</view>
<view class="row">
<text>子组件 值是否变化</text>
<text>{{ changed }}</text>
</view>
<view class="row">
<text>immediate=true 值应为 true</text>
<text>{{ immediateChanged }}</text>
</view>
</view>
</template>
<script>
export default {
name: "watch-child",
data() {
return {
val: "init",
changed: false,
immediateValue: 'value',
immediateChanged: false
}
},
mounted() {
this.createWatch()
this.createImmediateWatch()
},
methods: {
createWatch() {
this.$watch('val', () => {
this.changed = !this.changed
})
this.val = 'changed'
},
createImmediateWatch() {
this.$watch('immediateValue', () => {
this.immediateChanged = !this.immediateChanged
}, {
immediate: true
})
},
}
}
</script>
<style>
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
\ No newline at end of file
<template>
<view>
<view v-for="(item, _) in list">
<text class="data-item-text">{{JSON.stringify(item)}}</text>
<!-- TODO 暂不支持 for UTSJSONObject -->
<!-- <view v-for="(value, key) in item">
<text class="k">{{key}}</text>
<text class="v">{{value}}</text>
</view> -->
</view>
<view>
<text class="watch-count">{{watchCount}}</text>
</view>
</view>
</template>
<script>
import { PropType } from 'vue'
export default {
name: 'ArrayDeep',
props: {
list: {
type: Array as PropType<Array<UTSJSONObject>>,
default: [] as Array<UTSJSONObject>
},
},
data() {
return {
watchCount: 0
}
},
watch: {
list: {
handler(_ : Array<UTSJSONObject>) {
this.watchCount++
},
deep: true,
immediate: true
}
}
}
</script>
\ No newline at end of file
const PAGE_PATH = '/pages/component-instance/watch-function/watch-array'
describe('watch', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
it('change', async () => {
// immediate count = 1
await validateCount(page, 1)
const btnChangeData1 = await page.$('.change-data1')
await btnChangeData1.tap()
await page.waitFor(100)
// count = 1, 支持 deep
await validateCount(page, 2)
// 验证数据正确性
await validateData1(page, 1, 2)
const btnChangeData2 = await page.$('.change-data2')
await btnChangeData2.tap()
await page.waitFor(100)
// count = 2,重新赋值触发
await validateCount(page, 3)
// 验证数据正确性
await validateData2(page, 3, 4)
})
})
async function validateCount(page, count) {
// page
const count_text = await page.$('.watch-count')
expect(await count_text.text()).toBe(count + '')
// page.child
const count_child = await page.$('.watch-array-child')
const count_child_text = await count_child.$('.watch-count')
expect(await count_child_text.text()).toBe(count + '')
}
async function validateData1(page, value1, value2) {
const page_text = await page.$('.data-item-text')
const page_json = JSON.parse(await page_text.text())
expect(page_json.a).toBe(value1)
expect(page_json.b).toBe(value2)
const child = await page.$('.watch-array-child')
const child_text = await child.$('.data-item-text')
const child_json = JSON.parse(await child_text.text())
expect(child_json.a).toBe(value1)
expect(child_json.b).toBe(value2)
}
async function validateData2(page, value1, value2) {
const page_text = await page.$('.data-item-text')
const page_json = JSON.parse(await page_text.text())
expect(page_json.c).toBe(value1)
expect(page_json.d).toBe(value2)
const child = await page.$('.watch-array-child')
const child_text = await child.$('.data-item-text')
const child_json = JSON.parse(await child_text.text())
expect(child_json.c).toBe(value1)
expect(child_json.d).toBe(value2)
}
\ No newline at end of file
<template>
<view>
<view v-for="item in dataList">
<text class="data-item-text">{{JSON.stringify(item)}}</text>
<!-- TODO 暂不支持 for UTSJSONObject -->
<!-- <view v-for="(value, key) in item">
<text class="k">{{key}}</text>
<text class="v">{{value}}</text>
</view> -->
</view>
<view>
<text class="watch-count">{{watchCount}}</text>
</view>
<view>
<text>Watch array in component</text>
</view>
<watch-array-child class="watch-array-child" :list="dataList"></watch-array-child>
<button class="change-data1" @click="changeData1">changeData1(push)</button>
<button class="change-data2" @click="changeData2">changeData2(allocate)</button>
</view>
</template>
<script>
import WatchArrayChild from './watch-array-child.uvue'
export default {
components: {
WatchArrayChild
},
data() {
return {
dataList: [] as Array<UTSJSONObject>,
watchCount: 0
}
},
watch: {
dataList: {
handler(_ : Array<UTSJSONObject>) {
this.watchCount++
},
deep: true,
immediate: true
}
},
methods: {
changeData1() {
let item = {
"a": 1,
"b": 2
}
this.dataList.push(item)
},
changeData2() {
let list = [{
"c": 3,
"d": 4
}] as Array<UTSJSONObject>
this.dataList = list
}
}
}
</script>
\ No newline at end of file
const PAGE_PATH = '/pages/component-instance/watch-function/watch-function'
describe('$watch()', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
it('$watch() 生效', async () => {
// 验证立即触发
const value4_new = await page.$('.value-4-n')
const value4_old = await page.$('.value-4-o')
expect(await value4_new.text()).toBe('6')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
// TODO 安卓端由于类型问题,此处返回初始值,web端无值
expect(await value4_old.text()).toBe('6')
}
const btn = await page.$('.btn-click')
// 改变 10 次
for (let i = 1; i < 10; i++) {
await btn.tap()
await page.waitFor(50)
await clickCount(page, i)
}
})
it('子组件 $watch() 生效', async () => {
const initValue = await page.$('.child-init-value')
const comp = await page.$('.watch-child')
const value = await (await comp.data()).val
const isChange = await (await comp.data()).changed
expect(value).not.toBe('init')
expect(isChange).toBe(true)
const isChange2 = await (await comp.data()).immediateChanged
expect(isChange2).toBe(true)
})
})
async function clickCount(page, count) {
// 验证数据
const data = await page.data()
const data_a = data.a
const data_b = data.b
const data_d = data.c.d
const data_e = data.e
const data_f = data.f
expect(data_a).toBe(1 + count)
expect(data_b).toBe(2 + count)
expect(data_d).toBe(4 + count)
expect(data_e).toBe(5 + count)
expect(data_f).toBe(6 + count)
// 验证界面
const value1_new = await page.$('.value-1-n')
const value1_old = await page.$('.value-1-o')
const value2_new = await page.$('.value-2-n')
const value2_old = await page.$('.value-2-o')
const value3_new = await page.$('.value-3-n')
const value3_old = await page.$('.value-3-o')
const value4_new = await page.$('.value-4-n')
const value4_old = await page.$('.value-4-o')
const new_count = count
const old_count = count - 1
expect(await value1_new.text()).toBe(1 + new_count + '')
expect(await value1_old.text()).toBe(1 + old_count + '')
expect(await value2_new.text()).toBe(4 + new_count + '')
expect(await value2_old.text()).toBe(4 + old_count + '')
expect(await value3_new.text()).toBe(1 + new_count + 2 + new_count + '')
expect(await value3_old.text()).toBe(1 + old_count + 2 + old_count + '')
expect(await value4_new.text()).toBe(6 + new_count + '')
expect(await value4_old.text()).toBe(6 + old_count + '')
}
\ No newline at end of file
<template>
<view class="page">
<button class="btn-click" type="default" @click="click">Click</button>
<view>
<view class="value-item">
<text class="value-item-k">a</text>
<text class="value-item-v value-1-n">{{v1New}}</text>
<text class="value-item-v value-1-o">{{v1Old}}</text>
</view>
<view class="value-item">
<text class="value-item-k">c.d</text>
<text class="value-item-v value-2-n">{{v2New}}</text>
<text class="value-item-v value-2-o">{{v2Old}}</text>
</view>
<view class="value-item">
<text class="value-item-k">a+b</text>
<text class="value-item-v value-3-n">{{v3New}}</text>
<text class="value-item-v value-3-o">{{v3Old}}</text>
</view>
<view class="value-item">
<text class="value-item-k">f</text>
<text class="value-item-v value-4-n">{{v4New}}</text>
<text class="value-item-v value-4-o">{{v4Old}}</text>
</view>
</view>
<watch-child class="watch-child"></watch-child>
</view>
</template>
<script>
import child from './child.uvue'
type C = {
d : number
}
export default {
components: {
watchChild: child
},
data() {
return {
a: 1,
b: 2,
c: {
d: 4
} as C,
e: 5,
f: 6,
v1New: 0,
v1Old: 0,
v2New: 0,
v2Old: 0,
v3New: 0,
v3Old: 0,
v4New: 0,
v4Old: 0,
}
},
mounted() {
this.$watch('a', (newVal, oldVal) => {
this.v1New = newVal
this.v1Old = oldVal
})
this.$watch('c.d', (newVal : number, oldVal : number) => {
this.v2New = newVal
this.v2Old = oldVal
})
this.$watch(() : number => this.a + this.b, (newVal : number, oldVal : number) => {
this.v3New = newVal
this.v3Old = oldVal
})
this.$watch('f', (newVal, oldVal) => {
this.v4New = newVal
this.v4Old = oldVal
}, { immediate: true })
},
methods: {
click() {
this.a++
this.b++
this.c.d++
this.e++
this.f++
}
}
}
</script>
<style>
.value {
flex: 1;
flex-direction: column;
}
.value-item {
flex-direction: row;
}
.value-item-k {
width: 50px;
line-height: 2;
}
.value-item-v {
font-weight: bold;
line-height: 2;
margin-left: 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册