improve v-for unit tests

src/compiler/codegen.js

@@ -79,7 +79,7 @@ function genFor (el) {
   const iterator = el.iterator
   el.for = false // avoid recursion
   return `(${exp})&&__renderList__((${exp}), ` +
-    `function(${alias},$index${iterator ? `,${iterator}` : ''}){` +
+    `function(${alias},$index,${iterator || '$key'}){` +
       `return ${genElement(el)}` +
     '})'
 }

src/compiler/parser/index.js

@@ -101,7 +101,7 @@ export function parse (template, options) {
         processOnce(element)
         // determine whether this is a plain element after
         // removing if/for/once attributes
-        element.plain = !attrs.length
+        element.plain = !element.key && !attrs.length
         processRender(element)
         processSlot(element)
         processComponent(element)

src/core/instance/lifecycle.js

@@ -81,8 +81,9 @@ export function lifecycleMixin (Vue) {
     }
   }
 
-  Vue.prototype._updateFromParent = function (propsData, listeners, parentVnode) {
+  Vue.prototype._updateFromParent = function (propsData, listeners, parentVnode, renderChildren) {
     this.$options._parentVnode = parentVnode
+    this.$options._renderChildren = renderChildren
     // update props
     if (propsData && this.$options.props) {
       observerState.shouldConvert = false

src/core/vdom/create-component.js

@@ -90,12 +90,13 @@ function init (vnode) {
 }
 
 function prepatch (oldVnode, vnode) {
-  const { listeners, propsData } = vnode.componentOptions
+  const { listeners, propsData, children } = vnode.componentOptions
   vnode.child = oldVnode.child
   vnode.child._updateFromParent(
     propsData, // updated props
     listeners, // updated listeners
-    vnode // new parent vnode
+    vnode, // new parent vnode
+    children // new children
   )
 }
 

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

@@ -1,18 +1,18 @@
 import Vue from 'vue'
 
 describe('Directive v-for', () => {
-  it('should travel array of primitive values', done => {
+  it('should render array of primitive values', done => {
     const vm = new Vue({
-      el: '#app',
       template: `
         <div>
-          <span v-for="(i, item) in list">{{i}}-{{item}}</span>
+          <span v-for="item in list">{{$index}}-{{item}}</span>
         </div>
       `,
       data: {
         list: ['a', 'b', 'c']
       }
     })
+    vm.$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(() => {
@@ -30,12 +30,11 @@ describe('Directive v-for', () => {
     }).catch(done)
   })
 
-  it('should travel array of object values', done => {
+  it('should render array of object values', done => {
     const vm = new Vue({
-      el: '#app',
       template: `
         <div>
-          <span v-for="(i, item) in list">{{i}}-{{item.value}}</span>
+          <span v-for="item in list">{{$index}}-{{item.value}}</span>
         </div>
       `,
       data: {
@@ -46,6 +45,7 @@ describe('Directive v-for', () => {
         ]
       }
     })
+    vm.$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(() => {
@@ -66,18 +66,18 @@ describe('Directive v-for', () => {
     }).catch(done)
   })
 
-  it('should travel each key of an object', done => {
+  it('should render an Object', done => {
     const vm = new Vue({
-      el: '#app',
       template: `
         <div>
-          <span v-for="(k, v) in obj">{{v}}-{{k}}</span>
+          <span v-for="val in obj">{{val}}-{{$key}}</span>
         </div>
       `,
       data: {
         obj: { a: 0, b: 1, c: 2 }
       }
     })
+    vm.$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     vm.obj.a = 3
     waitForUpdate(() => {
@@ -92,16 +92,16 @@ describe('Directive v-for', () => {
     }).catch(done)
   })
 
-  it('should travel each key of data', done => {
+  it('should render each key of data', done => {
     const vm = new Vue({
-      el: '#app',
       template: `
         <div>
-          <span v-for="(k, v) in $data">{{v}}-{{k}}</span>
+          <span v-for="val in $data">{{val}}-{{$key}}</span>
         </div>
       `,
       data: { a: 0, b: 1, c: 2 }
     })
+    vm.$mount()
     expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
     vm.a = 3
     waitForUpdate(() => {
@@ -115,4 +115,329 @@ describe('Directive v-for', () => {
       done()
     }).catch(done)
   })
+
+  describe('alternative syntax', () => {
+    it('should render array of primitive values', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <span v-for="(i, item) in list">{{i}}-{{item}}</span>
+          </div>
+        `,
+        data: {
+          list: ['a', 'b', 'c']
+        }
+      })
+      vm.$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(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-d</span><span>1-b</span><span>2-c</span>')
+        vm.list.push('d')
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-d</span><span>1-b</span><span>2-c</span><span>3-d</span>')
+        vm.list.splice(1, 2)
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-d</span><span>1-d</span>')
+        vm.list = ['x', 'y']
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-x</span><span>1-y</span>')
+        done()
+      }).catch(done)
+    })
+
+    it('should render array of object values', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <span v-for="(i, item) in list">{{i}}-{{item.value}}</span>
+          </div>
+        `,
+        data: {
+          list: [
+            { value: 'a' },
+            { value: 'b' },
+            { value: 'c' }
+          ]
+        }
+      })
+      vm.$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(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-d</span><span>1-b</span><span>2-c</span>')
+        vm.list[0].value = 'e'
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-e</span><span>1-b</span><span>2-c</span>')
+        vm.list.push({})
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-e</span><span>1-b</span><span>2-c</span><span>3-</span>')
+        vm.list.splice(1, 2)
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-e</span><span>1-</span>')
+        vm.list = [{ value: 'x' }, { value: 'y' }]
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>0-x</span><span>1-y</span>')
+        done()
+      }).catch(done)
+    })
+
+    it('should render an Object', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <span v-for="(k, v) in obj">{{v}}-{{k}}</span>
+          </div>
+        `,
+        data: {
+          obj: { a: 0, b: 1, c: 2 }
+        }
+      })
+      vm.$mount()
+      expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
+      vm.obj.a = 3
+      waitForUpdate(() => {
+        expect(vm.$el.innerHTML).toBe('<span>3-a</span><span>1-b</span><span>2-c</span>')
+        Vue.set(vm.obj, 'd', 4)
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>3-a</span><span>1-b</span><span>2-c</span><span>4-d</span>')
+        Vue.delete(vm.obj, 'a')
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>1-b</span><span>2-c</span><span>4-d</span>')
+        done()
+      }).catch(done)
+    })
+
+    it('should render each key of data', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <span v-for="(k, v) in $data">{{v}}-{{k}}</span>
+          </div>
+        `,
+        data: { a: 0, b: 1, c: 2 }
+      })
+      vm.$mount()
+      expect(vm.$el.innerHTML).toBe('<span>0-a</span><span>1-b</span><span>2-c</span>')
+      vm.a = 3
+      waitForUpdate(() => {
+        expect(vm.$el.innerHTML).toBe('<span>3-a</span><span>1-b</span><span>2-c</span>')
+        Vue.set(vm, 'd', 4)
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>3-a</span><span>1-b</span><span>2-c</span><span>4-d</span>')
+        Vue.delete(vm, 'a')
+      }).then(() => {
+        expect(vm.$el.innerHTML).toBe('<span>1-b</span><span>2-c</span><span>4-d</span>')
+        done()
+      }).catch(done)
+    })
+  })
+
+  it('check priorities: v-if before v-for', function () {
+    const vm = new Vue({
+      data: {
+        items: [1, 2, 3]
+      },
+      template: '<div><div v-if="item < 3" v-for="item in items">{{item}}</div></div>'
+    })
+    vm.$mount()
+    expect(vm.$el.textContent).toBe('12')
+  })
+
+  it('check priorities: v-if after v-for', function () {
+    const vm = new Vue({
+      data: {
+        items: [1, 2, 3]
+      },
+      template: '<div><div v-for="item in items" v-if="item < 3">{{item}}</div></div>'
+    })
+    vm.$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()
+    expect(vm.$el.textContent).toBe('123')
+  })
+
+  it('without track-by', done => {
+    const vm = new Vue({
+      data: {
+        items: [
+          { id: 1, msg: 'a' },
+          { id: 2, msg: 'b' },
+          { id: 3, msg: 'c' }
+        ]
+      },
+      template: '<div><div v-for="item in items">{{ item.msg }}</div></div>'
+    })
+    vm.$mount()
+    expect(vm.$el.textContent).toBe('abc')
+    const first = vm.$el.children[0]
+    vm.items.reverse()
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('cba')
+      // assert reusing DOM element in place
+      expect(vm.$el.children[0]).toBe(first)
+      done()
+    })
+  })
+
+  it('with track-by', done => {
+    const vm = new Vue({
+      data: {
+        items: [
+          { id: 1, msg: 'a' },
+          { id: 2, msg: 'b' },
+          { id: 3, msg: 'c' }
+        ]
+      },
+      template: '<div><div v-for="item in items" track-by="id">{{ item.msg }}</div></div>'
+    })
+    vm.$mount()
+    expect(vm.$el.textContent).toBe('abc')
+    const first = vm.$el.children[0]
+    vm.items.reverse()
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('cba')
+      // assert moving DOM element
+      expect(vm.$el.children[0]).not.toBe(first)
+      expect(vm.$el.children[2]).toBe(first)
+      done()
+    })
+  })
+
+  it('nested loops', () => {
+    const vm = new Vue({
+      data: {
+        items: [
+          { items: [{a: 1}, {a: 2}], a: 1 },
+          { items: [{a: 3}, {a: 4}], a: 2 }
+        ]
+      },
+      template:
+        '<div>' +
+          '<div v-for="(i, item) in items">' +
+            '<p v-for="subItem in item.items">{{$index}} {{subItem.a}} {{i}} {{item.a}}</p>' +
+          '</div>' +
+        '</div>'
+    })
+    vm.$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>'
+    )
+  })
+
+  it('template v-for', done => {
+    const vm = new Vue({
+      data: {
+        list: [
+          { a: 1 },
+          { a: 2 },
+          { a: 3 }
+        ]
+      },
+      template:
+        '<div>' +
+          '<template v-for="item in list">' +
+            '<p>{{item.a}}</p>' +
+            '<p>{{item.a + 1}}</p>' +
+          '</template>' +
+        '</div>'
+    })
+    vm.$mount()
+    assertMarkup()
+    vm.list.reverse()
+    waitForUpdate(() => {
+      assertMarkup()
+      vm.list.splice(1, 1)
+    }).then(() => {
+      assertMarkup()
+      vm.list.splice(1, 0, { a: 2 })
+      done()
+    }).catch(done)
+
+    function assertMarkup () {
+      var markup = vm.list.map(function (item) {
+        return '<p>' + item.a + '</p><p>' + (item.a + 1) + '</p>'
+      }).join('')
+      expect(vm.$el.innerHTML).toBe(markup)
+    }
+  })
+
+  it('component v-for', done => {
+    const vm = new Vue({
+      data: {
+        list: [
+          { a: 1 },
+          { a: 2 },
+          { a: 3 }
+        ]
+      },
+      template:
+        '<div>' +
+          '<test v-for="item in list" :msg="item.a">' +
+            '<span>{{item.a}}</span>' +
+          '</test>' +
+        '</div>',
+      components: {
+        test: {
+          props: ['msg'],
+          template: '<p>{{msg}}<slot></slot></p>'
+        }
+      }
+    })
+    vm.$mount()
+    assertMarkup()
+    vm.list.reverse()
+    waitForUpdate(() => {
+      assertMarkup()
+      vm.list.splice(1, 1)
+    }).then(() => {
+      assertMarkup()
+      vm.list.splice(1, 0, { a: 2 })
+      done()
+    }).catch(done)
+
+    function assertMarkup () {
+      var markup = vm.list.map(function (item) {
+        return `<p>${item.a}<span>${item.a}</span></p>`
+      }).join('')
+      expect(vm.$el.innerHTML).toBe(markup)
+    }
+  })
+
+  it('dynamic component v-for', done => {
+    const vm = new Vue({
+      data: {
+        list: [
+          { type: 'one' },
+          { type: 'two' }
+        ]
+      },
+      template:
+        '<div>' +
+          '<component v-for="item in list" :is="item.type"></component>' +
+        '</div>',
+      components: {
+        one: {
+          template: '<p>One!</p>'
+        },
+        two: {
+          template: '<div>Two!</div>'
+        }
+      }
+    })
+    vm.$mount()
+    expect(vm.$el.innerHTML).toContain('<p>One!</p><div>Two!</div>')
+    vm.list.reverse()
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toContain('<div>Two!</div><p>One!</p>')
+      done()
+    }).catch(done)
+  })
 })