Browse Source

test: more test cases for $slot usage detection

dev
Evan You 6 years ago
parent
commit
d855027741
  1. 2
      src/compiler/parser/index.js
  2. 27
      test/unit/features/component/component-scoped-slot.spec.js

2
src/compiler/parser/index.js

@ -617,7 +617,7 @@ function childrenHas$Slot (el): boolean {
return el.children ? el.children.some(nodeHas$Slot) : false
}
const $slotRE = /\$slot/
const $slotRE = /(^|[^\w_$])\$slot($|[^\w_$])/
function nodeHas$Slot (node): boolean {
// caching
if (hasOwn(node, 'has$Slot')) {

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

@ -690,10 +690,33 @@ describe('Component scoped slot', () => {
expect(vm.$el.innerHTML).toBe(`default<div>default</div><div>static</div>`)
})
// testing $slot detection: bracket access, using $slot alone, passing as arguments...
it('should work for alternative $slot usage', () => {
const vm = new Vue({
template: `<foo>{{ $slot['foo'] }}<div slot="foo">{{ $slot }}</div><div>{{ pick($slot) }}</div></foo>`,
methods: { pick: s => s.foo },
components: { foo: { template: `<div><slot foo="default"/><slot name="foo"/></div>` }}
}).$mount()
expect(vm.$el.innerHTML).toBe(`default<div>default</div><div>{}</div>`)
})
// should not consider detection if $slot is inside longer valid identifier
it('should not break when template expression uses $slots', () => {
const vm = new Vue({
template: ``
})
data: { some$slot: 123 },
template: `<foo>{{ some$slot }}<div slot="foo">{{ $slots }}</div></foo>`,
components: {
foo: {
render(h) {
// should be compiled as normal slots
expect(this.$slots.default).toBeTruthy()
expect(this.$slots.foo).toBeTruthy()
return h('div', [this.$slots.default, this.$slots.foo])
}
}
}
}).$mount()
expect(vm.$el.innerHTML).toBe(`123<div>{}</div>`)
})
})
})

Loading…
Cancel
Save