增加组件实例测试用例

pages/component-instance/attrs/attrs.test.js

 const PAGE_PATH = '/pages/component-instance/attrs/attrs'
 
 describe('$props', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$attrs中不应该存在$props属性（已在组件props中声明）', async () => {
+    const val = await page.$('.has-props-attrs')
+    expect(await val.text()).toBe('false')
+  })
+
+  it('$attrs中不应该存在$emits属性（已在组件emits中声明）', async () => {
+    const val = await page.$('.has-emits-attrs')
+    expect(await val.text()).toBe('false')
+  })
+
+  it('$attrs中可以获取到未声明的属性', async () => {
+    const val = await page.$('.has-attrs')
+    expect(await val.text()).toBe('true')
+  })
 })

pages/component-instance/attrs/child.uvue

@@ -2,15 +2,15 @@
   <view>
     <view class="row">
       <text>hasPropsAttrs</text>
-      <text>{{ hasPropsAttrs }}</text>
+      <text class="has-props-attrs">{{ hasPropsAttrs }}</text>
     </view>
     <view class="row">
       <text>hasEmitsAttr</text>
-      <text>{{ hasEmitsAttr }}</text>
+      <text class="has-emits-attrs">{{ hasEmitsAttr }}</text>
     </view>
     <view class="row">
       <text>hasAttrs</text>
-      <text>{{ hasAttrs }}</text>
+      <text class="has-attrs">{{ hasAttrs }}</text>
     </view>
   </view>
 </template>

pages/component-instance/data/data.test.js

@@ -7,7 +7,6 @@ describe('$data', () => {
     await page.waitFor(500)
   })
 
-
   it('should data.val === 2', async () => {
     const plusButton = await page.$('.plus')
     await plusButton.tap()

pages/component-instance/data/data.uvue

 <template>
   <view class="page">
-    <view class="row">初始值: <text>1</text></view>
+    <view class="row">初始值1: <text>1</text></view>
     <view class="row">data.val: <text class="val">{{val}}</text></view>
     <view class="row">data._val: <text class="_val">{{_val}}</text></view>
     <view class="row">data.$val: <text class="$val">{{$val}}</text></view>

pages/component-instance/el/el.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/el/el'
 
-describe('$props', () => {
+describe('$el', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$el元素可用', async () => {
+    const el = await page.$('.tag-name')
+    expect(await el.text()).toBe('view')
+  })
 })

pages/component-instance/emit-function/child.uvue

 <template>
   <view>
-    <button @click="click">调用父组件事件</button>
+    <button @click="click" class="call-parent-btn">调用父组件事件</button>
   </view>
 </template>
 
@@ -9,7 +9,7 @@ export default {
   emits: ['callback'],
   methods: {
     click () {
-      this.$emit('callback', 'string', `${Date.now()}`)
+      this.$emit('callback', `${Date.now()}`)
     }
   }
 }

pages/component-instance/emit-function/emit-function.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/emit-function/emit-function'
 
-describe('$props', () => {
+describe('$emit()', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$emit() 事件生效', async () => {
+    const beforeValue = await page.data('value')
+    const btn = await page.$('.call-parent-btn')
+
+    btn.tap()
+
+    const afterValue = await page.data('value')
+
+    expect(beforeValue).not.toBe(afterValue)
+  })
 })

pages/component-instance/emit-function/emit-function.uvue

@@ -19,12 +19,12 @@ export default {
   },
   data () {
     return {
-      value: [] as string[]
+      value: ""
     }
   },
   methods: {
-    callback (str: string, str1: string) {
-      this.value = [str, str1]
+    callback (str: string) {
+      this.value = str
     }
   }
 }

pages/component-instance/forceUpdate-function/forceUpdate-function.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
-
-describe('$props', () => {
-
-})

pages/component-instance/nextTick-function/nextTick-function.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
-
-describe('$props', () => {
-
-})

pages/component-instance/nextTick-function/nextTick-function.uvue

@@ -7,9 +7,6 @@
 </template>
 
 <script lang="ts">
