v-bind: add attribute|class|style|props

pages.json

@@ -11,6 +11,30 @@
         "navigationBarTitleText": "v-bind"
       }
     },
+    {
+      "path": "pages/directive/v-bind/v-bind-class",
+      "style": {
+        "navigationBarTitleText": "v-bind-class"
+      }
+    },
+    {
+      "path": "pages/directive/v-bind/v-bind-style",
+      "style": {
+        "navigationBarTitleText": "v-bind-style"
+      }
+    },
+    {
+      "path": "pages/directive/v-bind/v-bind-props",
+      "style": {
+        "navigationBarTitleText": "v-bind-props"
+      }
+    },
+    // {
+    //   "path": "pages/directive/v-bind/v-bind-attribute",
+    //   "style": {
+    //     "navigationBarTitleText": "v-bind-attribute"
+    //   }
+    // },
     {
       "path": "pages/directive/v-for/v-for",
       "style": {

pages/directive/v-bind/counter.uvue

+<template>
+  <view>
+    <text class="count-id">{{id}}</text>
+    <text class="count-title">{{title}}</text>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: Number,
+        default: 0
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/directive/v-bind/v-bind-attribute.test.js

+const PAGE_PATH = '/pages/directive/v-bind/v-bind-attribute'
+
+describe('v-bind-attribute', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('attribute', async () => {
+    const view1 = await page.$('.attribute')
+    expect(await view1.attribute('id1')).toBe('id1')
+    expect(await view1.attribute('id2')).toBe('id2')
+  })
+})
\ No newline at end of file

pages/directive/v-bind/v-bind-attribute.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-bind-attribute</view>
+    <!-- 绑定对象形式的 attribute -->
+    <view class="attribute" v-bind="{ 'id1': id1, 'id2': id2 }">
+      <text>绑定自定义属性</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        id1: 'id1',
+        id2: 'id2'
+      }
+    }
+  }
+</script>

pages/directive/v-bind/v-bind-class.test.js

+const PAGE_PATH = '/pages/directive/v-bind/v-bind-class'
+
+describe('v-bind-class', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('rect', async () => {
+    const rect1 = await page.$('.rect1')
+    const rect2 = await page.$('.rect2')
+    const rect3 = await page.$('.rect3')
+    expect(await rect1.attribute('class')).toBe('rect rect1 red')
+    expect(await rect2.attribute('class')).toBe('rect rect2 class-a class-b')
+    expect(await rect3.attribute('class')).toBe('rect rect3 class-a class-b class-c')
+  })
+})
\ No newline at end of file

pages/directive/v-bind/v-bind-class.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-bind-class</view>
+    <view class="rect rect1" :class="{ red: isRed }">背景红色</view>
+    <view class="rect rect2" :class="[classA, classB]">背景绿色(#008000), 边框2px蓝色(#0000FF)</view>
+    <view class="rect rect3" :class="[classA, { [classB]: isB, [classC]: isC }]">背景绿色(#008000), 边框8px蓝色(#0000FF)</view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isRed: true,
+        isB: true,
+        isC: true,
+        classA: 'class-a',
+        classB: 'class-b',
+        classC: 'class-c'
+      }
+    }
+  }
+</script>
+
+<style>
+  .rect {
+    width: 200px;
+    height: 100px;
+    margin: 5px 0;
+  }
+
+  .red {
+    background-color: #FF0000;
+  }
+
+  .class-a {
+    background-color: #008000;
+  }
+
+  .class-b {
+    border: 2px solid #0000FF;
+  }
+
+  .class-c {
+    border-width: 4px;
+  }
+</style>

pages/directive/v-bind/v-bind-props.test.js

+const PAGE_PATH = '/pages/directive/v-bind/v-bind-props'
+
+describe('v-bind-props', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('counter1', async () => {
+    const counter = await page.$('.counter1')
+    const counterID = await counter.$('.count-id')
+    const counterTitle = await counter.$('.count-title')
+    expect(await counterID.text()).toBe('1')
+    expect(await counterTitle.text()).toBe('title')
+  })
+})
\ No newline at end of file

