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

Lukas introduces testing in Angular.

Get Unlimited Access Now

Transcript from the "Testing Overview" Lesson

[00:00:02]
>> Lukas Ruebbelke: All right, so we just finished component-driven architecture within this core project. So kind of as an addendum to that, I wanted to take a moment and talk about how to test a component. So in Angular JS, this is actually a little tricky, especially if you wanted to do any kind of dom manipulation.

[00:00:23] You were stuck doing regex and different things. Well, with Angular 2 and above, they introduced some utilities that makes it fairly easy to not only spin up a component, but spin it up in kind of a vacuum or a test environment. And then access properties, access the dom, etc.

[00:00:45] And so I wanted to take just a few moments and walk through what those pieces are and how they worked. If we go to the command line, and we go npm. Well, the first thing you'd wanna do is hop on this and then git pull, which hopefully I am up to date.

[00:01:06] I'd be surprised if I wasn't, and then npm test dashboard.
>> Lukas Ruebbelke: And so we're focusing our test strictly on the dashboard application. And so you notice now that we're having a window pop-up, so this is the Karma test runner, so we testing this in Chrome. Here are our results.

[00:01:28] Very good. And so I'm going to leave this running, and we're going to step into,
>> Lukas Ruebbelke: The ProjectsComponent spec specifically. So we could jump in to any number of these. And I think this one is a pretty good candidate, especially because it's a container component. Now, when you generate a component off of the Angular CLI, it's going to give you a basic spec structure that will work right out of the box.

[00:02:01] So this is super handy. So I believe one of the biggest impediments to writing test is being able to spin up the thing that you wanna test. So your unit under test or your fixture under test is, well, I have these different dependencies and I can't even get the test to run.

[00:02:18] And, I give up. It's like flossing your teeth, everybody thinks and we agree we should floss our teeth. But then it's like, but it's so much work and it doesn't feel very good, so I'm not gonna floss my teeth. And so that's when I think about testing, it's I think everybody agrees we should do it.

[00:02:36] If it was a little easier and a little bit more convenient, and it didn't make my gums bleed every time, I probably would write more test. And so let me see if I can find a generic test in here. Maybe, let's look in the home component spec.
>> Lukas Ruebbelke: Yeah, so when you generate any component, you're going to get this basic structure built out.

[00:03:03] And this will work right out of the gate. So what it's going to do is without any other code, now once you start to write code then you're going to need to keep up to date with this. But this will create your component, and instantiate it so that you can write a test against it.

[00:03:25] And so coming back to the project component spec,
>> Lukas Ruebbelke: What I'm going to do is I'm going to tear down the pieces of this. So I'm just going to rip this out, and I'm going to just save it off. Because I may want this back in case something goes horribly wrong.