Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Component Testing Demonstration" 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 walks through a coding demonstration illustrating how to test a component.

Get Unlimited Access Now

Transcript from the "Component Testing Demonstration" Lesson

[00:00:00]
>> Lucas Ruebbelke: So let's just do a real quick test. We'll just kind of see this working. It's actually gonna take just a couple of minutes and then we can move on. And I'll keep talking until our fries get here. Tanner, are they coming? Yeah! [LAUGH]
>> Student: I'm
>> Lucas Ruebbelke: Man.

[00:00:18] You know what, that is amazing when the owner of a multi-billion dollar corporation will go get his fries and he's running no less.
>> Student: He might eat them all though.
>> Lucas Ruebbelke: Yeah, because metabolism. I don't know. All right ironically fries component spec, this is appropriate. So here I'm just going to set title equals crack fries are a thing okay?

[00:00:54] Now if I go into my spec, I'm also going to define a debug element and down here, I'll just go ahead and fixture.debugElement. So I think it kind of depends if I were to adjust this blueprint a little bit. I'd probably would add in the debug element by default but with that said, let's say it should have a title.

[00:01:39]
>> Lucas Ruebbelke: And we expect component.title,
>> Lucas Ruebbelke: To be hello. That's not what I said. What was I thinking? I've got to pick something that I didn't even,
>> Lucas Ruebbelke: All right, luck be a lady. It's gonna run, boom. Good, I feel good about myself. Let me do one thing real quick.

[00:02:24] So I had this in the other component, let me just make this an h1. There we go and we'll just set this to title.
>> Lucas Ruebbelke: All right, back into our spec.
>> Lucas Ruebbelke: It should display title.
>> Lucas Ruebbelke: And we'll go cost h1 =,
>> Lucas Ruebbelke: I think this is right.

[00:03:15] I'm missing by and we expect(h1.nativeElement.el). Was it element or?
>> Lucas Ruebbelke: Cheating a little bit. I didn't want to do this, innerText, okay.
>> Lucas Ruebbelke: Just for the record as well, I will admit that I generally do not make it a point to memorize APIs. Because you have things like, you may not have known this, but you can actually use the angular CLI to pull up documentation.

[00:03:59] So for instance I can go NG help, or there's some command you can say like debug element. It will actually open up the browser for you. What I've done is I actually have it hooked into Alfred. So NG doc. Debugelement, so I don't know how this works. I'm not gonna memorize it.

[00:04:20] You just have it in here. So just a heads up that if you're using Alfred, you can actually set up custom kinda queries to do that. So enter text, toBe and this is going to be the same value here.
>> Lucas Ruebbelke: So now we're actually making sure that it's rendering in the template.

[00:04:45]
>> Lucas Ruebbelke: I hope this works.
>> Lucas Ruebbelke: Yeah. All right, so let's see the detect changes one. So it should update a title.
>> Lucas Ruebbelke: We'll go here, and I'm just going to copy this over.
>> Lucas Ruebbelke: And now let's go,
>> Lucas Ruebbelke: Component.title,
>> Lucas Ruebbelke: I'm going to change this.
>> Lucas Ruebbelke: And now we expect enter text to be with chilli.

[00:05:47] And no, so we can look in here, it's still expecting it to be this. The reason being is because we have not rendered the templates. So you can see here we're calling it fixture.detectchanges(). If we go here, fixture.detectchanges().
>> Lucas Ruebbelke: Boom, so this is, I think a really good kind of intro to how to test the components.

[00:06:25] Fortunately for us the majority of it has been done for us. So, all the set up is here. Like I was able start writing test immediately, which is quit nice.