import Vue from 'vue' describe('Options lifecyce hooks', () => { let spy beforeEach(() => { spy = jasmine.createSpy('hook') }) describe('beforeCreate', () => { it('should allow modifying options', () => { const vm = new Vue({ data: { a: 1 }, beforeCreate () { spy() expect(this.a).toBeUndefined() this.$options.computed = { b () { return this.a + 1 } } } }) expect(spy).toHaveBeenCalled() expect(vm.b).toBe(2) }) }) describe('created', () => { it('should have completed observation', () => { new Vue({ data: { a: 1 }, created () { expect(this.a).toBe(1) spy() } }) expect(spy).toHaveBeenCalled() }) }) describe('beforeMount', () => { it('should not have mounted', () => { const vm = new Vue({ render () {}, beforeMount () { spy() expect(this._isMounted).toBe(false) expect(this.$el).toBeUndefined() // due to empty mount expect(this._vnode).toBeNull() expect(this._watcher).toBeNull() } }) expect(spy).not.toHaveBeenCalled() vm.$mount() expect(spy).toHaveBeenCalled() }) }) describe('mounted', () => { it('should have mounted', () => { const vm = new Vue({ template: '
', mounted () { spy() expect(this._isMounted).toBe(true) expect(this.$el.tagName).toBe('DIV') expect(this._vnode.tag).toBe('div') } }) expect(spy).not.toHaveBeenCalled() vm.$mount() expect(spy).toHaveBeenCalled() }) // #3898 it('should call for manually mounted instance with parent', () => { const parent = new Vue() expect(spy).not.toHaveBeenCalled() new Vue({ parent, template: '
', mounted () { spy() } }).$mount() expect(spy).toHaveBeenCalled() }) it('should mount child parent in correct order', () => { const calls = [] new Vue({ template: '
', mounted () { calls.push('parent') }, components: { test: { template: '', mounted () { expect(this.$el.parentNode).toBeTruthy() calls.push('child') }, components: { nested: { template: '
', mounted () { expect(this.$el.parentNode).toBeTruthy() calls.push('nested') } } } } } }).$mount() expect(calls).toEqual(['nested', 'child', 'parent']) }) }) describe('beforeUpdate', () => { it('should be called before update', done => { const vm = new Vue({ template: '
{{ msg }}
', data: { msg: 'foo' }, beforeUpdate () { spy() expect(this.$el.textContent).toBe('foo') } }).$mount() expect(spy).not.toHaveBeenCalled() vm.msg = 'bar' expect(spy).not.toHaveBeenCalled() // should be async waitForUpdate(() => { expect(spy).toHaveBeenCalled() }).then(done) }) }) describe('updated', () => { it('should be called after update', done => { const vm = new Vue({ template: '
{{ msg }}
', data: { msg: 'foo' }, updated () { spy() expect(this.$el.textContent).toBe('bar') } }).$mount() expect(spy).not.toHaveBeenCalled() vm.msg = 'bar' expect(spy).not.toHaveBeenCalled() // should be async waitForUpdate(() => { expect(spy).toHaveBeenCalled() }).then(done) }) it('should be called after children are updated', done => { const calls = [] const vm = new Vue({ template: '
{{ msg }}
', data: { msg: 'foo' }, components: { test: { template: `
`, updated () { expect(this.$el.textContent).toBe('bar') calls.push('child') } } }, updated () { expect(this.$el.textContent).toBe('bar') calls.push('parent') } }).$mount() expect(calls).toEqual([]) vm.msg = 'bar' expect(calls).toEqual([]) waitForUpdate(() => { expect(calls).toEqual(['child', 'parent']) }).then(done) }) }) describe('beforeDestroy', () => { it('should be called before destroy', () => { const vm = new Vue({ render () {}, beforeDestroy () { spy() expect(this._isBeingDestroyed).toBe(false) expect(this._isDestroyed).toBe(false) } }).$mount() expect(spy).not.toHaveBeenCalled() vm.$destroy() vm.$destroy() expect(spy).toHaveBeenCalled() expect(spy.calls.count()).toBe(1) }) }) describe('destroyed', () => { it('should be called after destroy', () => { const vm = new Vue({ render () {}, destroyed () { spy() expect(this._isBeingDestroyed).toBe(true) expect(this._isDestroyed).toBe(true) } }).$mount() expect(spy).not.toHaveBeenCalled() vm.$destroy() vm.$destroy() expect(spy).toHaveBeenCalled() expect(spy.calls.count()).toBe(1) }) }) it('should emit hook events', () => { const created = jasmine.createSpy() const mounted = jasmine.createSpy() const destroyed = jasmine.createSpy() const vm = new Vue({ render () {}, beforeCreate () { this.$on('hook:created', created) this.$on('hook:mounted', mounted) this.$on('hook:destroyed', destroyed) } }) expect(created).toHaveBeenCalled() expect(mounted).not.toHaveBeenCalled() expect(destroyed).not.toHaveBeenCalled() vm.$mount() expect(mounted).toHaveBeenCalled() expect(destroyed).not.toHaveBeenCalled() vm.$destroy() expect(destroyed).toHaveBeenCalled() }) })