Code Coverage with Istanbul

[00:00:00]
>> Brian Holt: One thing to keep in mind here, see that it has some of these labeled browser, these ones are ones that actually occur in the browser and the happy DOM ones. You can run those, but it's actually not occurring in the browser. It's still occurring in node, and it's just reporting on stuff that's coming out of it.

[00:00:15]
Someone asked earlier about coverage, which is a good point. I don't have those in my notes, but I'm like, Yolo let's check. I think this should work. We can just say in here as well the same coverage stuff we said. So coverage, text, json, and html, I think, are the three, right?

[00:00:36]
I'm gonna put those in both.
>> Brian Holt: And we should get the test coverage information out of this as well.
>> Brian Holt: Just run rerun all.
>> Brian Holt: So I don't think the test cover stuff necessarily shows up in here. Yeah, look, we have our checkout here as well. It's kind of cool,
>> Brian Holt: But in our browser as well, we can still run our npm run coverage, and it should still work.

[00:01:10]
That was my API. Npm run start there we go, and here, npm run coverage should still work.
>> Brian Holt: It might not work with the browser stuff still yeah so this is kind of the vitest coverage does not work with Playwright. So you have to use Istanbul for this one or just ignore it on your browser tests.

[00:01:43]
>> Brian Holt: It's just gonna be mad at me all the time for it. That's annoying. Okay, so it looks like if we wanted to, we would have to switch to Istanbul totally to keep our coverage stuff up as well. So not that that's very hard to,
>> Brian Holt: I mean, in for a penny, in for a pound, right?

[00:02:10]
>> Brian Holt: vitest coverage,
>> Brian Holt: v8, so we'll uninstall that one,
>> Brian Holt: And istanbul.
>> Brian Holt: All right, now Yolo, see what happens.
>> Brian Holt: And you have to switch to coverage, or this sub requires chromium as well, which is kind of fun. We'll set this to chromium anyway cuz it'll start up chromium instead of Firefox.

[00:03:01]
And then coverage provider, this has to be, yeah, that's right, coverage provider,
>> Brian Holt: Istanbul.
>> Brian Holt: And, reporter, is that what it is? And this has to be text json html. And we'll do the exact same thing over here.
>> Brian Holt: And try one more time.
>> Brian Holt: Sure.
>> Brian Holt: So I guess you need both of them to do.

[00:03:50]
So run it again.
>> Brian Holt: There we go. Now we're getting full coverage and all of our tests are working. And it just required like nine dependencies, God bless node. But one cool thing, notice that this is no longer a nightly, this is on Chromium, which is pretty cool, right?

[00:04:10]
And same thing, I think it's pretty easy for us to just go ahead and throw, so you can see all my cover stuff is coming out okay as well.. So I think this does limit us now to be in Chromium world, but I think if you wanted to, you can say webkid, and this will pop up.

[00:04:34]
It should pop up. Yeah, it's gonna complain about coverage now, but if we didn't have all the cover stuff in here, it would pop up Safari, right? You could run all of your tests in Safari as well, right?
>> Brian Holt: Right, so we'll leave it on Chromium and Istanbul, since we want everything to work together.

[00:04:55]
So I wanted to say one more thing here. There's a bit more complicated browser test case. If you want to go check it out here, it goes over things like test ID and stuff like that. We're gonna go ahead and just keep going here. But if you want to play around with another test example, this is what you would look at.

[00:05:11]
It tests the header in the browser, which is kind of cool. So feel free to have a look at that if you're interested. And you can also just go ahead and download 14-testing because that is all the testing that we're gonna talk about.