pages/directive/v-bind/v-bind-props.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-bind-props</view>
+    <counter class="counter1" :id="post.id" :title="post.title"></counter>
+    <!-- TODO 暂不支持 -->
+    <!-- <counter class="counter2" v-bind="post"></counter> -->
+  </view>
+</template>
+
+<script>
+  import counter from "./counter.uvue"
+
+  type CounterData = {
+    id : number,
+    title : string
+  }
+
+  export default {
+    components: {
+      counter
+    },
+    data() {
+      return {
+        post: {
+          id: 1,
+          title: 'title'
+        } as CounterData
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/directive/v-bind/v-bind-style.test.js

+const PAGE_PATH = '/pages/directive/v-bind/v-bind-style'
+
+describe('v-bind-style', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('basic', async () => {
+    const text = await page.$('.text-font-size')
+    const view = await page.$('.view-style')
+
+    expect(await text.style('fontSize')).toBe('14px')
+    expect(await view.style('backgroundColor')).toBe('#008000')
+    expect(await view.style('borderWidth')).toBe('2px')
+    expect(await view.style('borderColor')).toBe('#0000FF')
+  })
+})
\ No newline at end of file

pages/directive/v-bind/v-bind-style.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-bind-style</view>
+    <view>
+      <text class="text-font-size" :style="{fontSize: size + 'px'}">14px</text>
+    </view>
+    <view class="view-style" :style="[styleObjectA, styleObjectB]">
+      背景绿色(#008000), 边框2px蓝色(#0000FF)
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        size: 14,
+        styleObjectA: 'background-color: #008000;',
+        styleObjectB: 'border: 2px solid #0000FF;'
+      }
+    }
+  }
+</script>

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

@@ -16,21 +16,21 @@ describe('v-show', () => {
     await toggle.tap()
     expect(await element.style('display')).toBe('flex')
   })
-  it('screenshot', async () => {
-    const toggle = await page.$('.btn-toggle')
-    const element = await page.$('.hello')
+  // it('screenshot', async () => {
+  //   const toggle = await page.$('.btn-toggle')
+  //   const element = await page.$('.hello')
 
-    const image1 = await program.screenshot()
-    expect(image1).toMatchSnapshot()
+  //   const image1 = await program.screenshot()
+  //   expect(image1).toMatchSnapshot()
 
-    await toggle.tap()
-    await page.waitFor(20)
-    const image2 = await program.screenshot()
-    expect(image2).toMatchSnapshot()
+  //   await toggle.tap()
+  //   await page.waitFor(20)
+  //   const image2 = await program.screenshot()
+  //   expect(image2).toMatchSnapshot()
 
-    await toggle.tap()
-    await page.waitFor(20)
-    const image3 = await program.screenshot()
-    expect(image3).toMatchSnapshot()
-  })
+  //   await toggle.tap()
+  //   await page.waitFor(20)
+  //   const image3 = await program.screenshot()
+  //   expect(image3).toMatchSnapshot()
+  // })
 })
\ No newline at end of file

pages/index.uvue

@@ -113,6 +113,26 @@ export default {
               url: 'v-bind',
               enable: true,
             },
+            {
+              name: 'v-bind-class',
+              url: 'v-bind/v-bind-class',
+              enable: true,
+            },
+            {
+              name: 'v-bind-style',
+              url: 'v-bind/v-bind-style',
+              enable: true,
+            },
+            {
+              name: 'v-bind-props',
+              url: 'v-bind/v-bind-props',
+              enable: true,
+            },
+            {
+              name: 'v-bind-attribute',
+              url: 'v-bind/v-bind-attribute',
+              enable: false,
+            },
             {
               name: 'v-model',
               url: 'v-model',