Render a Vue 3 Component with <slot /> and Test its Content Properties

Instructor: [0:00] I will now be testing a dropdown component. Interesting thing about this component is that I have a slot over here. Slots are very powerful way of how we can pass contents, template, or even a whole component within our component. [0:15] In my component test, when I want to pass content to a slot, I'll just add another option called slots, and then I can pass a default slot with the text of add new list. This is a default keyword, but if I had some named slots, I would put in the names of those slots in here. For now, the default will do.

[0:40] Let me save my test and as I can see, the content has now rendered inside my slot. I can now write a test where I'm going to assert that the text is actually visible. When I save it, it's going to pass.

[0:58] What if I want to pass a component? In fact, I do have a dropdown item that is supposed to be rendered in this dropdown component. Let me go back to my test and I'll just go ahead and import it. Dropdown item from components common and then dropdown item .vue.

[1:22] What I'll do now is that instead of this text I can just passed the component itself. When I now save my test, I can see that the component is rendered with slightly different styling as we had before. Our test is now failing. The reason for that is that our dropdown item component, which we now insert it as slot, accepts properties.

[1:46] One of those properties is item text, which is going to render the text of the dropdown item. By default, it goes by item text, which is what we can see rendered inside our browser. What we need to do is to pass properties into this dropdown item component. In order to do that, we are going to import an H function from vue.

[2:14] This essentially works as a function that will create an element. I'm going to create a constant that's going to be called dropdown action item. This is going to be a function that will return our H function where the first parameter will be the dropdown item. The second parameter will be an options object, which is going to contain all of the properties. Item text, and that's going to have the value of add a new list.

[2:53] Now, instead of having the drop-down item as a slot, I'm going to parsing the drop-down action item that I created. I'll save my test. I can see that my component is rendered as a slot inside the drop-down component. It would be nice to test more items.

[3:14] For example, in my drop-down item component, I can see that there's also a warning property, which, by default, goes to false, but if it's set up to true, it's going to set this warning class and apply a red text into it. Let's go ahead and test that.

[3:33] I'm going to copy this, but instead of an action item, I'm going to use warning item. The text for this is going to be delete list. I'll also parse the warning property. That's going to be set to true. Now, if I want to parse this component, I can change this default slot into an array and parse it as a second component.

[4:05] When I save it, I can see that both of my components are now rendered. To finish this off, I'm going to write a couple of assertions. Let's go for contains delete, make sure that it's visible. Then, also, I want to make sure that it has a class called warning. Then, finally, I'm going to get both of my items and go drop-down item. Then, make sure that there are two of those.

[4:42] I have length and two. I'll save my test. I can that everything parsing.