Epic Workshop Test Tab Demo

00:00 The test tab of the Epic Workshop app is Epic. This is going to guide you to make sure that you don't make mistakes with the previous things that you've done so far and also make sure that you accomplish the task that the exercise is all about. So once the test is passing, you should feel pretty confident that you got it right. So we can take a look at this memory leak test and we're seeing the objective here is that the memory usage does not increase linearly when toggling the show form, but the memory is increasing by 251% in this test case. So let's go ahead and fix that.

00:35 We'll come over here, grab that function handlePopState, and handlePopState will be right there. And then we'll return a removeEventListener, and that should fix our memory leak. So now we can actually watch the test be performed and boom, we've got it green. Let's take a look at the other ones and yep, those are green too. If we were to make some sort of mistake in our application like forget to have an on change here on the input, and we can save, and our tests get rerun, and boom, I broke a couple other tests.

01:09 So now I know that I've made some sort of mistake somewhere else. So the tests are going to guide you. And these ones run right in the browser and it's super awesome. But sometimes you need to have like a full testing framework because this is a full stack app that we're building or whatever, it involves a server of some kind. And so we also have that kind of test where here we've got this module resolution exercise for client components in our React Server Components workshop.

01:38 And if I hit play here, this is going to run our server, and it's going to give us the output from that server. We're going to see we've got some Chromium base test using Playwright and we're going to come through here and see oh this was the error that we had and then I'm going to follow the instructions in here to fix the problem. So here let's add a module base URL and that's going to be our window location origin UI. Okay, good. And then in our app side we're going to make a module base path and we're going to pass that as the module base path to render to pipeable stream.

02:17 So let's pass that just like this. Save that, and now let's run the test again with that change in place. And hopefully it's working this time. And we'll get the output just as if we were running it locally, and you can actually still run it locally if you want to. Looks like this is still busted, and we can continue to work on that and figure out what the problem is.

02:40 I probably missed a step. But hopefully you get the idea that we have this really awesome capability of determining where are we at in the current exercise and when you're finished you're like am I sure I'm finished maybe you know I don't know let's run the test and if they're green then yeah you're finished so that is the test tab in the Epic Workshop app, it's pretty awesome.