This course has been updated! We now recommend you take the Angular 13 Fundamentals course.

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

Lukas demonstrates how to link unit tests to templates, and explains that change detection in a testing environment is not automated and needs to be added.

Get Unlimited Access Now

Transcript from the "Template Testing" Lesson

>> Alright, so now what I wanna do is I want to introduce one more piece here that, or an additional piece. And that is Debug Element. So let me go, let DE for DebugElement and we'll import this and from here. Let's go into our second before each block.

[00:00:28] And let's grab this. So what Debug Element does, is it basically gives you like the HTML Element or the angular version of the HTML element under the hood. So you can start to access it. So what you can do now is, first of all, we'll go, we'll pull this down just a second, pull my notes back up.

[00:00:59] And we'll just pull this right off the fixture debug element. There we go. And so now what we can do, is we can use this to query the template of the component. And so let's go and Let's spin this up and see this in action. So we're gonna do this.

[00:01:25] I'm gonna leave this test here and we'll go. It should render the correct title. And within this, we're going to capture the. One thing I need to do is let me actually in our template. Let's create, we're gonna create an h1 tag, and we're going to render the title.

[00:02:05] So now we actually have something to test in our template. All right, so back to our spec. And so we're gonna create a reference to that h1 tag. And how we're gonna do that is using the debug element query. Then within this method call, we can use this by class.

[00:02:28] And so, this essentially allows us to query, the debug elements. So we're saying we want to query it by, in this case, CSS. So these kind of work hand in hand. And so recording by CSS. I kinda like how this actually reads in a very natural fashion. And then we're just going to grab, the h1 tag.

[00:02:56] So what's this is angry about. Make sure I imported this correct, yes. There we go. And Let's try to re-import this. So this is where again, you have to be careful of your imports. Let me see if this didn't give me a hint of where this is coming from.

[00:03:22] Yeah, so we want the one from the platform browser. And that's how that works. All right. So then from here, now that we have a reference to that. We can say expect h1, native element, inner text. To be and let's go ahead and fail this real quick just to show that it is failing or that we have hooked us up.

[00:03:55] Save this. And then let's go into our code and let's look for, The just components so expected This dot, this empty quote to be fail. So, two things are happening. One, we expected it to be hello world and there was nothing. So that's the first part, but it's definitely not fail.

[00:04:34] So let's go ahead and step in and let's iterate on this and get this working. So, title, title, let's just double check. Okay, so now what is going on here? Well, if we go into our spec, you'll notice this fixture.detect changes. So let's put this in here. And let's run this again.

[00:05:02] And then we'll talk about what is happening. So Now you'll see that. Let me just bump this up. It's rendering. But now, it's still not Hello user. So, what happened here? So before it was just an empty string that was like that the binding had never even run.

[00:05:30] And so the template was actually displaying nothing. And the reason for that is. That in the testing environment change detection is not automatic. Because, what the angular team wants to do is give you the ability to have fine grained control of how you step through your application. So when you make a change that you can verify that it hasn't rendered or that some pre step has happened,.

[00:06:03] Then you force the manual change detection. Then you can verify it. And so this is why one, when you make a change or you want to test the template, you need to essentially force the fixture to detect changes so it can update the template. So as a matter of really just convention.

[00:06:26] That you always run that in the before each. So now let me talk about why there are these two before each blocks. So the first one, really the difference here is that it's asynchronous. And so what this does is as you're configuring. You're testing module and if you have a component that has a remote template that you need to give the testing environment an opportunity to make those asynchronous calls and pull those templates in.

[00:07:00] And so this is actually an asynchronous operation. And so this is why it runs this in an async block, and then everything else in a synchronous block. And so it's just to take into account, that you may have external templates that you need to pull in a synchronously.

[00:07:22] So now let's fix this test and let's get a green. And then let's just see one more example of this real quick. Let's go, component, title equals hey there and. And copy this back down. We'll go here. Let's run this again and see what happens. Notice same thing.

[00:08:04] Expected Hello users to be either but it wasn't. So again, just pointing this out twice because if you're testing the template in the component. You could get bit by this particular issue and so, detect changes. And if we run this again, then we're good.