createErrorTestComponents() — vue Function Reference

Source Code

test/unit/features/error-handling.spec.ts lines 265–451

function createErrorTestComponents() {
  const components: any = {}

  // data
  components.data = {
    data() {
      throw new Error('data')
    },
    render(h) {
      return h('div')
    }
  }

  // render error
  components.render = {
    render(h) {
      throw new Error('render')
    }
  }

  // lifecycle errors
  ;['create', 'mount', 'update', 'destroy'].forEach(hook => {
    // before
    const before = 'before' + hook.charAt(0).toUpperCase() + hook.slice(1)
    const beforeComp = (components[before] = {
      props: ['n'],
      render(h) {
        return h('div', this.n)
      }
    })
    beforeComp[before] = function () {
      throw new Error(before)
    }

    const beforeCompAsync = (components[`${before}Async`] = {
      props: ['n'],
      render(h) {
        return h('div', this.n)
      }
    })
    beforeCompAsync[before] = function () {
      return new Promise((resolve, reject) => reject(new Error(before)))
    }

    // after
    const after = hook.replace(/e?$/, 'ed')
    const afterComp = (components[after] = {
      props: ['n'],
      render(h) {
        return h('div', this.n)
      }
    })
    afterComp[after] = function () {
      throw new Error(after)
    }

    const afterCompAsync = (components[`${after}Async`] = {
      props: ['n'],
      render(h) {
        return h('div', this.n)
      }
    })
    afterCompAsync[after] = function () {
      return new Promise((resolve, reject) => reject(new Error(after)))
    }
  })

  // directive hooks errors
  ;['bind', 'update', 'unbind'].forEach(hook => {
    const key = 'directive ' + hook
    const dirComp: any = (components[key] = {
      props: ['n'],
      template: `<div v-foo="n">{{ n }}</div>`
    })
    const dirFoo = {}
    dirFoo[hook] = function () {
      throw new Error(key)
    }
    dirComp.directives = {
      foo: dirFoo
    }
  })

  // user watcher
  components.userWatcherGetter = {
    props: ['n'],
    created() {
      this.$watch(
        function () {
          return this.n + this.a.b.c
        },
        val => {
          console.log('user watcher fired: ' + val)
        }
      )
    },
    render(h) {
      return h('div', this.n)
    }
  }

  components.userWatcherCallback = {
    props: ['n'],
    watch: {
      n() {
        throw new Error('userWatcherCallback error')
      }
    },
    render(h) {
      return h('div', this.n)
    }
  }

  components.userImmediateWatcherCallback = {
    props: ['n'],
    watch: {
      n: {
        immediate: true,
        handler() {
          throw new Error('userImmediateWatcherCallback error')
        }
      }
    },
    render(h) {
      return h('div', this.n)
    }
  }

  components.userWatcherCallbackAsync = {
    props: ['n'],
    watch: {
      n() {
        return Promise.reject(new Error('userWatcherCallback error'))
      }
    },
    render(h) {
      return h('div', this.n)
    }
  }

  components.userImmediateWatcherCallbackAsync = {
    props: ['n'],
    watch: {
      n: {
        immediate: true,
        handler() {
          return Promise.reject(new Error('userImmediateWatcherCallback error'))
        }
      }
    },
    render(h) {
      return h('div', this.n)
    }
  }

  // event errors
  components.event = {
    beforeCreate() {
      this.$on('e', () => {
        throw new Error('event')
      })
    },
    mounted() {
      this.$emit('e')
    },
    render(h) {
      return h('div')
    }
  }

  components.eventAsync = {
    beforeCreate() {
      this.$on(
        'e',
        () => new Promise((resolve, reject) => reject(new Error('event')))
      )
    },
    mounted() {
      this.$emit('e')
    },
    render(h) {
      return h('div')
    }
  }

  return components
}