Testing Project Exercise

[00:00:00]
>> Component testing, like I said, seeks to hit that sweet spot of fast unit test, but from a user perspective, what you actually care about, right? And yeah, you can argue it either hits that happy medium or does neither particularly well. I think, yeah, that's kind of how it works and both are true.

[00:00:27]
And that's why it is one part of your testing portfolio, your testing toolkit, if you will. So we're going to kinda jump in just into another example that has a few more things kinda going on. We have another example in source examples packing list and this is kinda one to-do list is been overdone in terms of demo apps.

[00:00:53]
What about two lists and things moving back and forth between them. So there's a way to kind of move some stuff around and figure some things out. I alluded to this earlier, so I will kinda call it out now that second bullet with the button being disabled and enabled more actually really a third, but the enabling of the button.

[00:01:20]
In my experience at the time of this recording, wasn't correctly working with Happy DOM and was working with JSDOM. So if you've kind of I have JSDOM as the default, but if you at some point change that just because, and you find it not working, just make sure using JSDOM and everything should be good.

[00:01:42]
The next part is both are available in most situations so you can use whichever one and kind of choose along those lines as well. But yeah, basically we've got this list. I'll kinda show it to you real quick so we can kinda get a sense of what we're looking at.

[00:02:00]
And this is true for everything in this case. We can go in enterprise ui development, and we do an NPM start. If we go here, you can see basically all of the little demo apps are simultaneously together. So if you look, this is the app right here, where we can have some things like I should bring my phone.

[00:02:29]
You can see the button kind of enable, and then we can edit it, and we can save it, and we can mark it and it goes to the packed items and we can mark everything as unpacked and everything moves back over that first one. If we had two things, you can see it a little bit better.

[00:02:45]
iPhone charger, that's important. We can move them, we can unpack everything, we can add new stuff, we can remove things from the list, right? So this case, this is the little sample app that we're playing around with, but at the same time this could just be a component in your larger application as well.

[00:03:05]
And so what we wanna do is in the kind of exercise itself, I have just a few initial things that we might try to do to just kind of get the hang of some component testing that's more than just a single click. We're now checking to see if things are enabled or disabled.

[00:03:20]
Give you a hint there's a match over there for that. And kind of a few more nuances of like better simulate a few more of the interactions that you may have that kind of barring network requests kinda get us more towards the full picture of render a component into the DOM, but not really the DOM, the fake DOM that's a lot faster in a not browser.

[00:03:41]
Kind of manipulating it verifying that things are where they should be and getting a sense of that. So when you spend about probably 10 minutes to just get familiar and comfortable and then we will do it together and then talk about anything that came up or any questions that you have around that.