test(weex): add more test cases for recycle-list

test/weex/cases/cases.spec.js

@@ -1,21 +1,14 @@
-import fs from 'fs'
-import path from 'path'
 import {
+  readFile,
+  readObject,
   compileVue,
+  compileWithDeps,
   createInstance,
   getRoot,
   getEvents,
   fireEvent
 } from '../helpers'
 
-function readFile (filename) {
-  return fs.readFileSync(path.resolve(__dirname, filename), 'utf8')
-}
-
-function readObject (filename) {
-  return (new Function(`return ${readFile(filename)}`))()
-}
-
 // Create one-off render test case
 function createRenderTestCase (name) {
   const source = readFile(`${name}.vue`)
@@ -72,13 +65,75 @@ describe('Usage', () => {
   describe('recycle-list', () => {
     it('text node', createRenderTestCase('recycle-list/text-node'))
     it('attributes', createRenderTestCase('recycle-list/attrs'))
+    // it('class name', createRenderTestCase('recycle-list/classname'))
+    // it('inline style', createRenderTestCase('recycle-list/inline-style'))
     it('v-if', createRenderTestCase('recycle-list/v-if'))
     it('v-else', createRenderTestCase('recycle-list/v-else'))
     it('v-else-if', createRenderTestCase('recycle-list/v-else-if'))
     it('v-for', createRenderTestCase('recycle-list/v-for'))
     it('v-for-iterator', createRenderTestCase('recycle-list/v-for-iterator'))
     it('v-on', createRenderTestCase('recycle-list/v-on'))
     it('v-on-inline', createRenderTestCase('recycle-list/v-on-inline'))
+
+    it('stateless component', done => {
+      compileWithDeps('recycle-list/components/stateless.vue', [{
+        name: 'banner',
+        path: 'recycle-list/components/banner.vue'
+      }]).then(code => {
+        const id = String(Date.now() * Math.random())
+        const instance = createInstance(id, code)
+        setTimeout(() => {
+          const target = readObject('recycle-list/components/stateless.vdom.js')
+          expect(getRoot(instance)).toEqual(target)
+          done()
+        }, 50)
+      }).catch(err => {
+        expect(err).toBe(null)
+        done()
+      })
+    })
+
+    // it('stateless component with props', done => {
+    //   compileWithDeps('recycle-list/components/stateless-with-props.vue', [{
+    //     name: 'poster',
+    //     path: 'recycle-list/components/poster.vue'
+    //   }]).then(code => {
+    //     const id = String(Date.now() * Math.random())
+    //     const instance = createInstance(id, code)
+    //     setTimeout(() => {
+    //       const target = readObject('recycle-list/components/stateless-with-props.vdom.js')
+    //       expect(getRoot(instance)).toEqual(target)
+    //       done()
+    //     }, 50)
+    //   }).catch(err => {
+    //     expect(err).toBe(null)
+    //     done()
+    //   })
+    // })
+
+    // it('stateful component', done => {
+    //   compileWithDeps('recycle-list/components/stateful.vue', [{
+    //     name: 'counter',
+    //     path: 'recycle-list/components/counter.vue'
+    //   }]).then(code => {
+    //     const id = String(Date.now() * Math.random())
+    //     const instance = createInstance(id, code)
+    //     setTimeout(() => {
+    //       const target = readObject('recycle-list/components/stateful.vdom.js')
+    //       expect(getRoot(instance)).toEqual(target)
+    //       const event = getEvents(instance)[0]
+    //       fireEvent(instance, event.ref, event.type, {})
+    //       setTimeout(() => {
+    //         // TODO: check render results
+    //         // expect(getRoot(instance)).toEqual(target)
+    //         done()
+    //       })
+    //     }, 50)
+    //   }).catch(err => {
+    //     expect(err).toBe(null)
+    //     done()
+    //   })
+    // })
   })
 })
 

test/weex/cases/recycle-list/classname.vdom.js

@@ -0,0 +1,26 @@
+({
+  type: 'recycle-list',
+  attr: {
+    listData: [
+      { type: 'A', color: 'red' },
+      { type: 'A', color: 'blue' }
+    ],
+    templateKey: 'type',
+    alias: 'item'
+  },
+  children: [{
+    type: 'cell-slot',
+    attr: { templateType: 'A' },
+    style: {
+      backgroundColor: '#FF6600'
+    },
+    children: [{
+      type: 'text',
+      attr: {
+        // not supported yet
+        // classList: ['text', { '@binding': 'item.color' }],
+        value: 'content'
+      }
+    }]
+  }]
+})

test/weex/cases/recycle-list/classname.vue

@@ -0,0 +1,37 @@
+<template>
+  <recycle-list :list-data="longList" template-key="type" alias="item">
+    <cell-slot template-type="A" class="cell">
+      <text :class="['text', item.color]">content</text>
+    </cell-slot>
+  </recycle-list>
+</template>
+
+<style scoped>
+  .cell {
+    background-color: #FF6600;
+  }
+  .text {
+    font-size: 100px;
+    text-align: center;
+  }
+  .red {
+    color: #FF0000;
+  }
+  .blue {
+    color: #0000FF;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data () {
+      return {
+        longList: [
+          { type: 'A', color: 'red' },
+          { type: 'A', color: 'blue' }
+        ]
+      }
+    }
+  }
+</script>
+

test/weex/cases/recycle-list/components/banner.vue

