feat(component): is 补充内置组件示例

pages/built-in/special-elements/component/component-composition.uvue

 <template>
   <view class="container">
-    <component :is="currentComponentStr" />
     <component :is="currentComponentInstance" />
+    <component :is="myInput" :value="inputValue" id="my-input" />
     <button @click="changeCurrentComponent">change current component</button>
   </view>
 </template>
 
-<script lang="uts">
-import Foo from '../../../../components/Foo.uvue'
-import Bar from '../../../../components/Bar.uvue'
-export default {
-  components: {
-    Foo,
-    Bar
-  },
-  data() {
-    return {
-      currentComponentStr: 'Foo',
-      currentComponentInstance: Foo
-    }
-  },
-  methods: {
-    changeCurrentComponent() {
-      if (this.currentComponentStr === 'Foo') {
-        this.currentComponentStr = 'Bar'
-        this.currentComponentInstance = Bar
+<script setup lang="uts">
+  import Foo from '../../../../components/Foo.uvue'
+  import Bar from '../../../../components/Bar.uvue'
+
+  const currentComponentStr = ref('Foo')
+  const currentComponentInstance = ref(Foo)
+  const myInput = ref('input')
+  const inputValue = ref('default value')
+
+  const changeCurrentComponent = () => {
+    if (currentComponentStr.value === 'Foo') {
+      currentComponentStr.value = 'Bar'
+      currentComponentInstance.value = Bar
     } else {
-        this.currentComponentStr = 'Foo'
-        this.currentComponentInstance = Foo
+      currentComponentStr.value = 'Foo'
+      currentComponentInstance.value = Foo
     }
   }
-  }
-}
+
+  defineExpose({
+    changeCurrentComponent
+  })
 </script>
 
 <style>
-.item {
+  .item {
     display: flex;
     flex-direction: row;
     margin: 15px;
     border: #eee solid 1px;
-}
+  }
 </style>
\ No newline at end of file

pages/built-in/special-elements/component/component-options.uvue

@@ -2,14 +2,15 @@
   <view class="container">
     <component :is="currentComponentStr" />
     <component :is="currentComponentInstance" />
+    <component :is="myInput" :value="inputValue" id="my-input" />
     <button @click="changeCurrentComponent">change current component</button>
   </view>
 </template>
 
 <script lang="uts">
-import Foo from '../../../../components/Foo.uvue'
-import Bar from '../../../../components/Bar.uvue'
-export default {
+  import Foo from '../../../../components/Foo.uvue'
+  import Bar from '../../../../components/Bar.uvue'
+  export default {
     components: {
       Foo,
       Bar
@@ -17,7 +18,9 @@ export default {
     data() {
       return {
         currentComponentStr: 'Foo',
-      currentComponentInstance: Foo
+        currentComponentInstance: Foo,
+        myInput: 'input',
+        inputValue: 'default value'
       }
     },
     methods: {
@@ -31,14 +34,14 @@ export default {
         }
       }
     }
-}
+  }
 </script>
 
 <style>
-.item {
+  .item {
     display: flex;
     flex-direction: row;
     margin: 15px;
     border: #eee solid 1px;
-}
+  }
 </style>
\ No newline at end of file

pages/built-in/special-elements/component/component.test.js

 const PAGE_OPTIONS = '/pages/built-in/special-elements/component/component-options'
 const PAGE_COMPOSITION = '/pages/built-in/special-elements/component/component-composition'
+const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+const isWeb = platformInfo.startsWith('web')
 
 describe('built-in/component', () => {
   let page
-  const test = async () => {
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
     await page.waitFor('view')
+    const isOptionsPage = pagePath.indexOf('component-options') !== -1
     let fooList = await page.$$('.component-foo')
-    expect(fooList.length).toBe(2)
+    expect(fooList.length).toBe(isOptionsPage ? 2 : 1)
     expect(await fooList[0].text()).toBe('this is component Foo')
+    if (isOptionsPage) {
       expect(await fooList[1].text()).toBe('this is component Foo')
+    }
 
     let barList = await page.$$('.component-bar')
     expect(barList.length).toBe(0)
@@ -19,16 +25,21 @@ describe('built-in/component', () => {
     expect(fooList.length).toBe(0)
 
     barList = await page.$$('.component-bar')
-    expect(barList.length).toBe(2)
+    expect(barList.length).toBe(isOptionsPage ? 2 : 1)
     expect(await barList[0].text()).toBe('this is component Bar')
+    if (isOptionsPage) {
       expect(await barList[1].text()).toBe('this is component Bar')
     }
+    // web 端自动化测试，无法获取非 uni 元素
+    if (!isWeb) {
+      const myInput = await page.$('#my-input')
+      expect(await myInput.property('value')).toBe('default value')
+    }
+  }
   it('component Options API', async () => {
-    page = await program.reLaunch(PAGE_OPTIONS)
-    await test()
+    await test(PAGE_OPTIONS)
   })
   it('component Composition API', async () => {
-    page = await program.reLaunch(PAGE_COMPOSITION)
-    await test()
+    await test(PAGE_COMPOSITION)
   })
 });
\ No newline at end of file