vue/test/unit/features/global-api/set-delete.spec.ts

import Vue from 'vue'

describe('Global API: set/delete', () => {
  describe('Vue.set', () => {
    it('should update a vue object', done => {
      const vm = new Vue({
        template: '<div>{{x}}</div>',
        data: { x: 1 }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('1')
      Vue.set(vm, 'x', 2)
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('2')
      }).then(done)
    })

    it('should update an observing object', done => {
      const vm = new Vue({
        template: '<div>{{foo.x}}</div>',
        data: { foo: { x: 1 } }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('1')
      Vue.set(vm.foo, 'x', 2)
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('2')
      }).then(done)
    })

    it('should update an observing array', done => {
      const vm = new Vue({
        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(() => {
        expect(vm.$el.innerHTML).toBe(
          '<div>0-a</div><div>1-d</div><div>2-c</div>'
        )
        Vue.set(vm.list, '2', 'e')
      })
        .then(() => {
          expect(vm.$el.innerHTML).toBe(
            '<div>0-a</div><div>1-d</div><div>2-e</div>'
          )
          /* eslint-disable no-new-wrappers */
          Vue.set(vm.list, new Number(1), 'f')
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe(
            '<div>0-a</div><div>1-f</div><div>2-e</div>'
          )
          Vue.set(vm.list, '3g', 'g')
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe(
            '<div>0-a</div><div>1-f</div><div>2-e</div>'
          )
        })
        .then(done)
    })

    it('should update a vue object with nothing', done => {
      const vm = new Vue({
        template: '<div>{{x}}</div>',
        data: { x: 1 }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('1')
      Vue.set(vm, 'x', null)
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('')
        Vue.set(vm, 'x')
      })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('')
        })
        .then(done)
    })

    it('be able to use string type index in array', done => {
      const vm = new Vue({
        template: '<div><p v-for="obj in lists">{{obj.name}}</p></div>',
        data: {
          lists: [{ name: 'A' }, { name: 'B' }, { name: 'C' }]
        }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('<p>A</p><p>B</p><p>C</p>')
      Vue.set(vm.lists, '0', { name: 'D' })
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('<p>D</p><p>B</p><p>C</p>')
      }).then(done)
    })

    // #6845
    it('should not overwrite properties on prototype chain', () => {
      class Model {
        _bar?: string
        constructor() {
          this._bar = null
        }
        get bar() {
          return this._bar
        }
        set bar(newvalue) {
          this._bar = newvalue
        }
      }

      const vm = new Vue({
        data: {
          data: new Model()
        }
      })

      Vue.set(vm.data, 'bar', 123)
      expect(vm.data.bar).toBe(123)
      expect(vm.data.hasOwnProperty('bar')).toBe(false)
      expect(vm.data._bar).toBe(123)
    })
  })

  describe('Vue.delete', () => {
    it('should delete a key', done => {
      const vm = new Vue({
        template: '<div>{{obj.x}}</div>',
        data: { obj: { x: 1 } }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('1')
      vm.obj.x = 2
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('2')
        Vue.delete(vm.obj, 'x')
      })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('')
          vm.obj.x = 3
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('')
        })
        .then(done)
    })

    it('be able to delete an item in array', done => {
      const vm = new Vue({
        template: '<div><p v-for="obj in lists">{{obj.name}}</p></div>',
        data: {
          lists: [{ name: 'A' }, { name: 'B' }, { name: 'C' }]
        }
      }).$mount()
      expect(vm.$el.innerHTML).toBe('<p>A</p><p>B</p><p>C</p>')
      Vue.delete(vm.lists, 1)
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
        Vue.delete(vm.lists, NaN)
      })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
          Vue.delete(vm.lists, -1)
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
          Vue.delete(vm.lists, '1.3')
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
          Vue.delete(vm.lists, true)
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
          Vue.delete(vm.lists, {})
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p><p>C</p>')
          Vue.delete(vm.lists, '1')
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('<p>A</p>')
          /* eslint-disable no-new-wrappers */
          Vue.delete(vm.lists, new Number(0) as number)
        })
        .then(() => {
          expect(vm.$el.innerHTML).toBe('')
        })
        .then(done)
    })
  })
})