Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Testing with Karma" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas introduces how to set up and use Karma, a test runner used to execute Angular unit tests.

Get Unlimited Access Now

Transcript from the "Testing with Karma" Lesson

[00:00:00]
>> Lukas Ruebbelke: Let me step through this slide real quick and a couple of slides. And, we’ll actually kind of see this in action. Fortunately, a lot of what I’m going to tell you, to see it light generates for us. And, so I had a live template that I use to use because I’m doing this stuff over and over.

[00:00:15] So, I just created this hotkey in WebStorm. Well now the CLI just generates kind of that exact thing so that's what I use so it's gonna make things a lot easier as I go through this. So, karma is the test runner, it's installed by default and configured, when you create a project, occasionally, you will need to step in and adjust something.

[00:00:40] And that's in the karma.conf.js file. And kind of the default pattern, as we've seen, is that specs or tests are identified with this .spec.ts structure. So if you have that naming convention on your file, then that is what it's gonna pick it up and it's automatically gonna run it.

[00:01:02] When Karma runs, it's just gonna say look for anything that matches this convention and I'm willing to try to run it because we're presuming test are in here. And so from here, MPM test, and it does its thing and then hopefully at the bottom it is Green all the way.

[00:01:22] So this is almost like I would say Pavlovian, in a way. So if you know Pavlov's dogs, you start to get kind of, I feel like there's a dopamine release when I go green. It's pretty nice. Also Karma will run the test in a natural browser instance and so what you see is when you run this, it will do this in a moment, you're actually gonna see a browser window pop up, and stuff is going to happen, what this allows us to do is once you see the output but more importantly is that we can step through the test in the browser.

[00:02:00] And so when this window pops up you can hit debug and actually set break points and walk through the test in the Chrome developer console, if that's what you're using. So, I'm just assuming Chrome, kind of as just the default, but you can actually set different browser targets.

[00:02:17] So we're using Chrome but you can say I need to do it on Firefox. I need to see that it runs in whatever. You can even use selenium to actually run a headless browser or different things. So, let's say you're running things on this automated ci server, well, it doesn’t actually even have to run in a browser instance.

[00:02:34] It can actually run in like a headless browser in memory. So this is a really handy way for stepping through and saying what’s actually happening in my text. And so let’s go and you kinda got a really simple test here. I'm gonna just skip these for a second, and I'll just walk through what this actually looks like.

[00:03:10]
>> Lukas Ruebbelke: I think I'll do this from M P M G C. Think about those fries, so we'll go with the fries component. And I actually in this case, I don't care if it gets added but. Just muscle memory by now. What? That's not npm, c
>> Lukas Ruebbelke: All right, from here, I'm gonna step in and you're gonna see a fully working spec.

[00:03:54] Let's not worry about that right now, what I'm going to do is for now, let's see here, I know this is bigger but, I don't think there is really any advantage of running this in the terminal so I'm just gonna do it from here. Npm test. So we're just gonna let this run.

[00:04:22]
>> Lukas Ruebbelke: And so you should notice that over here, this is this karma window that I was talking about, so it's just gonna kick up an instance of chrome. And It's going to kinda do its thing. So it's building it up. We’ll let it just look in here. So you actually even saw some of the components flying by, which is kind of interesting, but it's all green.

[00:04:49] So from here we can fully debug and it will actually run it again and you can step through, in the dev tools. So this is really handy, being able to step through your test in real time as they're running.
>> Lukas Ruebbelke: So just a simple test is we have it, and so this is just a way to segment it, so this is we're saying this is a test, and we'll say it(should be true).

[00:05:15] And then from here, we'll just say we expect false to be truthy.
>> Lukas Ruebbelke: And hopefully,
>> Lukas Ruebbelke: This is going to fail.
>> Lukas Ruebbelke: Yeah. Here you can say, just bump this up. Expected false to be truthy. Clearly, duh.
>> Lukas Ruebbelke: That's not going to work, so true this is actually watching the files and as you start to just work.

[00:06:01] Sometimes what I'll do is I'll just let this run, maybe in another window or another two monitors. And as you just kind of can see as you're coding of I just broke something.
>> Lukas Ruebbelke: So this is a very, very simple test. Now, we're just simply saying. And so this is Jasmine right here, some descriptive name, and then we do our search.