00:00 So the first thing I want to do is head to the extension tab and click on this eye icon to start the extension in the continuous mode, basically in watch mode. This way, Vetus will rerun the tasks while I'm working through the exercise and will show me the live feedback straight in my editor. This includes this list in the extension, as well as this icon indicators in the cutter

00:19 and the testing output over here, test results, this panel will update as well. So if I change something, for example here, I will see that Vetus will rerun my tasks behind the scenes and print me the latest result. Now let's take a look at the failing test. I've got this sort by function that's supposed to sort a list of players by their score, but I'm getting a wrong order back.

00:39 If I click on this indicator here, I will see the switch diff, and the players are not in the right order, so I expect a descending order, score 21, 10, and then 5, but I'm getting an ascending order, 5 with Alan, then 10, and 21 with Sarah. So in this case, it looks like I messed up my expectations, and I can fix this quickly

00:56 by rearranging the player order over here in the to equal matcher, and then hitting save. And immediately once I hit save, you can see that Vetus removed this indicator, and also marked my task as passing, and I can see it passing everywhere now, including the extension, and also the test results over here, next to my terminal.

01:14 Next let's explore what else we can do with the Vetus extension. So let's say I have to debug this sort by function, so I go to its implementation, and I want to see how exactly it compares values in the array. So I can click on this breakpoint icon over here to add an inline breakpoint. This will make JavaScript stop whenever it reaches this line.

01:33 Now I can run my test in debug mode to trigger it. Once again, if I head to the extension tab here, I can click on this icon over here, and it will run tests in debug mode. You can see that Vetus immediately stops on this breakpoint, and I get my usual debugging experience here on the right with a debugger.

01:50 So here I'm comparing apple and banana, which is from the first test over here. So I can click through them, I will step through the comparison as I normally would, and then head to the second test case here, comparing players, and just explore and see whether I can spot any issues. This is really handy, but you might have noticed that because we're testing the same sort by

02:10 function, debugger was triggering for all our tests, for the first test and the second test. And let's say I only want to debug the second one. There's a really neat way for me to do that. So I'll make sure I keep the debugger over here, and then head to the extension, and instead of spawning the debug test run from the root level controls, I can head to the

02:27 test that I'm interested in, for example, the player test, and click on this debug run over here. And this way, I can see that it jumps straight to the second test, and I can spot the comparison between the player scores. That is so nice. And since my tests are running in debug mode now, I can use all the tools I would normally use when debugging JavaScript.

02:47 For example, I can head to the debug console tab over here, and I can print the values live as they're being compared. So for example, left will print me Alan, and right will print me John. And once I go to the next step, now I'm comparing Sarah and Alan, and once again, I can get

03:02 the up-to-date values of those objects, which helps me debug and get to the root cause of any issue. The Vitest extension is extremely powerful, and I recommend you use it while going through the exercises in this workshop.