it('should register on component with empty roots', () => { const vm = new Vue({ template: '<child ref="test"></child>', components: { child: { template: '<div v-if="false"></div>' } } }).$mount() expect(vm.$refs.test).toBe(vm.$children[0]) })
it('handle regex with pipe', () => { const vm = new Vue({ template: `<test ref="test" :pattern="/a|b\\// | identity"></test>`, filters: { identity: v => v }, components: { test: { props: ['pattern'], template: '<div></div>' } } }).$mount() expect(vm.$refs.test.pattern instanceof RegExp).toBe(true) expect(vm.$refs.test.pattern.toString()).toBe('/a|b\\//') })
it('should accept dynamic component', done => { const vm = new Vue({ template: `<div> <component :is="test" ref="test"></component> </div>`, components, data: { test: 'test' } }) vm.$mount() expect(vm.$refs.test.$options.id).toBe('test') vm.test = 'test2' waitForUpdate(() => { expect(vm.$refs.test.$options.id).toBe('test2') vm.test = '' }).then(() => { expect(vm.$refs.test).toBeUndefined() }).then(done) })
vm.$refs.test.msg = 'world' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('<span>world</span>')
it('default slot', done => { const vm = new Vue({ template: ` <test ref="test"> <template scope="props"> <span>{{ props.msg }}</span> </template> </test> `, components: { test: { data () { return { msg: 'hello' } }, template: ` <div> <slot :msg="msg"></slot> </div> ` } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') vm.$refs.test.msg = 'world' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('<span>world</span>') }).then(done) })
it('should register on component with empty roots', () => { const vm = new Vue({ template: '<child ref="test"></child>', components: { child: { template: '<div v-if="false"></div>' } } }).$mount() expect(vm.$refs.test).toBe(vm.$children[0]) })
it('handle regex with pipe', () => { const vm = new Vue({ template: `<test ref="test" :pattern="/a|b\\// | identity"></test>`, filters: { identity: v => v }, components: { test: { props: ['pattern'], template: '<div></div>' } } }).$mount() expect(vm.$refs.test.pattern instanceof RegExp).toBe(true) expect(vm.$refs.test.pattern.toString()).toBe('/a|b\\//') })
it('should accept dynamic component', done => { const vm = new Vue({ template: `<div> <component :is="test" ref="test"></component> </div>`, components, data: { test: 'test' } }) vm.$mount() expect(vm.$refs.test.$options.id).toBe('test') vm.test = 'test2' waitForUpdate(() => { expect(vm.$refs.test.$options.id).toBe('test2') vm.test = '' }).then(() => { expect(vm.$refs.test).toBeUndefined() }).then(done) })
it('template slot', done => { const vm = new Vue({ template: ` <test ref="test"> <template slot="item" scope="props"> <span>{{ props.foo }}</span><span>{{ props.bar }}</span> </template> </test> `, components: { test: { data () { return { foo: 'FOO', bar: 'BAR' } }, template: ` <div> <slot name="item" :foo="foo" :bar="bar"></slot> </div> ` } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>FOO</span><span>BAR</span>') vm.$refs.test.foo = 'BAZ' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('<span>BAZ</span><span>BAR</span>') }).then(done) })
it('template slot', done => { const vm = new Vue({ template: ` <test ref="test"> <template slot="item" scope="props"> <span>{{ props.foo }}</span><span>{{ props.bar }}</span> </template> </test> `, components: { test: { data () { return { foo: 'FOO', bar: 'BAR' } }, template: ` <div> <slot name="item" :foo="foo" :bar="bar"></slot> </div> ` } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>FOO</span><span>BAR</span>') vm.$refs.test.foo = 'BAZ' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('<span>BAZ</span><span>BAR</span>') }).then(done) })
it('default slot', done => { const vm = new Vue({ template: ` <test ref="test"> <template scope="props"> <span>{{ props.msg }}</span> </template> </test> `, components: { test: { data () { return { msg: 'hello' } }, template: ` <div> <slot :msg="msg"></slot> </div> ` } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') vm.$refs.test.msg = 'world' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('<span>world</span>') }).then(done) })