Mocking backend responses is extremely simple with angular-mocks.js and the ngMockE2E module. This lesson will show you how to include and use the module, ensuring you can stay productive on the front end even if your back end is broken, slow, or doesn't even exist yet.

Using ngMockE2E to mock backend data

[00:00] In this lesson, we'll see how to use the ngMockE2E service to intercept remote calls and respond with your own data, which can be really useful when your back end is either broken or not ready yet or any number of other use cases.

[00:14] We've got our example here where we've got three buttons that will go and fetch some data from the Star Wars API.

[00:22] If we go ahead and add the angular mocks JavaScript file and then add the ngMockE2E module to our app definition, if we reload this and then try and load one of these, you can see that it's going to error out on this. It's saying that the http back end module expected a request and didn't get it.

[00:44] The first thing that we need to do is actually inject the http back end module which is actually what http uses behind the scenes. When you're using the angular mocks file, you get a mocking version of it.

[00:59] If we inject that, we can then put this definition in here that says http back end, when you get a get request to this URL here, we want you to respond with this data object.

[01:14] You can see here that we're just providing an object with a name property. It's actually the object that you would have in result.data. You're not redoing the entire result object itself.

[01:26] If we then save this and run it, you can see that we then send back our object which is Jean-Luc Picard but no remote call was actually made. If we request any of these other URLs, we're still going to get this error saying that we requested something that it didn't expect.

[01:42] I'm going to simplify this and use this whenGET method. They have shorthand methods that are like whenGET, whenPOST just so you can simplify the arguments there.

[01:56] Now, we're going to look at another way that you can call whenGET which is to pass a regular expression instead of an actual string. Obviously, that gets you some flexibility. What we're going to do here, we're going to do a wildcard regex. This is going to accept everything.

[02:15] When we get to that part, we're going to call passThrough instead of respond. Instead of sending back data, we're going to say, if the request matches our regular expression, just go ahead and pass it through and let it actually make that remote XHR call.

[02:32] If we then come back here, we can see that our other ones do in fact call out to the remote server and bring back the data. Our one that we specifically handled will use our fake data.

[02:48] Now, there's one more way to call these when functions which is to pass a function. That function is going to receive the URL that was requested. Then if you return true, then it will use your respond or your passThrough call.

[03:06] If you return false, it's going to fall through to the next definition. In ours, we're going to take the second last character in the URL, so this number here. We're going to turn it into a number with this plus sign. We're basically just going to say if it's one, respond with Buzz Lightyear.

[03:27] To recap, if the second last character is a one, we're going to respond with Buzz Lightyear. If the request is the specific URL, we're going to respond with Jean-Luc Picard. Everything else is going to get passed through to the real service that we'll call the XHR.

[03:45] If we're going to run this, we can see that the Luke Skywalker button returns Buzz Lightyear and does not make a remote call. The C3PO button returns Jean-Luc Picard and does not make a remote call. The R2D2 button, in fact, does make the remote call and load the real data.

Using ngMockE2E to mock backend data

Share this video with your friends

Free Community Resource