Skip to content

Commit

Permalink
docs(guide): note about slot scope when not wrapped in template tag
Browse files Browse the repository at this point in the history
https://github.com/vuejs/test-utils/blob/39d86ad5abe71bac8d76c5b82f11f30225cf8673/src/utils/compileSlots.ts#L10

The only example provided used an explicit #default="params", but it doesn't mention that if you don't explicitly wrap it, the slot scope becomes also available as params. In VTU1, they were exposed as props, so i think it's better to be explicit about it.
  • Loading branch information
renatodeleao committed Dec 27, 2022
1 parent 97a87e2 commit dfce58e
Showing 1 changed file with 16 additions and 3 deletions.
19 changes: 16 additions & 3 deletions docs/guide/advanced/slots.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ test('layout full page layout', () => {

## Scoped Slots

[Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) and bindings are also supported.
[Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) and bindings are also supported.

```js
const ComponentWithSlots = {
Expand All @@ -158,8 +158,8 @@ const ComponentWithSlots = {
test('scoped slots', () => {
const wrapper = mount(ComponentWithSlots, {
slots: {
scoped: `<template #scoped="params">
Hello {{ params.msg }}
scoped: `<template #scoped="scope">
Hello {{ scope.msg }}
</template>
`
}
Expand All @@ -169,6 +169,19 @@ test('scoped slots', () => {
})
```

When using string templates for slot content, **if not explicitly defined using a wrapping `<template #scoped="scopeVar">` tag**, slot scope becomes available as a `params` object when the slot is evaluated.

```js
test('scoped slots', () => {
const wrapper = mount(ComponentWithSlots, {
slots: {
scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
}
})

expect(wrapper.html()).toContain('Hello world')
})

## Conclusion

- Use the `slots` mounting option to test components using `<slot>` are rendering content correctly.
Expand Down

0 comments on commit dfce58e

Please sign in to comment.