8000 test: add slot test case (#8344) · vuejs/vue@c813901 · GitHub
[go: up one dir, main page]

Skip to content

Commit c813901

Browse files
ClickerMonkeyyyx990803
authored andcommitted
test: add slot test case (#8344)
Added another test to ensure default slot contents are preserved as well as slots passed to children.
1 parent bb06c75 commit c813901

File tree

1 file changed

+71
-0
lines changed

1 file changed

+71
-0
lines changed

test/unit/features/component/component-scoped-slot.spec.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,4 +625,75 @@ describe('Component scoped slot', () => {
625625

626626
expect(vm.$el.querySelector('.bar').textContent.trim()).toBe('hi!')
627627
})
628+
629+
it('passing down merged scoped slots with v-bind', () => {
630+
const Bar = {
631+
template: `
632+
<div class="bar">
633+
<slot name="one" msg="1" />
634+
<slot name="two" msg="2" />
635+
</div>
636+
`
637+
}
638+
639+
const Ney = {
640+
template: `
641+
<div class="ney">
642+
<slot name="three" msg="3">
643+
3?
644+
</slot>
645+
</div>
646+
`
647+
}
648+
649+
const Foo = {
650+
components: { Bar, Ney },
651+
template: `
652+
<div class="foo">
653+
<bar v-bind="{ scopedSlots: $scopedSlots }"></bar>
654+
<ney v-bind="{ scopedSlots: $scopedSlots }"></ney>
655+
</div>
656+
`
657+
}
658+
659+
const vm1 = new Vue({
660+
components: { Foo },
661+
template: `
662+
<foo>
663+
<template slot="one" slot-scope="props">
664+
{{ props.msg + '!' }}
665+
</template>
666+
<template slot="two" slot-scope="props">
667+
{{ props.msg + '!!' }}
668+
</template>
669+
</foo>
670+
`
671+
}).$mount()
672+
673+
expect(vm1.$el.textContent.trim().replace(/\s+/g, '')).toBe('1!2!!3?')
674+
675+
const vm2 = new Vue({
676+
components: { Foo },
677+
methods: {
678+
tickle (me) {
679+
return me + ' tickled!'
680+
}
681+
},
682+
template: `
683+
<foo>
684+
<template slot="one" slot-scope="props">
685+
{{ props.msg + '!' }}
686+
</template>
687+
<template slot="two" slot-scope="props">
688+
{{ props.msg + '!!' }}
689+
</template>
690+
<template slot="three" slot-scope="props">
691+
{{ tickle( props.msg )}}
692+
</template>
693+
</foo>
694+
`
695+
}).$mount()
696+
697+
expect(vm2.$el.textContent.trim().replace(/\s+/g, '')).toBe('1!2!!3tickled!')
698+
})
628699
})

0 commit comments

Comments
 (0)
0