From 802c7e49c36e0aee42baa1965d2227a9fa8ab61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Wed, 28 Dec 2022 09:56:45 +0000
Subject: [PATCH] docs: slots scope being exposed as "params" instead of
 "props"

* 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.
---
 docs/guide/advanced/slots.md | 19 ++++++++++++++++---
 docs/migration/index.md      | 14 ++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/docs/guide/advanced/slots.md b/docs/guide/advanced/slots.md
index a766a8953..baec29d1e 100644
--- a/docs/guide/advanced/slots.md
+++ b/docs/guide/advanced/slots.md
@@ -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 = {
@@ -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>
       `
     }
@@ -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.
diff --git a/docs/migration/index.md b/docs/migration/index.md
index 5dc47c3a2..656e973cf 100644
--- a/docs/migration/index.md
+++ b/docs/migration/index.md
@@ -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.