@@ -0,0 +1,19 @@
+<template recyclable="true">
+  <div class="banner">
+    <text class="title">BANNER</text>
+  </div>
+</template>
+
+<style scoped>
+  .banner {
+    height: 120px;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(162, 217, 192);
+  }
+  .title {
+    font-weight: bold;
+    color: #41B883;
+    font-size: 60px;
+  }
+</style>

test/weex/cases/recycle-list/components/counter.vue

@@ -0,0 +1,36 @@
+<template recyclable="true">
+  <div>
+    <text class="output">{{count}}</text>
+    <text class="button" @click="inc">+</text>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    props: ['start'],
+    data () {
+      return {
+        count: parseInt(this.start, 10) || 42
+      }
+    },
+    methods: {
+      inc () {
+        this.count++
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .output {
+    font-size: 150px;
+    text-align: center;
+  }
+  .button {
+    font-size: 100px;
+    text-align: center;
+    border-width: 2px;
+    border-color: #DDD;
+    background-color: #F5F5F5;
+  }
+</style>

test/weex/cases/recycle-list/components/poster.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <image class="image" :src="imageUrl"></image>
+    <text class="title">{{title}}</text>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    props: {
+      imageUrl: {
+        type: String,
+        default: 'https://gw.alicdn.com/tfs/TB1KF_ybRTH8KJjy0FiXXcRsXXa-890-1186.png'
+      },
+      title: {
+        type: String,
+        default: 'I WANT YOU!'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .image {
+    width: 750px;
+    height: 1000px;
+  }
+  .title {
+    font-size: 80px;
+    text-align: center;
+    color: #E95659;
+  }
+</style>

test/weex/cases/recycle-list/components/stateful.vdom.js

@@ -0,0 +1,45 @@
+({
+  type: 'recycle-list',
+  attr: {
+    listData: [
+      { type: 'A', number: 24 },
+      { type: 'A', number: 42 }
+    ],
+    templateKey: 'type',
+    alias: 'item'
+  },
+  children: [{
+    type: 'cell-slot',
+    attr: { templateType: 'A' },
+    children: [{
+      type: 'div',
+      attr: {
+        '@isComponentRoot': true,
+        '@componentProps': {
+          start: { '@binding': 'item.number' }
+        }
+      },
+      children: [{
+        type: 'text',
+        style: { fontSize: '150px', textAlign: 'center' },
+        attr: {
+          value: { '@binding': 'count' } // need confirm
+        }
+      }, {
+        type: 'text',
+        event: ['click'],
+        style: {
+          fontSize: '100px',
+          textAlign: 'center',
+          borderWidth: '2px',
+          borderColor: '#DDDDDD',
+          backgroundColor: '#F5F5F5'
+        },
+        attr: { value: '+' }
+      }]
+    }, {
+      type: 'text',
+      attr: { value: 'other' }
+    }]
+  }]
+})

test/weex/cases/recycle-list/components/stateful.vue

@@ -0,0 +1,22 @@
+<template>
+  <recycle-list :list-data="longList" template-key="type" alias="item">
+    <cell-slot template-type="A">
+      <counter :start="item.number"></counter>
+      <text>other</text>
+    </cell-slot>
+  </recycle-list>
+</template>
+
+<script>
+  // require('./counter.vue')
+  module.exports = {
+    data () {
+      return {
+        longList: [
+          { type: 'A', number: 24 },
+          { type: 'A', number: 42 }
+        ]
+      }
+    }
+  }
+</script>

test/weex/cases/recycle-list/components/stateless-with-props.vdom.js

@@ -0,0 +1,50 @@
+({
+  type: 'recycle-list',
+  attr: {
+    listData: [
+      { type: 'A', poster: 'xx', title: 'x' },
+      { type: 'A', poster: 'yy', title: 'y' }
+    ],
+    templateKey: 'type',
+    alias: 'item'
+  },
+  children: [{
+    type: 'cell-slot',
+    attr: { templateType: 'A' },
+    children: [{
+      type: 'div',
+      attr: {
+        '@isComponentRoot': true,
+        '@componentProps': {
+          imageUrl: { '@binding': 'item.poster' },
+          title: { '@binding': 'item.title' }
+        }
+      },
+      children: [{
+        type: 'image',
+        style: {
+          width: '750px',
+          height: '1000px'
+        },
+        attr: {
+          src: { '@binding': 'imageUrl' }
+        }
+      }, {
+        type: 'text',
+        style: {
+          fontSize: '80px',
+          textAlign: 'center',
+          color: '#E95659'
+        },
+        attr: {
+          value: { '@binding': 'title' }
+        }
+      }]
+    }, {
+      type: 'text',
+      attr: {
+        value: 'content'
+      }
+    }]
+  }]
+})

test/weex/cases/recycle-list/components/stateless-with-props.vue

@@ -0,0 +1,22 @@
+<template>
+  <recycle-list :list-data="longList" template-key="type" alias="item">
+    <cell-slot template-type="A">
+      <poster :image-url="item.poster" :title="item.title"></poster>
+      <text>content</text>
+    </cell-slot>
+  </recycle-list>
+</template>
+
+<script>
+  // require('./poster.vue')
+  module.exports = {
+    data () {
+      return {
+        longList: [
+          { type: 'A', poster: 'xx', title: 'x' },
+          { type: 'A', poster: 'yy', title: 'y' }
+        ]
+      }
+    }
+  }
+</script>