-type Obj = {
-  key: string
-}
 export default {
   data () {
     return {

pages/component-instance/options/options.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/options/options'
 
-describe('$props', () => {
+describe('$options', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('获取到组件name属性', async () => {
+    const data = await page.data()
+    expect(data.name).toBe('$options')
+  });
 })

pages/component-instance/options/options.uvue

@@ -2,7 +2,7 @@
   <view class="page">
     <view class="row">
       <text>name: </text>
-      <text>{{name}}</text>
+      <text class="value">{{name}}</text>
     </view>
   </view>
 </template>

pages/component-instance/parent/child.uvue

 <template>
   <view class="child">
-    <view>{{value}}</view>
+    <view class="parent-text">{{value}}</view>
+    <view class="parent-func-text">{{callbackValue}}</view>
+    <button @click="testFunction" class="call-parent-func">调用父组件方法</button>
   </view>
 </template>
 
@@ -8,15 +10,16 @@
 export default {
   data () {
     return {
-      value: "child"
+      value: "child",
+      callbackValue: ""
     }
   },
   mounted () {
     this.value = this.$parent!.$data['value'] as string
   },
   methods: {
-    testFunction (): string {
-      return this.$parent!.$callMethod('testFunction') as string
+    testFunction () {
+      this.callbackValue = this.$parent!.$callMethod('testFunction') as string
     }
   }
 }

pages/component-instance/parent/parent.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/parent/parent'
 
-describe('$props', () => {
+describe('$parent', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$parent 属性生效', async () => {
+    const el = await page.$('.parent-text')
+
+    expect(await el.text()).toBe('parent')
+  });
+
+  it('调用$parent方法正常', async () => {
+    const el = await page.$('.parent-func-text')
+    const btn = await page.$('.call-parent-func')
+
+    btn.tap()
+
+    await page.waitFor(1000)
+
+    expect(await el.text()).toBe('parentFunctionResult')
+  })
 })

pages/component-instance/props/check-type.uvue

 <template>
   <view class="component">
     <view class="row">
-      <text>string: </text><text>{{str}}</text>
+      <text>string: </text><text class="string">{{str}}</text>
     </view>
     <view class="row">
-      <text>num: </text><text>{{num}}</text>
+      <text>num: </text><text class="number">{{num}}</text>
     </view>
     <view class="row">
-      <text>bool: </text><text>{{bool}}</text>
+      <text>bool: </text><text class="boolean">{{bool}}</text>
     </view>
 <!--    <view class="row">-->
 <!--      <text>arr: </text>-->

pages/component-instance/props/props.test.js

 const PAGE_PATH = '/pages/component-instance/props/props'
 
 describe('$props', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$props 属性生效', async () => {
+    const string = await page.$('.string')
+    const number = await page.$('.number')
+    const boolean = await page.$('.boolean')
+
+    expect(await string.text()).toBe('abcd')
+    expect(await number.text()).toBe('12345')
+    expect(await boolean.text()).toBe('true')
+  })
 })

pages/component-instance/refs/refs.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/refs/refs'
 
-describe('$props', () => {
+describe('$refs', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$refs 属性生效', async () => {
+    const data = await page.data()
+
+    expect(data.existRef).toBe(true)
+  });
 })

pages/component-instance/refs/refs.uvue

 <template>
   <view class="page">
-    <view ref="node">NodeRef</view>
+    <view ref="node">NodeRef: {{existRef}}</view>
 <!--    <child ref="component">ComponentRef</child>-->
   </view>
 </template>
@@ -12,7 +12,16 @@ export default {
   // components: {
   //   child
   // },
+  data () {
+    return {
+      existRef: false
+    }
+  },
   mounted () {
+    const nodeRef = this.$refs.get('node')
+
+    this.existRef = nodeRef !== null
+
    console.log(this.$refs)
   }
 }

pages/component-instance/root/root.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/root/root'
 
-describe('$props', () => {
+describe('$root', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$root 属性生效', async () => {
+    const root = await page.callMethod('getRoot')
+
+    expect(root).toBe(true)
+  })
 })

pages/component-instance/root/root.uvue

 <template>
   <view class="page">
-    <view class="row">rootIsApp: <text>{{isApp}}</text></view>
+    <view class="row">root: <text>{{root}}</text></view>
   </view>
 </template>
 
@@ -8,11 +8,13 @@
 export default {
   data () {
     return {
-      isApp: false
+      root: true
     }
   },
-  mounted () {
-    // this.isApp = this.$root.app
+  methods: {
+    getRoot (): boolean {
+      return this.$root!.$data.get('root') as boolean
+    }
   }
 }
 </script>

pages/component-instance/slots/slots.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/slots/slots'
 
-describe('$props', () => {
+describe('$slots', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$slots 生效', async () => {
+    const slotComp = await page.$('.slot-comp')
+    const hasSlots = await slotComp.callMethod('hasSlots')
+
+    expect(hasSlots).toBe(true)
+  })
 })

pages/component-instance/slots/slots.uvue

 <template>
   <view class="page">
-    <slot-comp>
+    <slot-comp class="slot-comp">
       <template v-slot:header>header</template>
       <template v-slot:footer>footer</template>
     </slot-comp>

pages/component-instance/watch-function/watch-function.test.js

-const PAGE_PATH = '/pages/component-instance/props/props'
+const PAGE_PATH = '/pages/component-instance/watch-function/watch-function'
 
-describe('$props', () => {
+describe('$watch()', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
 
+  it('$watch() 生效', async () => {
+    const initValue = (await page.$('.init')).text()
+    const value = await (await page.data()).val
+    const isChange = await (await page.data()).changed
+
+    expect(value).not.toBe(initValue)
+    expect(isChange).toBe(true)
+  })
 })

pages/component-instance/watch-function/watch-function.uvue

@@ -2,7 +2,7 @@
   <view class="page">
     <view class="row">
       <text>初始值</text>
-      <text>init</text>
+      <text class="init-value">init</text>
     </view>
     <view class="row">
       <text>val</text>
@@ -27,8 +27,8 @@ export default {
     return {
       val: "init",
       changed: false,
-      a: 'a',
-      b: 'b',
+      // a: 'a',
+      // b: 'b',
       // abChanged: false
     }
   },