This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Resolving Dependencies & Mocking" Lesson
[00:00:00]
>> All right, so now let's address these errors. And so I'm going to try to fix these in real time. And let's, and the reason why I want to do this because you're going to run into this I run into this all the time is you start coding and then also this is like I don't know what to do.
[00:00:22] So let's go to the courses component. And it's saying no provider for HTTP client. So if we go into our courses component, Rather, I wanted to do the spec Here. You'll notice that, this trace this out real quick. So, In our courses component, we're pulling into courses service.
[00:01:00] The courses service, has a dependency, on HTTP client. And so now, Angular is trying to spin up this component, that has a dependency on a service, that has a dependency on another service. And so there's a couple ways to fix this. So one way to fix this is to import the HTTP client module.
[00:01:36] And I think this is actually import HTTP client module. And so if I save this, then this should service or make that particular HTTP client that instance available to the test. So now you'll notice here let me just double down, because Yeah, so, since gone now let's look at course details.
[00:02:06] So I can just run through and I can fix some of these problems right away. So this is part of this is just getting your dependencies satisfied. So imports. I believe it's forms module. Let's go to the courses service. I think it was angry there. And if we go into the spec here, that finger testing module, so we're missing this here, not a problem.
[00:02:44] We'll leave this low for just a second. This back here and cannot read property ID of undefined, not a problem. What I really wanted to point out is that we basically that, by satisfying that module, it's now able to render, and it's just simply saying, I don't know what the idea is.
[00:03:06] So there's trying to render it and it's like I don't know what to do with id. But we did satisfy that dependency. And so I'm gonna leave this here for just a moment and Instead of Going into and importing the, I'm gonna do, yes, we'll start here. So in our courses, component specs, let me just close all the others.
[00:03:42] We're injecting this HTTP client module. But really, what I want to do is because for unit tests, you don't want to spend something up and have to actually have to make calls to the remote server that's not the point of that. And so now, what you have is this concept of basically mocks and stubs.
[00:04:15] And so what you can do is you can just create and so I'm going to delete this. Instead of importing this is we know that our courses component relies on, so let me pull this back up. It relies on this courses service. And so what I can do is instead, I can create A stub for this, so I can just go const And we'll go Courses service stub, and generally I'll start with just an empty object.
[00:05:10] And then what you can do is say because we really want to test our component, we don't need to test everything down the road is we'll go here and then within our test module, we're going to say, I want to provide this to this module. But instead of using the real courses, service I want to use value.
[00:05:48] CoursesServiceStub. And so what this does is it's just going to override that and we're going to use a stub. So let's save this and let's see what happens. So if we go back into our testbed. Course services and so that is actually let me refresh this, I may have just broke this.
[00:06:14] Disconnect, there we go. All right, so You'll see here and this is what I wanted to pull out. So this courses component should create but this course services all is not a function perfect. And so now what we'll do is we can come back into here and We'll just add on this object.
[00:06:46] Typically what I'll do is just like a no op function, so it just doesn't do anything. So let's save this again. Go back into our testbed, And if we go down here. It's saying OK, but subscribe is undefined, and so we just need to continue to kind of stub this out.
[00:07:17] Because if we go back into our code here, you'll see that, and of course, this component in the HTTP call itself is it returns essentially, something that you could like an object that you can then subscribe. And so, we'll go back into here and let's just take a step at this.
[00:07:47] So I'm just kind of mocking out, Another no op. There we go. And so when we call all this going to return an object that then you can call subscribe on. All right. And so you can see here, we still have kind of these work like Layton tests, but more importantly, what I wanted to call out is that it's as you start to focus on testing on something in isolation, one of the best ways to do that is using a mock or stub.