template-ref.spec.ts — vue Source File

Source Code

import Vue from 'vue'

describe('ref', () => {
  type TestShape = {
    id: string
    template: string
    data?: any
    components?: any
  }
  type ComponentShape = {
    test: TestShape
    test2: TestShape
    test3: TestShape
  }
  const components: ComponentShape = {
    test: {
      id: 'test',
      template: '<div>test</div>'
    },
    test2: {
      id: 'test2',
      template: '<div>test2</div>'
    },
    test3: {
      id: 'test3',
      template: '<div>test3</div>'
    }
  }

  it('should work', () => {
    const vm = new Vue({
      data: {
        value: 'bar'
      },
      template: `<div>
        <test ref="foo"></test>
        <test2 :ref="value"></test2>
        <test3 :ref="0"></test3>
      </div>`,
      components
    })
    vm.$mount()
    expect(vm.$refs.foo).toBeTruthy()
    expect(vm.$refs.foo.$options.id).toBe('test')
    expect(vm.$refs.bar).toBeTruthy()
    expect(vm.$refs.bar.$options.id).toBe('test2')
    expect(vm.$refs['0']).toBeTruthy()
    expect(vm.$refs['0'].$options.id).toBe('test3')
  })

  it('should dynamically update refs', done => {
    const vm = new Vue({
      data: {
        value: 'foo'
      },
      template: '<div :ref="value"></div>'
    }).$mount()
    expect(vm.$refs.foo).toBe(vm.$el)
    vm.value = 'bar'
    waitForUpdate(() => {
// ... (193 more lines)