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

introduces the debug module as a way to better test code in angular

Get Unlimited Access Now

Transcript from the "Debug Element" Lesson

[00:00:00]
>> Lukas Ruebbelke: All right, let's take this a step further, and I want to introduce debug element and what that does? So, we'll go here, and we'll go it should display primary color.
>> Lukas Ruebbelke: And so what we need to do is, within the component template, we need a way to access the template, query the DOM, and pull whatever we want off of that, and then evaluate it.

[00:00:40]
>> Lukas Ruebbelke: And so specifically what you want is we want this h1 tag. And so if we go over here, we can,
>> Lukas Ruebbelke: Declare an h1 constant, and we can say debug element query and we're going to introduce a new utility that we haven't seen yet called By. And it's not the one by Web driver let me see that's what we want.

[00:01:11] And what this does is this allows us to essentially query the DOM. So we're going to go BY.css and we're looking for h1.
>> Lukas Ruebbelke: And then within this, then we're going to go expect h1 native element text to be red. Well, we'll do green just to make sure that we're catching into the right thing.

[00:01:53]
>> Lukas Ruebbelke: Expect the undefined to be green, well, that is not encouraging. So debug element, query(By.css('hi')). Text, it's actually InnerText, silly me, all right, let's save this again. It's still gonna fail, but for an entirely different reason. Expect red to be green, but notice, we're able to evaluate that by using debug element query.

[00:02:30] And then using BY to say, this is how we want to query it, is with CSS.
>> Lukas Ruebbelke: Back into our code, let's change this to red and we're going to do one more test. And I think we will have a pretty firm grasp on how to test the components, but the main thing here is that by using the test bed in the component fixture is that they have exposed not only the component but the element that the component life in.

[00:03:03] And so it's very easy to say I wanna tested properly, this method, or I want to actually even query the DOM and ensure that when I change this, this happen. So it should update,
>> Lukas Ruebbelke: Title, or it should update to new primaryColor.
>> Lukas Ruebbelke: And I'm going to copy this, paste this in.

[00:03:33] And now what we're going to do, is we're going to go component primaryColor = 'black'.
>> Lukas Ruebbelke: Now if I go here and I set this to black, what do you say is gonna happen? [SOUND] No good.
>> Lukas Ruebbelke: It's still red so we go here and we're going to call fixture.detectChanges.

[00:04:06]
>> Lukas Ruebbelke: We'll save the cell.
>> Lukas Ruebbelke: Boom,
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: And so if we go back into the code, let's just do a quick summary of what's happened. And really I believe that what we're going to see here really removes the barrier to entry to testing your components.

[00:04:34] Because you get this for free and I've only introduced just a couple additional things, mainly the debug element. So, in your projects component, the first thing I do is I create my local test members. As well as any kind of additional things that I may want to reuse across test.

[00:04:54] Within this, the next thing that I do, I instantiate the test bed here. But then what I'll also do is instantiate the fixture.
>> Lukas Ruebbelke: Within this then we can get a component instance or rather the component instance. Then you'll get the debug element aka, the element the component lives on.

[00:05:36] And then we're going to force, or rather,
>> Lukas Ruebbelke: Manually force, is that one l? I think so.
>> Lukas Ruebbelke: Home schoolers, you guys are sharp. [LAUGH] And then because this is in place, you are gonna wanna do this in every before it. So you wanna basically before every test turn on the module, spin it backup, that you can now access properties on your component.

[00:06:16] You can call methods on your component, as well as you can query the component using debug element. So de.query and then using By.css or By and I think there is, let me click on here really quick, so this is one of this and I've been doing this for the last couple days.

[00:06:39] It's like what does this actually, what else is available and so we're using CSS split you can do directive. So there are two more, but typically I'm gonna wanna do a CSS query. Having a jQuery for quiet some time in a previous life, I think most people are comfortable doing just the CSS query on that.

[00:07:05] As well as you can change something on a components then force change detection and then based on the element that you queried then evaluate that value.