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

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

-<template>
-  <view class="container">
-    <component :is="currentComponentStr" />
-    <component :is="currentComponentInstance" />
-    <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
-      } else {
-        this.currentComponentStr = 'Foo'
-        this.currentComponentInstance = Foo
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.item {
-  display: flex;
-  flex-direction: row;
-  margin: 15px;
-  border: #eee solid 1px;
-}
+<template>
+  <view class="container">
+    <component :is="currentComponentInstance" />
+    <component :is="myInput" :value="inputValue" id="my-input" />
+    <button @click="changeCurrentComponent">change current component</button>
+  </view>
+</template>
+
+<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 {
+      currentComponentStr.value = 'Foo'
+      currentComponentInstance.value = Foo
+    }
+  }
+
+  defineExpose({
+    changeCurrentComponent
+  })
+</script>
+
+<style>
+  .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

-<template>
-  <view class="container">
-    <component :is="currentComponentStr" />
-    <component :is="currentComponentInstance" />
-    <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
-      } else {
-        this.currentComponentStr = 'Foo'
-        this.currentComponentInstance = Foo
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.item {
-  display: flex;
-  flex-direction: row;
-  margin: 15px;
-  border: #eee solid 1px;
-}
+<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,
+        myInput: 'input',
+        inputValue: 'default value'
+      }
+    },
+    methods: {
+      changeCurrentComponent() {
+        if (this.currentComponentStr === 'Foo') {
+          this.currentComponentStr = 'Bar'
+          this.currentComponentInstance = Bar
+        } else {
+          this.currentComponentStr = 'Foo'
+          this.currentComponentInstance = Foo
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .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'
-
-describe('built-in/component', () => {
-  let page
-  const test = async () => {
-    await page.waitFor('view')
-    let fooList = await page.$$('.component-foo')
-    expect(fooList.length).toBe(2)
-    expect(await fooList[0].text()).toBe('this is component Foo')
-    expect(await fooList[1].text()).toBe('this is component Foo')
-
-    let barList = await page.$$('.component-bar')
-    expect(barList.length).toBe(0)
-
-    await page.callMethod('changeCurrentComponent')
-
-    fooList = await page.$$('.component-foo')
-    expect(fooList.length).toBe(0)
-
-    barList = await page.$$('.component-bar')
-    expect(barList.length).toBe(2)
-    expect(await barList[0].text()).toBe('this is component Bar')
-    expect(await barList[1].text()).toBe('this is component Bar')
-  }
-  it('component Options API', async () => {
-    page = await program.reLaunch(PAGE_OPTIONS)
-    await test()
-  })
-  it('component Composition API', async () => {
-    page = await program.reLaunch(PAGE_COMPOSITION)
-    await test()
-  })
+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 (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(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)
+
+    await page.callMethod('changeCurrentComponent')
+
+    fooList = await page.$$('.component-foo')
+    expect(fooList.length).toBe(0)
+
+    barList = await page.$$('.component-bar')
+    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 () => {
+    await test(PAGE_OPTIONS)
+  })
+  it('component Composition API', async () => {
+    await test(PAGE_COMPOSITION)
+  })
 });
\ No newline at end of file