global api tests (#6)

* Vue.set & Vue.delete tests

* more global api tests

* new es2015 syntax

src/platforms/web/compiler/directives/html.js

@@ -2,5 +2,5 @@ import { addProp } from 'compiler/helpers'
 
 export default function html (el, dir) {
   if (!dir.value) return
-  addProp(el, 'innerHTML', `(${dir.value})`)
+  addProp(el, 'innerHTML', `__toString__(${dir.value})`)
 }

test/unit/features/global-api/global-api.spec.js

@@ -0,0 +1,89 @@
+import Vue from 'vue'
+
+describe('Global API', () => {
+  it('extend', () => {
+    const Test = Vue.extend({
+      name: 'test',
+      a: 1,
+      b: 2
+    })
+    expect(Test.options.a).toBe(1)
+    expect(Test.options.b).toBe(2)
+    expect(Test.super).toBe(Vue)
+    // function.name is not available in IE
+    expect(Test.toString().match(/^function Test\s?\(/)).toBeTruthy()
+    const t = new Test({
+      a: 2
+    })
+    expect(t.$options.a).toBe(2)
+    expect(t.$options.b).toBe(2)
+    // inheritance
+    const Test2 = Test.extend({
+      a: 2
+    })
+    expect(Test2.options.a).toBe(2)
+    expect(Test2.options.b).toBe(2)
+    const t2 = new Test2({
+      a: 3
+    })
+    expect(t2.$options.a).toBe(3)
+    expect(t2.$options.b).toBe(2)
+  })
+
+  it('extend warn invalid names', () => {
+    Vue.extend({ name: '123' })
+    expect('Invalid component name: "123"').toHaveBeenWarned()
+    Vue.extend({ name: '_fesf' })
+    expect('Invalid component name: "_fesf"').toHaveBeenWarned()
+    Vue.extend({ name: 'Some App' })
+    expect('Invalid component name: "Some App"').toHaveBeenWarned()
+  })
+
+  it('Vue.extend works', () => {
+    const foo = Vue.extend({
+      template: '<span>foo</span>'
+    })
+    const bar = Vue.extend({
+      template: '<span>bar</span>'
+    })
+    const vm = new Vue({
+      el: document.createElement('div'),
+      template: '<div><foo></foo><bar></bar></div>',
+      components: {foo, bar}
+    })
+    expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
+  })
+
+  it('global mixin', () => {
+    const options = Vue.options
+    const spy = jasmine.createSpy('global mixin')
+    Vue.mixin({
+      created: function () {
+        spy(this.$options.myOption)
+      }
+    })
+    new Vue({
+      myOption: 'hello'
+    })
+    expect(spy).toHaveBeenCalledWith('hello')
+    Vue.options = options
+  })
+
+  it('use', () => {
+    const def = {}
+    const options = {}
+    const pluginStub = {
+      install: (Vue, opts) => {
+        Vue.directive('plugin-test', def)
+        expect(opts).toBe(options)
+      }
+    }
+    Vue.use(pluginStub, options)
+    expect(Vue.options.directives['plugin-test']).toBe(def)
+    delete Vue.options.directives['plugin-test']
+    // use a function
+    Vue.use(pluginStub.install, options)
+    expect(Vue.options.directives['plugin-test']).toBe(def)
+    delete Vue.options.directives['plugin-test']
+  })
+})

test/unit/features/global-api/global-assets-api.spec.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+
+describe('Global Assets API', () => {
+  const Test = Vue.extend()
+
+  it('directive / transition', () => {
+    const assets = ['directive', 'transition']
+    assets.forEach(function (type) {
+      const def = {}
+      Test[type]('test', def)
+      expect(Test.options[type + 's'].test).toBe(def)
+      expect(Test[type]('test')).toBe(def)
+      // extended registration should not pollute global
+      expect(Vue.options[type + 's'].test).toBeUndefined()
+    })
+  })
+
+  it('component', () => {
+    const def = { a: 1 }
+    Test.component('test', def)
+    const component = Test.options.components.test
+    expect(typeof component).toBe('function')
+    expect(component.super).toBe(Vue)
+    expect(component.options.a).toBe(1)
+    expect(component.options.name).toBe('test')
+    expect(Test.component('test')).toBe(component)
+    // already extended
+    Test.component('test2', component)
+    expect(Test.component('test2')).toBe(component)
+    // extended registration should not pollute global
+    expect(Vue.options.components.test).toBeUndefined()
+  })
+
+  describe('Vue.component works', () => {
+    it('should register a component', () => {
+      Vue.component('foo', {
+        template: '<span>foo</span>'
+      })
+      Vue.component('bar', {
+        template: '<span>bar</span>'
+      })
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div><foo></foo><bar></bar></div>'
+      })
+      expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
+    })
+  })
+})

test/unit/features/global-api/global-observer-api.spec.js

@@ -0,0 +1,86 @@
+import Vue from 'vue'
+
+describe('Global Data Observer API', () => {
+  describe('Vue.set', () => {
+    it('should update a vue object', (done) => {
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div>{{x}}</div>',
+        data: {x: 1}
+      })
+      expect(vm.$el.innerHTML).toBe('1')
+      Vue.set(vm, 'x', 2)
+      Vue.nextTick(() => {
+        expect(vm.$el.innerHTML).toBe('2')
+        done()
+      })
+    })
+
+    it('should update a observing object', (done) => {
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div>{{foo.x}}</div>',
+        data: {foo: {x: 1}}
+      })
+      expect(vm.$el.innerHTML).toBe('1')
+      Vue.set(vm.foo, 'x', 2)
+      Vue.nextTick(() => {
+        expect(vm.$el.innerHTML).toBe('2')
+        done()
+      })
+    })
+
+    it('should update a observing array', (done) => {
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div><div v-for="v,k in list">{{k}}-{{v}}</div></div>',
+        data: {list: ['a', 'b', 'c']}
+      })
+      expect(vm.$el.innerHTML).toBe('<div>0-a</div><div>1-b</div><div>2-c</div>')
+      Vue.set(vm.list, 1, 'd')
+      Vue.nextTick(() => {
+        expect(vm.$el.innerHTML).toBe('<div>0-a</div><div>1-d</div><div>2-c</div>')
+        done()
+      })
+    })
+
+    it('should update a vue object with nothing', (done) => {
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div>{{x}}</div>',
+        data: {x: 1}
+      })
+      expect(vm.$el.innerHTML).toBe('1')
+      Vue.set(vm, 'x', null)
+      Vue.nextTick(() => {
+        expect(vm.$el.innerHTML).toBe('')
+        Vue.set(vm, 'x')
+        Vue.nextTick(() => {
+          expect(vm.$el.innerHTML).toBe('')
+          done()
+        })
+      })
+    })
+  })
+
+  describe('Vue.delete', () => {
+    it('should delete a key', (done) => {
+      const vm = new Vue({
+        el: document.createElement('div'),
+        template: '<div>{{x}}</div>',
+        data: {x: 1}
+      })
+      expect(vm.$el.innerHTML).toBe('1')
+      vm.x = 2
+      Vue.nextTick(() => {
+        expect(vm.$el.innerHTML).toBe('2')
+        Vue.delete(vm, 'x')
+        vm.x = 3
+        Vue.nextTick(() => {
+          expect(vm.$el.innerHTML).toBe('2')
+          done()
+        })
+      })
+    })
+  })
+})