Skip to content

Commit

Permalink
docs: slots scope being exposed as "params" instead of "props"
Browse files Browse the repository at this point in the history
* docs(migration): slots scope being exposed as "params" instead of "props

* docs(guide): note about slot scope when not wrapped in template tag

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 28, 2022
1 parent 044958d commit 802c7e4
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 3 deletions.
19 changes: 16 additions & 3 deletions docs/guide/advanced/slots.md
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
14 changes: 14 additions & 0 deletions docs/migration/index.md
Expand Up @@ -217,6 +217,20 @@ Vue 3 renamed the `vm.$destroy` to `vm.$unmount`. Vue Test Utils has followed su
Vue 3 united the `slot` and `scoped-slot` syntax under a single syntax, `v-slot`, which you can read about in the [the docs](https://v3.vuejs.org/guide/migration/slots-unification.html#overview). Since `slot` and `scoped-slot` are now merged, the `scopedSlots` mounting option is now deprecated - just use the `slots` mounting option for everything.
### `slots`‘s scope is now exposed as `params`
When using string templates for slot content, if not explicitly defined using a wrapping `<template #slot-name="scopeVar">` tag, slot scope becomes available as a `params` object when the slot is evaluated.
```diff
shallowMount(Component, {
- scopedSlots: {
+ slots: {
- default: '<p>{{props.index}},{{props.text}}</p>'
+ default: '<p>{{params.index}},{{params.text}}</p>'
}
})
````

### `findAll().at()` removed

`findAll()` now returns an array of DOMWrappers.
Expand Down

0 comments on commit 802c7e4

Please sign in to comment.