test(weex): refactor the test cases to fit the new weex-js-runtime

Author: Hanks10100

package.json

@@ -121,8 +121,7 @@
     "typescript": "^2.3.4",
     "uglify-js": "^3.0.15",
     "webpack": "^2.6.1",
-    "weex-js-runtime": "^0.20.5",
-    "weex-vdom-tester": "^0.2.0"
+    "weex-js-runtime": "^0.22.0"
   },
   "config": {
     "commitizen": {

src/platforms/weex/entry-framework.js

@@ -93,6 +93,8 @@ export function destroyInstance (instanceId) {
   if (instance && instance.app instanceof instance.Vue) {
     instance.document.destroy()
     instance.app.$destroy()
+    delete instance.document
+    delete instance.app
   }
   delete instances[instanceId]
 }

test/weex/helpers/index.js

@@ -1,13 +1,8 @@
-// suppress logs from vdom-tester
-const domModule = require('weex-vdom-tester/lib/modules/dom')
-domModule.updateFinish = domModule.createFinish = domModule.refreshFinish = () => {}
-
 import * as Vue from '../../../packages/weex-vue-framework'
 import { compile } from '../../../packages/weex-template-compiler'
-import { Runtime, Instance } from 'weex-vdom-tester'
-import { init, config } from 'weex-js-runtime'
+import WeexRuntime from 'weex-js-runtime'
 
-init()
+console.debug = () => {}
 
 // http://stackoverflow.com/a/35478115
 const matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g
@@ -27,32 +22,66 @@ function parseStatic (fns) {
   return '[' + fns.map(fn => `function () { ${fn} }`).join(',') + ']'
 }
 
-export function prepareRuntime () {
-  let sendTasksHandler = function () {}
-  config.sendTasks = config.Document.handler = function () {
-    sendTasksHandler.apply(null, arguments)
-  }
-  Vue.init(config)
-  const runtime = new Runtime(Vue)
-  sendTasksHandler = function () {
-    runtime.target.callNative.apply(runtime.target, arguments)
+function isObject (object) {
+  return object !== null && typeof object === 'object'
+}
+
+function isEmptyObject (object) {
+  return isObject(object) && Object.keys(object).length < 1
+}
+
+function omitUseless (object) {
+  if (isObject(object)) {
+    delete object.ref
+    for (const key in object) {
+      if (isEmptyObject(object[key]) || object[key] === undefined) {
+        delete object[key]
+      }
+      omitUseless(object[key])
+    }
   }
-  return runtime
+  return object
 }
 
-export function resetRuntime () {
-  delete config.Document.handler
-  Vue.reset()
+export function getRoot (instance) {
+  return omitUseless(instance.document.body.toJSON())
 }
 
-export function createInstance (runtime, code) {
-  const instance = new Instance(runtime)
-  if (code) {
-    instance.$create(code)
+export function fireEvent (instance, ref, type, event = {}) {
+  const el = instance.document.getRef(ref)
+  if (el) {
+    instance.document.fireEvent(el, type, event = {})
   }
+}
+
+export function createInstance (id, code, ...args) {
+  WeexRuntime.config.frameworks = { Vue }
+  const context = WeexRuntime.init(WeexRuntime.config)
+  context.registerModules({
+    timer: ['setTimeout', 'setInterval']
+  })
+  const instance = context.createInstance(id, `// { "framework": "Vue" }\n${code}`, ...args)
+  instance.$refresh = (data) => context.refreshInstance(id, data)
+  instance.$destroy = () => context.destroyInstance(id)
   return instance
 }
 
+export function compileAndExecute (template, additional = '') {
+  return new Promise(resolve => {
+    const id = String(Date.now() * Math.random())
+    const { render, staticRenderFns } = compile(template)
+    const instance = createInstance(id, `
+      new Vue({
+        el: '#whatever',
+        render: function () { ${render} },
+        staticRenderFns: ${parseStatic(staticRenderFns)},
+        ${additional}
+      })
+    `)
+    setTimeout(() => resolve(instance), 10)
+  })
+}
+
 export function syncPromise (arr) {
   let p = Promise.resolve()
   arr.forEach(item => {
@@ -65,7 +94,7 @@ export function checkRefresh (instance, data, checker) {
   return () => new Promise(res => {
     instance.$refresh(data)
     setTimeout(() => {
-      checker(instance.getRealRoot())
+      checker(getRoot(instance))
       res()
     })
   })

test/weex/runtime/attrs.spec.js

@@ -1,117 +1,82 @@
-import {
-  compileAndStringify,
-  prepareRuntime,
-  resetRuntime,
-  createInstance
-} from '../helpers/index'
+import { getRoot, fireEvent, compileAndExecute } from '../helpers/index'
 
 describe('generate attribute', () => {
-  let runtime
-
-  beforeAll(() => {
-    runtime = prepareRuntime()
-  })
-
-  afterAll(() => {
-    resetRuntime()
-    runtime = null
-  })
-
-  it('should be generated', () => {
-    const { render, staticRenderFns } = compileAndStringify(`
+  it('should be generated', (done) => {
+    compileAndExecute(`
       <div>
         <text value="Hello World" style="font-size: 100"></text>
       </div>
-    `)
-    const instance = createInstance(runtime, `
-      new Vue({
-        render: ${render},
-        staticRenderFns: ${staticRenderFns},
-        el: 'body'
+    `).then(instance => {
+      expect(getRoot(instance)).toEqual({
+        type: 'div',
+        children: [{
+          type: 'text',
+          style: { fontSize: '100' },
+          attr: { value: 'Hello World' }
+        }]
       })
-    `)
-    expect(instance.getRealRoot()).toEqual({
-      type: 'div',
-      children: [
-        { type: 'text', style: { fontSize: '100' }, attr: { value: 'Hello World' }}
-      ]
-    })
+      done()
+    }).catch(e => done.fail(e))
   })
 
   it('should be updated', (done) => {
-    const { render, staticRenderFns } = compileAndStringify(`
+    compileAndExecute(`
       <div @click="foo">
         <text :value="x"></text>
       </div>
-    `)
-    const instance = createInstance(runtime, `
-      new Vue({
-        data: {
-          x: 'Hello World'
-        },
-        methods: {
-          foo: function () {
-            this.x = 'Hello Vue'
-          }
-        },
-        render: ${render},
-        staticRenderFns: ${staticRenderFns},
-        el: "body"
+    `, `
+      data: { x: 'Hello World' },
+      methods: {
+        foo: function () {
+          this.x = 'Hello Vue'
+        }
+      }
+    `).then(instance => {
+      expect(getRoot(instance)).toEqual({
+        type: 'div',
+        event: ['click'],
+        children: [
+          { type: 'text', attr: { value: 'Hello World' }}
+        ]
       })
-    `)
-    expect(instance.getRealRoot()).toEqual({
-      type: 'div',
-      event: ['click'],
-      children: [
-        { type: 'text', attr: { value: 'Hello World' }}
-      ]
-    })
-
-    instance.$fireEvent(instance.doc.body.ref, 'click', {})
-    setTimeout(() => {
-      expect(instance.getRealRoot()).toEqual({
+      fireEvent(instance, '_root', 'click')
+      return instance
+    }).then(instance => {
+      expect(getRoot(instance)).toEqual({
         type: 'div',
         event: ['click'],
         children: [
           { type: 'text', attr: { value: 'Hello Vue' }}
         ]
       })
       done()
-    })
+    }).catch(e => done.fail(e))
   })
 
   it('should be cleared', (done) => {
-    const { render, staticRenderFns } = compileAndStringify(`
+    compileAndExecute(`
       <div @click="foo">
         <text :value="x"></text>
       </div>
-    `)
-    const instance = createInstance(runtime, `
-      new Vue({
-        data: {
-          x: 'Hello World'
-        },
-        methods: {
-          foo: function () {
-            this.x = ''
-          }
-        },
-        render: ${render},
-        staticRenderFns: ${staticRenderFns},
-        el: "body"
+    `, `
+      data: { x: 'Hello World' },
+      methods: {
+        foo: function () {
+          this.x = ''
+        }
+      }
+    `).then(instance => {
+      expect(getRoot(instance)).toEqual({
+        type: 'div',
+        event: ['click'],
+        children: [
+          { type: 'text', attr: { value: 'Hello World' }}
+        ]
       })
-    `)
-    expect(instance.getRealRoot()).toEqual({
-      type: 'div',
-      event: ['click'],
-      children: [
-        { type: 'text', attr: { value: 'Hello World' }}
-      ]
-    })
-
-    instance.$fireEvent(instance.doc.body.ref, 'click', {})
-    setTimeout(() => {
-      expect(instance.getRealRoot()).toEqual({
+      fireEvent(instance, '_root', 'click')
+      return instance
+    }).then(instance => {
+      expect(getRoot(instance)).toEqual({
         type: 'div',
         event: ['click'],
         children: [