var Vue = require('src') var _ = require('src/util') describe('Instance Events', function () { var spy, spy2 beforeEach(function () { spy = jasmine.createSpy() spy2 = jasmine.createSpy() }) describe('option events', function () { it('normal events', function () { var vm = new Vue({ events: { test: spy, test2: [spy, spy] } }) vm.$emit('test', 123) expect(spy).toHaveBeenCalledWith(123) vm.$emit('test2') expect(spy.calls.count()).toBe(3) }) it('hook events', function () { new Vue({ events: { 'hook:created': spy } }) expect(spy).toHaveBeenCalled() }) it('method name strings', function () { var vm = new Vue({ events: { test: 'doSomething', test2: 'doSomethingElse' }, methods: { doSomething: spy } }) vm.$emit('test', 123) expect(spy).toHaveBeenCalledWith(123) vm.$emit('test2') expect('Unknown method').toHaveBeenWarned() }) }) describe('option watchers', function () { it('normal', function (done) { var spyA = jasmine.createSpy() var spyB = jasmine.createSpy() var count = 0 var a = { b: { c: 1 } } var vm = new Vue({ watch: { 'a.b.c': spyA, 'b + c': spyB, a: { deep: true, immediate: true, handler: 'test' } }, data: { a: a, b: 1, c: 2 }, methods: { test: function (val) { count++ expect(val).toBe(a) } } }) vm.a.b.c = 2 vm.b = 3 vm.c = 4 expect(count).toBe(1) _.nextTick(function () { expect(spyA).toHaveBeenCalledWith(2, 1) expect(spyB).toHaveBeenCalledWith(7, 3) expect(count).toBe(2) done() }) }) it('method name strings', function (done) { var spy = jasmine.createSpy() var vm = new Vue({ watch: { 'a': 'test' }, data: { a: 1 }, methods: { test: spy } }) vm.a = 2 _.nextTick(function () { expect(spy).toHaveBeenCalledWith(2, 1) done() }) }) }) describe('hooks', function () { it('created', function () { var ctx var vm = new Vue({ created: function () { // can't assert this === vm here // because the constructor hasn't returned yet ctx = this // should have observed data expect(this._data.__ob__).toBeTruthy() spy() } }) expect(ctx).toBe(vm) expect(spy).toHaveBeenCalled() }) it('beforeDestroy', function () { var vm = new Vue({ beforeDestroy: function () { expect(this).toBe(vm) expect(this._isDestroyed).toBe(false) spy() } }) vm.$destroy() expect(spy).toHaveBeenCalled() }) it('destroyed', function () { var vm = new Vue({ destroyed: function () { expect(this).toBe(vm) expect(this._isDestroyed).toBe(true) spy() } }) vm.$destroy() expect(spy).toHaveBeenCalled() }) it('beforeCompile', function () { var vm = new Vue({ template: '{{a}}', data: { a: 1 }, beforeCompile: function () { expect(this).toBe(vm) expect(this.$el).toBe(el) expect(this.$el.textContent).toBe('{{a}}') spy() } }) var el = document.createElement('div') vm.$mount(el) expect(spy).toHaveBeenCalled() }) it('compiled', function () { var vm = new Vue({ template: '{{a}}', data: { a: 1 }, compiled: function () { expect(this.$el).toBe(el) expect(this.$el.textContent).toBe('1') spy() } }) var el = document.createElement('div') vm.$mount(el) expect(spy).toHaveBeenCalled() }) it('ready', function () { var vm = new Vue({ ready: spy }) expect(spy).not.toHaveBeenCalled() var el = document.createElement('div') vm.$mount(el) expect(spy).not.toHaveBeenCalled() vm.$appendTo(document.body) expect(spy).toHaveBeenCalled() vm.$remove() // try mounting on something already in dom el = document.createElement('div') document.body.appendChild(el) vm = new Vue({ el: el, ready: spy2 }) expect(spy2).toHaveBeenCalled() vm.$remove() }) it('compile v-on on child component', function () { var vm = new Vue({ el: document.createElement('div'), template: '', data: { a: 0 }, methods: { onCreated: spy, onReady: spy }, components: { comp: { compiled: function () { this.$emit('ready', 123) this.$emit('ok') } } } }) expect(spy.calls.count()).toBe(2) expect(spy).toHaveBeenCalledWith(123) expect(vm.a).toBe(1) }) it('warn missing handler for child component v-on', function () { new Vue({ el: document.createElement('div'), template: '', components: { comp: {} } }) expect('v-on:test="onThat" expects a function value').toHaveBeenWarned() }) it('passing $arguments', function () { new Vue({ el: document.createElement('div'), template: '', methods: { onReady: spy }, components: { comp: { compiled: function () { this.$emit('ready', 123, 1234) } } } }) expect(spy).toHaveBeenCalledWith(1234) }) describe('attached/detached', function () { it('in DOM', function () { var el = document.createElement('div') var childEl = document.createElement('div') el.appendChild(childEl) document.body.appendChild(el) var parentVm = new Vue({ el: el, attached: spy, detached: spy2 }) var childVm = new Vue({ parent: parentVm, el: childEl, attached: spy, detached: spy2 }) expect(spy.calls.count()).toBe(2) parentVm.$remove() expect(spy2.calls.count()).toBe(2) // child should be already detached // so the hook should not fire again childVm.$remove() expect(spy2.calls.count()).toBe(2) }) it('create then attach', function () { var el = document.createElement('div') var childEl = document.createElement('div') el.appendChild(childEl) var parentVm = new Vue({ el: el, attached: spy, detached: spy2 }) var childVm = new Vue({ parent: parentVm, el: childEl, attached: spy, detached: spy2 }) parentVm.$appendTo(document.body) expect(spy.calls.count()).toBe(2) // detach child first childVm.$remove() expect(spy2.calls.count()).toBe(1) // should only fire parent detach parentVm.$remove() expect(spy2.calls.count()).toBe(2) }) it('should not fire on detached child', function () { var el = document.createElement('div') var childEl = document.createElement('div') var parentVm = new Vue({ el: el, attached: spy }) var childVm = new Vue({ parent: parentVm, el: childEl, attached: spy }) parentVm.$appendTo(document.body) expect(spy.calls.count()).toBe(1) childVm.$appendTo(el) expect(spy.calls.count()).toBe(2) }) }) }) })