Show how to pass slots to the component while mounting it

[bahmutov]

Help wanted - I don't know how to set up slots and scoped slots via Vue constructor

https://vuejs.org/v2/guide/components-slots.html

To work on this

clone the repo
install dependencies
in one terminal start watch with npm run build:watch
in another terminal open Cypress with npx cypress open
modify src/index.ts file while working with test https://github.com/bahmutov/cypress-vue-unit-test/blob/bf0ace338c3bec42dd93a9d35ca4511b9e1523f6/cypress/component/basic/small-examples/AppInput.spec.js#L23

[JessicaSachs]

Here you go https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

What you really want is something like this https://jsfiddle.net/Lzeja2rd/110/

[bahmutov]

But how does this translate into the way the component is created right now? Why does Vue have so many different syntaxes

https://github.com/bahmutov/cypress-vue-unit-test/blob/bf0ace338c3bec42dd93a9d35ca4511b9e1523f6/src/index.ts#L435-L445

[bahmutov]

Ok, I will leave it to someone who knows what they are doing, the test assertion to check if the slot is handled correctly is in https://github.com/bahmutov/cypress-vue-unit-test/blob/bf0ace338c3bec42dd93a9d35ca4511b9e1523f6/cypress/component/basic/small-examples/AppInput.spec.js#L23 and it would be nicer to add more tests around them, similar to https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/slots.js

[JessicaSachs]

I show this in my fiddle -- slots don't make sense unless you pass in what you're trying to inject. The current syntax should create a "wrapper" root Vue node (like what I do in my fiddle) and then you should render the Component Under Test as the first child of this Root Vue Node.

This syntax is not intended to be the main usage of the API so that's likely why you find it awkward. It's the lower-level advanced syntax that is used for situations like testing libraries.

I'll fix this for you.

[bahmutov]

That’s kind of big change, no

…

Sent from my iPhone

On Jul 17, 2020, at 23:06, Jessica Sachs ***@***.***> wrote:  I show this in my fiddle -- slots don't make sense unless you pass in what you're trying to inject. The current syntax should create a "wrapper" root Vue node (like what I do in my fiddle) and then you should render the Component Under Test as the first child of this Root Vue Node. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.

[JessicaSachs]

The initial change wasn't a big deal, but I uncovered a lot of bugs with the API and fixed a lot of "hidden" errors we were throwing in the console. Vue Test Utils doesn't let you suppress problematic errors and it bubbles them so you don't accidentally pass a component that won't work in production.

[bahmutov]

🎉 This issue has been resolved in version 3.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