it('should bind to a child component', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @custom="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('custom', 'foo', 'bar') expect(spy).toHaveBeenCalledWith('foo', 'bar') })
it('remove listener on child component', done => { const spy2 = jasmine.createSpy('remove listener') vm = new Vue({ el, methods: { foo: spy, bar: spy2 }, data: { ok: true }, components: { test: { template: '<div></div>' } }, render (h) { return this.ok ? h('test', { on: { foo: this.foo }}) : h('test', { on: { bar: this.bar }}) } }) vm.$children[0].$emit('foo') expect(spy.calls.count()).toBe(1) expect(spy2.calls.count()).toBe(0) vm.ok = false waitForUpdate(() => { vm.$children[0].$emit('foo') expect(spy.calls.count()).toBe(1) // should no longer trigger vm.$children[0].$emit('bar') expect(spy2.calls.count()).toBe(1) }).then(done) })
it('should be able to bind native events for a child component', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @click.native="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('click') expect(spy).not.toHaveBeenCalled() triggerEvent(vm.$children[0].$el, 'click') expect(spy).toHaveBeenCalled() })
it('.once modifier should work with child components', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @custom.once="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('custom') expect(spy.calls.count()).toBe(1) vm.$children[0].$emit('custom') expect(spy.calls.count()).toBe(1) // should not be called again })
it('should bind to a child component', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @custom="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('custom', 'foo', 'bar') expect(spy).toHaveBeenCalledWith('foo', 'bar') })
it('should be able to bind native events for a child component', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @click.native="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('click') expect(spy).not.toHaveBeenCalled() triggerEvent(vm.$children[0].$el, 'click') expect(spy).toHaveBeenCalled() })
it('.once modifier should work with child components', () => { Vue.component('bar', { template: '<span>Hello</span>' }) vm = new Vue({ el, template: '<bar @custom.once="foo"></bar>', methods: { foo: spy } }) vm.$children[0].$emit('custom') expect(spy.calls.count()).toBe(1) vm.$children[0].$emit('custom') expect(spy.calls.count()).toBe(1) // should not be called again })
it('remove listener on child component', done => { const spy2 = jasmine.createSpy('remove listener') vm = new Vue({ el, methods: { foo: spy, bar: spy2 }, data: { ok: true }, components: { test: { template: '<div></div>' } }, render (h) { return this.ok ? h('test', { on: { foo: this.foo }}) : h('test', { on: { bar: this.bar }}) } }) vm.$children[0].$emit('foo') expect(spy.calls.count()).toBe(1) expect(spy2.calls.count()).toBe(0) vm.ok = false waitForUpdate(() => { vm.$children[0].$emit('foo') expect(spy.calls.count()).toBe(1) // should no longer trigger vm.$children[0].$emit('bar') expect(spy2.calls.count()).toBe(1) }).then(done) })