it('programmatic access to $slots', () => { const vm = new Vue({ template: '<test><p slot="a">A</p><div>C</div><p slot="b">B</div></p></test>', components: { test: { render () { expect(this.$slots.a.length).toBe(1) expect(this.$slots.a[0].tag).toBe('p') expect(this.$slots.a[0].children.length).toBe(1) expect(this.$slots.a[0].children[0].text).toBe('A') expect(this.$slots.b.length).toBe(1) expect(this.$slots.b[0].tag).toBe('p') expect(this.$slots.b[0].children.length).toBe(1) expect(this.$slots.b[0].children[0].text).toBe('B') expect(this.$slots.default.length).toBe(1) expect(this.$slots.default[0].tag).toBe('div') expect(this.$slots.default[0].children.length).toBe(1) expect(this.$slots.default[0].children[0].text).toBe('C') return this.$slots.default[0] } } } }).$mount() expect(vm.$el.tagName).toBe('DIV') expect(vm.$el.textContent).toBe('C') })
it('render function usage (default, as children)', () => { const vm = new Vue({ render (h) { return h('test', [ props => h('span', [props.msg]) ]) }, components: { test: { data () { return { msg: 'hello' } }, render (h) { return h('div', [ this.$scopedSlots.default({ msg: this.msg }) ]) } } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') })
it('render function usage (JSX)', () => { const vm = new Vue({ render (h) { return <test>{ props => <span>{props.msg}</span> }</test> }, components: { test: { data () { return { msg: 'hello' } }, render (h) { return <div> {this.$scopedSlots.default({ msg: this.msg })} </div> } } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') })
it('render function usage (default, as children)', () => { const vm = new Vue({ render (h) { return h('test', [ props => h('span', [props.msg]) ]) }, components: { test: { data () { return { msg: 'hello' } }, render (h) { return h('div', [ this.$scopedSlots.default({ msg: this.msg }) ]) } } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') })
it('render function usage (JSX)', () => { const vm = new Vue({ render (h) { return <test>{ props => <span>{props.msg}</span> }</test> }, components: { test: { data () { return { msg: 'hello' } }, render (h) { return <div> {this.$scopedSlots.default({ msg: this.msg })} </div> } } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>hello</span>') })
it('programmatic access to $slots', () => { const vm = new Vue({ template: '<test><p slot="a">A</p><div>C</div><p slot="b">B</div></p></test>', components: { test: { render () { expect(this.$slots.a.length).toBe(1) expect(this.$slots.a[0].tag).toBe('p') expect(this.$slots.a[0].children.length).toBe(1) expect(this.$slots.a[0].children[0].text).toBe('A') expect(this.$slots.b.length).toBe(1) expect(this.$slots.b[0].tag).toBe('p') expect(this.$slots.b[0].children.length).toBe(1) expect(this.$slots.b[0].children[0].text).toBe('B') expect(this.$slots.default.length).toBe(1) expect(this.$slots.default[0].tag).toBe('div') expect(this.$slots.default[0].children.length).toBe(1) expect(this.$slots.default[0].children[0].text).toBe('C') return this.$slots.default[0] } } } }).$mount() expect(vm.$el.tagName).toBe('DIV') expect(vm.$el.textContent).toBe('C') })