return this in $mount, make unit tests more consistent

src/entries/web-runtime-with-compiler.js

@@ -36,7 +36,7 @@ Vue.prototype.$mount = function (el) {
       options.staticRenderFns = staticRenderFns
     }
   }
-  mount.call(this, el)
+  return mount.call(this, el)
 }
 
 /**

src/entries/web-runtime.js

@@ -24,7 +24,7 @@ Vue.prototype.__patch__ = config._isServer
 // wrap mount
 Vue.prototype.$mount = function (el) {
   this.$el = el && query(el)
-  this._mount()
+  return this._mount()
 }
 
 export default Vue

test/unit/features/component/component.spec.js

@@ -12,8 +12,7 @@ describe('Component', () => {
           template: '<span>{{a}}</span>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.tagName).toBe('SPAN')
     expect(vm.$el.innerHTML).toBe('123')
   })
@@ -29,8 +28,7 @@ describe('Component', () => {
           template: '<tr><td>{{a}}</td></tr>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<table><tbody><tr><td>123</td></tr></tbody></table>')
   })
 
@@ -45,8 +43,7 @@ describe('Component', () => {
           template: '<tr><td>{{a}}</td></tr>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<table><tbody><tr><td>123</td></tr></tbody></table>')
   })
 
@@ -63,13 +60,12 @@ describe('Component', () => {
           }
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>child</span>')
   })
 
   it('fragment instance warning', () => {
-    const vm = new Vue({
+    new Vue({
       template: '<test></test>',
       components: {
         test: {
@@ -79,8 +75,7 @@ describe('Component', () => {
           template: '<p>{{a}}</p><p>{{b}}</p>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect('Component template should contain exactly one root element').toHaveBeenWarned()
   })
 
@@ -104,8 +99,7 @@ describe('Component', () => {
           }
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.outerHTML).toBe('<div view="view-a">foo</div>')
     vm.view = 'view-b'
     waitForUpdate(() => {
@@ -137,11 +131,36 @@ describe('Component', () => {
           })
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
   })
 
+  it('dynamic combined with v-for', done => {
+    const vm = new Vue({
+      template:
+        '<div>' +
+          '<component v-for="c in comps" :is="c.type"></component>' +
+        '</div>',
+      data: {
+        comps: [{ type: 'one' }, { type: 'two' }]
+      },
+      components: {
+        one: {
+          template: '<span>one</span>'
+        },
+        two: {
+          template: '<span>two</span>'
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>one</span><span>two</span>')
+    vm.comps[1].type = 'one'
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe('<span>one</span><span>one</span>')
+      done()
+    }).catch(done)
+  })
+
   it('should compile parent template directives & content in parent scope', done => {
     const vm = new Vue({
       data: {
@@ -159,8 +178,7 @@ describe('Component', () => {
           }
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.style.display).toBe('none')
     expect(vm.$el.textContent).toBe('hello world')
     vm.ok = true
@@ -189,8 +207,7 @@ describe('Component', () => {
           }
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('')
     expect(vm.$children.length).toBe(0)
     vm.ok = true
@@ -214,8 +231,7 @@ describe('Component', () => {
           props: ['collection']
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.outerHTML).toBe('<ul><li>1</li><li>2</li></ul>')
   })
 

test/unit/features/directives/bind.spec.js

@@ -5,8 +5,7 @@ describe('Directive v-bind', () => {
     const vm = new Vue({
       template: '<div><span :test="foo">hello</span></div>',
       data: { foo: 'ok' }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.firstChild.getAttribute('test')).toBe('ok')
     vm.foo = 'again'
     waitForUpdate(() => {
@@ -39,8 +38,7 @@ describe('Directive v-bind', () => {
         foo: 'ok',
         bar: false
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.firstChild.value).toBe('ok')
     expect(vm.$el.lastChild.checked).toBe(false)
     vm.bar = true
@@ -56,8 +54,7 @@ describe('Directive v-bind', () => {
       data: {
         foo: 'ok'
       }
-    })
-    vm.$mount()
+    }).$mount()
     const xlinkNS = 'http://www.w3.org/1999/xlink'
     expect(vm.$el.firstChild.getAttributeNS(xlinkNS, 'special')).toBe('ok')
     vm.foo = 'again'
@@ -77,8 +74,7 @@ describe('Directive v-bind', () => {
     const vm = new Vue({
       template: '<div><span :draggable="foo">hello</span></div>',
       data: { foo: true }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.firstChild.getAttribute('draggable')).toBe('true')
     vm.foo = 'again'
     waitForUpdate(() => {
@@ -103,8 +99,7 @@ describe('Directive v-bind', () => {
     const vm = new Vue({
       template: '<div><span :disabled="foo">hello</span></div>',
       data: { foo: true }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.firstChild.getAttribute('disabled')).toBe('disabled')
     vm.foo = 'again'
     waitForUpdate(() => {

test/unit/features/directives/for.spec.js

@@ -11,8 +11,7 @@ describe('Directive v-for', () => {
       data: {
         list: ['a', 'b', 'c']
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     Vue.set(vm.list, 0, 'd')
     waitForUpdate(() => {
@@ -44,8 +43,7 @@ describe('Directive v-for', () => {
           { value: 'c' }
         ]
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     Vue.set(vm.list, 0, { value: 'd' })
     waitForUpdate(() => {
@@ -76,8 +74,7 @@ describe('Directive v-for', () => {
       data: {
         obj: { a: 0, b: 1, c: 2 }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     vm.obj.a = 3
     waitForUpdate(() => {
@@ -100,8 +97,7 @@ describe('Directive v-for', () => {
         </div>
       `,
       data: { a: 0, b: 1, c: 2 }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     vm.a = 3
     waitForUpdate(() => {
@@ -127,8 +123,7 @@ describe('Directive v-for', () => {
         data: {
           list: ['a', 'b', 'c']
         }
-      })
-      vm.$mount()
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
       Vue.set(vm.list, 0, 'd')
       waitForUpdate(() => {
@@ -160,8 +155,7 @@ describe('Directive v-for', () => {
             { value: 'c' }
           ]
         }
-      })
-      vm.$mount()
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
       Vue.set(vm.list, 0, { value: 'd' })
       waitForUpdate(() => {
@@ -192,8 +186,7 @@ describe('Directive v-for', () => {
         data: {
           obj: { a: 0, b: 1, c: 2 }
         }
-      })
-      vm.$mount()
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
       vm.obj.a = 3
       waitForUpdate(() => {
@@ -216,8 +209,7 @@ describe('Directive v-for', () => {
           </div>
         `,
         data: { a: 0, b: 1, c: 2 }
-      })
-      vm.$mount()
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
       vm.a = 3
       waitForUpdate(() => {
@@ -239,8 +231,7 @@ describe('Directive v-for', () => {
         items: [1, 2, 3]
       },
       template: '<div><div v-if="item < 3" v-for="item in items">{{item}}</div></div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('12')
   })
 
@@ -250,16 +241,14 @@ describe('Directive v-for', () => {
         items: [1, 2, 3]
       },
       template: '<div><div v-for="item in items" v-if="item < 3">{{item}}</div></div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('12')
   })
 
   it('range v-for', () => {
     const vm = new Vue({
       template: '<div><div v-for="n in 3">{{n}}</div></div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('123')
   })
 
@@ -273,8 +262,7 @@ describe('Directive v-for', () => {
         ]
       },
       template: '<div><div v-for="item in items">{{ item.msg }}</div></div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('abc')
     const first = vm.$el.children[0]
     vm.items.reverse()
@@ -296,8 +284,7 @@ describe('Directive v-for', () => {
         ]
       },
       template: '<div><div v-for="item in items" track-by="item.id">{{ item.msg }}</div></div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.textContent).toBe('abc')
     const first = vm.$el.children[0]
     vm.items.reverse()
@@ -324,8 +311,7 @@ describe('Directive v-for', () => {
             '<p v-for="subItem in item.items">{{$index}} {{subItem.a}} {{i}} {{item.a}}</p>' +
           '</div>' +
         '</div>'
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe(
       '<div><p>0 1 0 1</p><p>1 2 0 1</p></div>' +
       '<div><p>0 3 1 2</p><p>1 4 1 2</p></div>'
@@ -348,8 +334,7 @@ describe('Directive v-for', () => {
             '<p>{{item.a + 1}}</p>' +
           '</template>' +
         '</div>'
-    })
-    vm.$mount()
+    }).$mount()
     assertMarkup()
     vm.list.reverse()
     waitForUpdate(() => {
@@ -390,8 +375,7 @@ describe('Directive v-for', () => {
           template: '<p>{{msg}}<slot></slot></p>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     assertMarkup()
     vm.list.reverse()
     waitForUpdate(() => {
@@ -431,8 +415,7 @@ describe('Directive v-for', () => {
           template: '<div>Two!</div>'
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toContain('<p>One!</p><div>Two!</div>')
     vm.list.reverse()
     waitForUpdate(() => {

test/unit/features/directives/html.spec.js

@@ -5,8 +5,7 @@ describe('Directive v-html', () => {
     const vm = new Vue({
       template: '<div v-html="a"></div>',
       data: { a: 'hello' }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('hello')
   })
 
@@ -14,8 +13,7 @@ describe('Directive v-html', () => {
     const vm = new Vue({
       template: '<div v-html="a"></div>',
       data: { a: '<span></span>' }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span></span>')
   })
 
@@ -23,8 +21,7 @@ describe('Directive v-html', () => {
     const vm = new Vue({
       template: '<div v-html="a"></div>',
       data: { a: false }
-    })
-    vm.$mount()
+    }).$mount()
     waitForUpdate(() => {
       expect(vm.$el.innerHTML).toBe('false')
       vm.a = []

test/unit/features/directives/if.spec.js

@@ -5,8 +5,7 @@ describe('Directive v-if', () => {
     const vm = new Vue({
       template: '<div><span v-if="foo">hello</span></div>',
       data: { foo: true }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>hello</span>')
   })
 
@@ -14,8 +13,7 @@ describe('Directive v-if', () => {
     const vm = new Vue({
       template: '<div><span v-if="foo">hello</span></div>',
       data: { foo: false }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('')
   })
 
@@ -23,8 +21,7 @@ describe('Directive v-if', () => {
     const vm = new Vue({
       template: '<div><span v-if="foo">hello</span></div>',
       data: { foo: true }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>hello</span>')
     vm.foo = false
     waitForUpdate(() => {
@@ -64,8 +61,7 @@ describe('Directive v-if', () => {
         </div>
       `,
       data: { foo: true }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>hello</span>')
     vm.foo = false
     waitForUpdate(() => {
@@ -109,8 +105,7 @@ describe('Directive v-if', () => {
           { value: true }
         ]
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>0</span><span>2</span>')
     vm.list[0].value = false
     waitForUpdate(() => {
@@ -140,8 +135,7 @@ describe('Directive v-if', () => {
           { value: true }
         ]
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>hello</span><span>bye</span><span>hello</span>')
     vm.list[0].value = false
     waitForUpdate(() => {

test/unit/features/directives/once.spec.js

@@ -5,8 +5,7 @@ describe('Directive v-once', () => {
     const vm = new Vue({
       template: '<div v-once>{{ a }}</div>',
       data: { a: 'hello' }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('hello')
     vm.a = 'world'
     waitForUpdate(() => {
@@ -28,8 +27,7 @@ describe('Directive v-once', () => {
           props: ['b']
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$children.length).toBe(0)
     expect(vm.$el.innerHTML)
       .toBe('<span>hello</span><div>hello</div>')
@@ -54,8 +52,7 @@ describe('Directive v-once', () => {
           props: ['b']
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$children.length).toBe(0)
     expect(vm.$el.innerHTML)
       .toBe('<span>hello</span><div>hello</div>')
@@ -84,8 +81,7 @@ describe('Directive v-once', () => {
           props: ['b']
         }
       }
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML)
       .toBe('<span>hello</span><div>hello</div><span>?</span>')
     vm.a = 'world'

test/unit/features/directives/show.spec.js

@@ -3,28 +3,25 @@ import Vue from 'vue'
 describe('Directive v-show', () => {
   it('should check show value is truthy', () => {
     const vm = new Vue({
-      el: '#app',
       template: '<div><span v-show="foo">hello</span></div>',
       data: { foo: true }
-    })
+    }).$mount()
     expect(vm.$el.firstChild.style.display).toBe('')
   })
 
   it('should check show value is falsy', () => {
     const vm = new Vue({
-      el: '#app',
       template: '<div><span v-show="foo">hello</span></div>',
       data: { foo: false }
-    })
+    }).$mount()
     expect(vm.$el.firstChild.style.display).toBe('none')
   })
 
   it('should update show value changed', done => {
     const vm = new Vue({
-      el: '#app',
       template: '<div><span v-show="foo">hello</span></div>',
       data: { foo: true }
-    })
+    }).$mount()
     expect(vm.$el.firstChild.style.display).toBe('')
     vm.foo = false
     waitForUpdate(() => {

test/unit/features/directives/text.spec.js

@@ -3,28 +3,25 @@ import Vue from 'vue'
 describe('Directive v-text', () => {
   it('should render text', () => {
     const vm = new Vue({
-      el: '#app',
       template: '<div v-text="a"></div>',
       data: { a: 'hello' }
-    })
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('hello')
   })
 
   it('should encode html entities', () => {
     const vm = new Vue({
-      el: '#app',
       template: '<div v-text="a"></div>',
       data: { a: '<foo>' }
-    })
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('&lt;foo&gt;')
   })
 
   it('should support all value types', done => {
     const vm = new Vue({
-      el: '#app',
       template: '<div v-text="a"></div>',
       data: { a: false }
-    })
+    }).$mount()
     waitForUpdate(() => {
       expect(vm.$el.innerHTML).toBe('false')
       vm.a = []

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

@@ -45,10 +45,9 @@ describe('Global API', () => {
       template: '<span>bar</span>'
     })
     const vm = new Vue({
-      el: document.createElement('div'),
       template: '<div><foo></foo><bar></bar></div>',
       components: { foo, bar }
-    })
+    }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
   })
 
@@ -93,8 +92,7 @@ describe('Global API', () => {
       },
       render: res.render,
       staticRenderFns: res.staticRenderFns
-    })
-    vm.$mount()
+    }).$mount()
     expect(vm.$el.innerHTML).toContain('<span>hello</span>')
   })
 })

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

@@ -24,10 +24,12 @@ describe('Global Assets API', () => {
         template: '<span>bar</span>'
       })
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div><foo></foo><bar></bar></div>'
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
+      // unregister them
+      delete Vue.options.components.foo
+      delete Vue.options.components.bar
     })
   })
 

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

@@ -6,18 +6,16 @@ describe('Global config', () => {
       // this option is set to false during unit tests.
       Vue.config.preserveWhitespace = true
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div><span>hi</span> <span>ha</span></div>'
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>hi</span> <span>ha</span>')
       Vue.config.preserveWhitespace = false
     })
 
     it('should remove whitespaces when set to false', () => {
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div><span>hi</span> <span>ha</span></div>'
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<span>hi</span><span>ha</span>')
     })
   })

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

@@ -4,10 +4,9 @@ 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 }
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('1')
       Vue.set(vm, 'x', 2)
       waitForUpdate(() => {
@@ -18,10 +17,9 @@ describe('Global Data Observer API', () => {
 
     it('should update a observing object', done => {
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div>{{foo.x}}</div>',
         data: { foo: { x: 1 }}
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('1')
       Vue.set(vm.foo, 'x', 2)
       waitForUpdate(() => {
@@ -32,10 +30,9 @@ describe('Global Data Observer API', () => {
 
     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'] }
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('<div>0-a</div><div>1-b</div><div>2-c</div>')
       Vue.set(vm.list, 1, 'd')
       waitForUpdate(() => {
@@ -46,10 +43,9 @@ describe('Global Data Observer API', () => {
 
     it('should update a vue object with nothing', done => {
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div>{{x}}</div>',
         data: { x: 1 }
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('1')
       Vue.set(vm, 'x', null)
       waitForUpdate(() => {
@@ -65,10 +61,9 @@ describe('Global Data Observer API', () => {
   describe('Vue.delete', () => {
     it('should delete a key', done => {
       const vm = new Vue({
-        el: document.createElement('div'),
         template: '<div>{{obj.x}}</div>',
         data: { obj: { x: 1 }}
-      })
+      }).$mount()
       expect(vm.$el.innerHTML).toBe('1')
       vm.obj.x = 2
       waitForUpdate(() => {