refactor(directive): v-if

pages.json

@@ -159,6 +159,18 @@
         "navigationBarTitleText": "v-show 组合式 API"
       }
     },
+    {
+      "path": "pages/directive/v-if/v-if-options",
+      "style": {
+        "navigationBarTitleText": "v-if 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-if/v-if-composition",
+      "style": {
+        "navigationBarTitleText": "v-if 组合式 API"
+      }
+    },
 
     {
       "path": "pages/directive/v-bind/v-bind",
@@ -246,12 +258,6 @@
         "navigationBarTitleText": "v-for-v-for"
       }
     },
-    {
-      "path": "pages/directive/v-if/v-if",
-      "style": {
-        "navigationBarTitleText": "v-if"
-      }
-    },
     {
       "path": "pages/directive/v-model/v-model",
       "style": {

pages/component-instance/attrs/child-composition.uvue

@@ -27,8 +27,6 @@ defineProps({
 
 const attrs = useAttrs()
 
-console.log('attrs', attrs)
-
 const hasPropsAttr = computed(():boolean => {
   // #ifdef APP-ANDROID
   return attrs.has('val')

pages/directive/v-if/v-if-composition.uvue

+<template>
+  <view class="page">
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-if</text>
+      <text id="v-if-show" v-if="show">show</text>
+    </view>
+    <button id="switch-v-if-btn" @click="show = !show">switch v-if</button>
+
+    <view class="mt-10 mb-10 flex justify-between flex-row">
+      <text>num:</text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-if v-else-if v-else</text>
+      <text id="num-v-if" v-if="num == 1">v-if num = 1</text>
+      <text id="num-v-else-if" v-else-if="num == 2">v-else-if num = 2</text>
+      <text id="num-v-else" v-else>v-else</text>
+    </view>
+    <button id="change-num-btn" @click="changeNum">change num</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+const show = ref(true)
+const num = ref(1)
+
+const changeNum = () => {
+  if(num.value<3) {
+    num.value++
+  } else {
+    num.value = 1
+  }
+}
+</script>

pages/directive/v-if/v-if-options.uvue

+<template>
+  <view class="page">
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-if</text>
+      <text id="v-if-show" v-if="show">show</text>
+    </view>
+    <button id="switch-v-if-btn" @click="show = !show">switch v-if</button>
+
+    <view class="mt-10 mb-10 flex justify-between flex-row">
+      <text>num:</text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-if v-else-if v-else</text>
+      <text id="num-v-if" v-if="num == 1">v-if num = 1</text>
+      <text id="num-v-else-if" v-else-if="num == 2">v-else-if num = 2</text>
+      <text id="num-v-else" v-else>v-else</text>
+    </view>
+    <button id="change-num-btn" @click="changeNum">change num</button>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      show: true,
+      num: 1
+    }
+  },
+  methods: {
+    changeNum() {
+      if(this.num<3) {
+        this.num++
+      } else {
+        this.num = 1
+      }
+    },
+  }
+}
+</script>

pages/directive/v-if/v-if.test.js

-const PAGE_PATH = '/pages/directive/v-if/v-if'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-if/v-if-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-if/v-if-composition'
 
 describe('v-if', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
+  const test = async (page) => {
+    let vIfShow = await page.$('#v-if-show')
+    expect(await vIfShow.text()).toBe('show')
+    
+    const switchVIfBtn = await page.$('#switch-v-if-btn')
+    await switchVIfBtn.tap()
+    vIfShow = await page.$('#v-if-show')
+    expect(vIfShow).toBeNull()
+    
+    await switchVIfBtn.tap()
+    vIfShow = await page.$('#v-if-show')
+    expect(await vIfShow.text()).toBe('show')
+    
+    const num = await page.$('#num')
+    expect(await num.text()).toBe('1')
+    let numVIf = await page.$('#num-v-if')
+    expect(await numVIf.text()).toBe('v-if num = 1')
+    let numVElseIf = await page.$('#num-v-else-if')
+    expect(numVElseIf).toBeNull()
+    let numVElse = await page.$('#num-v-else')
+    expect(numVElse).toBeNull()
+    
+    const changeNumBtn = await page.$('#change-num-btn')
+    await changeNumBtn.tap()
+    
+    expect(await num.text()).toBe('2')
+    numVIf = await page.$('#num-v-if')
+    expect(numVIf).toBeNull()
+    numVElseIf = await page.$('#num-v-else-if')
+    expect(await numVElseIf.text()).toBe('v-else-if num = 2')
+    numVElse = await page.$('#num-v-else')
+    expect(numVElse).toBeNull()
+    
+    await changeNumBtn.tap()
+    
+    expect(await num.text()).toBe('3')
+    numVIf = await page.$('#num-v-if')
+    expect(numVIf).toBeNull()
+    numVElseIf = await page.$('#num-v-else-if')
+    expect(numVElseIf).toBeNull()
+    numVElse = await page.$('#num-v-else')
+    expect(await numVElse.text()).toBe('v-else')
+    
+    await changeNumBtn.tap()
+    
+    expect(await num.text()).toBe('1')
+    numVIf = await page.$('#num-v-if')
+    expect(await numVIf.text()).toBe('v-if num = 1')
+    numVElseIf = await page.$('#num-v-else-if')
+    expect(numVElseIf).toBeNull()
+    numVElse = await page.$('#num-v-else')
+    expect(numVElse).toBeNull()
+  }
+  
+  it('v-if options API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
   })
-  it('switch-v-if', async () => {
-    const btn_view = await page.$('.view-click')
-
-    const element1 = await page.$$('.v-if-show-value')
-    expect(element1.length).toBe(1)
-
-    await btn_view.tap()
-    await page.waitFor(50)
-    const element2 = await page.$$('.v-if-show-value')
-    expect(element2.length).toBe(0)
-
-    await btn_view.tap()
-    await page.waitFor(50)
-    const element3 = await page.$$('.v-if-show-value')
-    expect(element3.length).toBe(1)
-  })
-  it('switch-v-if-v-else-if-v-else', async () => {
-    const btn_view = await page.$('.view-click-abc')
-
-    const element_a = await page.$('.text-a')
-    expect(await element_a.text()).toBe('A')
-
-    await btn_view.tap()
-    await page.waitFor(50)
-    const element_b = await page.$('.text-b')
-    expect(await element_b.text()).toBe('B')
-
-    await btn_view.tap()
-    await page.waitFor(50)
-    const element_c = await page.$('.text-c')
-    expect(await element_c.text()).toBe('C')
-
-    await btn_view.tap()
-    await page.waitFor(50)
-    const element_not_abc = await page.$('.text-not-a-b-c')
-    expect(await element_not_abc.text()).toBe('Not A/B/C')
-  })
-  it('remove-children', async () => {
-    const child_a = await page.$('.child-a')
-    expect(await child_a.text()).toBe('child-a')
-
-    const btn_view = await page.$('.btn-remove-chilren')
-    await btn_view.tap()
-    await page.waitFor(50)
-
-    const child_a2 = await page.$('.child-a')
-    expect(child_a2).toBe(null)
+  
+  it('v-if composition API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
   })
 })
\ No newline at end of file

pages/directive/v-if/v-if.uvue

-<template>
-  <view class="page">
-    <view class="split-title">v-if</view>
-    <view class="btn-view view-click" @click="onShowOrHide">Switch v-if</view>
-    <view class="v-if-show-value" v-if="show">show value</view>
-
-    <view class="split-title">v-if-else</view>
-    <view v-if="type === 'A'">
-      <text class="text-a">A</text>
-    </view>
-    <view v-else-if="type === 'B'">
-      <text class="text-b">B</text>
-    </view>
-    <view v-else-if="type === 'C'">
-      <text class="text-c">C</text>
-    </view>
-    <view v-else>
-      <text class="text-not-a-b-c">Not A/B/C</text>
-    </view>
-    <view class="btn-view view-click-abc" @click="switchABC">Switch A/B/C</view>
-
-    <view class="children">
-      <view v-if="showChildren">
-        <view class="child-a">child-a</view>
-      </view>
-    </view>
-    <view class="btn-view btn-remove-chilren" @click="removeChilren">removeChilren</view>
-  </view>
-</template>
-
-<script>
-  let typeIndex = 0
-  const TypeList = ['A', 'B', 'C', 'D']
-  export default {
-    data() {
-      return {
-        show: true,
-        type: 'A',
-        showChildren: true
-      }
-    },
-    methods: {
-      onShowOrHide() {
-        this.show = !this.show
-      },
-      switchABC() {
-        typeIndex++
-        if (typeIndex >= TypeList.length) {
-          typeIndex = 0
-        }
-
-        this.type = TypeList[typeIndex]
-      },
-      removeChilren() {
-        this.showChildren = false
-      }
-    }
-  }
-</script>
-
-<style>
-  .child-a {
-    width: 100px;
-    height: 100px;
-  }
-</style>
\ No newline at end of file

pages/index/index.uvue

@@ -666,6 +666,22 @@ export default {
                   url: 'v-show-composition'
                 },
               ]
+            },
+            {
+              id: 'v-if',
+              name: 'v-if',
+              children: [
+                {
+                  id: 'v-if-options',
+                  name: 'v-if 选项式 API',
+                  url: 'v-if-options'
+                },
+                {
+                  id: 'v-if-composition',
+                  name: 'v-if 组合式 API',
+                  url: 'v-if-composition'
+                },
+              ]
             }
           ]
         },