Angular 9 Fundamentals

Angular 9 Fundamentals Spying & Component Testing


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 "Spying & Component 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 set up spies on methods that run when events happen in an application, and explains how to test components.

Get Unlimited Access Now

Transcript from the "Spying & Component Testing" Lesson

>> Now the second piece to this is and this is kind of the last piece I want to talk about in terms of component testing fundamentals is, in courses component how do you test delete course? Like how do you know that delete course is doing what it's supposed to do?

[00:00:24] Well, you don't need to test the service because that's not part of the unit under test. In order for you to say in a vacuum this function works, I will know that this function works because when I call this, it calls this course services delete with this course ID.

[00:00:48] And so for this, what we use is a spy. So I use mocks in spies all the time for testing. So a lot of times especially when you have really fine grained component functions is that you're not testing the logic. In fact in here, there's not very much logic.

[00:01:07] It's set, maybe this piece right here. And so what you could do is then say if I pass in this course depending on the ID, it's either going to call this or this and that's what you could validate. But let's go with just delete course. So let's go back into our code here and what we want to do is we want to spy on or rather we want to validate it should call, Let's say, Course.

[00:01:49] We'll do this on On delete, and so essentially when we call delete, it should call courses service delete. And so that's what we want to validate. So, within this, we're going to go. And Within this block, we're going to essentially spy on the service, make sure that that method was called with the correct parameter.

[00:02:34] But in order to do that, the first thing that we need to do is we need to create a reference to the service that we can call and so I'm just going to go courses service and I'm going to type this to courses service cuz we're basically faking it, all right.

[00:02:55] And so now, when we go into our synchronous before each block, we can also get a reference to the service using debug element injector. I also need to create a debug element. I did that in the other component, I didn't do it here. So debug element, there we go.

[00:03:22] And then we'll go here debug element equals fixture. Debug element and so now I should be able to grab this injector that get and we want to get of course our courses service which There we go. All right, so using the debug element, we're able to call the injector and then we're able to get that service so that we can reference it in our test down here.

[00:04:10] So as we're in the homestretch, we're going to go and we will spy on this. So let's go spy on and we're going to spy on our courses service. And we're going to call spy on actually the delete method and what we want to do is when you spy you can do a couple different things.

[00:04:42] You can just say stop, we can allow it to call through, you can return and so I recommend checking the documentation for that. But in this case, we're just going to say call through. And so notice here that it's saying, well, this doesn't well. I actually wrote the stub in here, so let's go here.

[00:05:07] There we go. Of course the service delete and call through. Now what I want to do is we're going to go component, delete, and let's just pass in one, On delete course. So when we pass this in, we're sending in a course ID and here we go, and we expect service delete to have been called with one.

[00:05:50] All right, and but let's go ahead and change this to 100. So we'll run it green and then we'll make it work. So save, let's go back in here. Now notice spy on delete method does not exist. So we'll go here, just run up here real quick and I'll just copy this, we'll stub this out as well and we'll call this delete because what we're doing is we're using the service set.

[00:06:29] So if you're just spying, then Well if you're just spying then, you can just inject it because you're just spying and overriding it. But in this case we're doing the stub and then we're layering it with a spy. So we'll go here, and I always run these out of order.

[00:06:53] So here expected spy delete to have been called with 100 when the call was actually one. So we just go back down and let's fix this. So we'll just set this to one. Let's save this and provided this passes then I think we can just summarize this and wrap this up.

[00:07:15] So, there we go. All right, a few dangling tests, I wouldn't worry about that. The main thing is just to review that when you are testing a component that you have a testbed that essentially creates the environment for you to run your test. Which means essentially you are creating a very specific module for this component to run in.

[00:07:44] Then you from the testbed can get a test fixture, which is an instance that creates an instance of that component and returns it in a fixture which allows you to for instance, get a debug element and a component instance. as well as off of the debug element, you can then query the component Dom as you see here that in I think I did that in the users components.

[00:08:17] Let me just jump in there real quick so we can see that piece. Here, there we go. So debug element query and then by CSS which is just another convenience method, and then you can run tests on that as well, make sure not to forget to run detect changes if you need to update the template to validate it, back to our courses component spec.

[00:08:45] Is that you can also use debug element injector to get a reference or an instance of a service that you can then spy on. You can also override a service or a dependency which I recommend by marking out a stub and approximating or writing just the amount of functionality that you need.

[00:09:09] This is nice if you have a service with let's say 20 methods, but your component is using let's say two, well you just have to mock those methods out so you can stub out just what you're using. So you saw as we were running this, that I didn't have to stub delete until I actually called it in my last test.

[00:09:31] And so creating a stub and then using this kind of longhand provides syntax. You can override it. So it's provide whatever you wanna provide, then use value and then you are essentially feeding the injector, this is what I wanna use in its place. And so then from there because I wanna spy on the method, then you can call the method that encompasses it and then you can come back and say I expected this method to open called with this.

[00:10:03] And so this I believe is I would say, outside of some edge cases, at least 80% of the test that I write in components. So testbed, test fixture, debug element, mocks, stubs, and spies is going to get you a long ways down the road. So thank you for joining me on this module, this completes component testing fundamentals.