Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:25Length:2.9 hours
  • Overview
  • Transcript

3.2 Verifying GET and POST Functionality With $httpBackend

Welcome back, ladies and gentlemen. In this tutorial series, we're going to improve our series of tests. Now, you'll notice that we have the module and inject function right there above our expectation for our test. This is fine, but what if we wanted to use a module and inject multiple times? Well, we can reuse as much code as we want in each test by using the before each blog. Let's add one in, and pass a function to it. The beforeEach argument is a function. And that function will run before each and every test. Here conveniently, we're going to want our module and inject code at the beginning of everyone of our tests here. So we can copy that into our before each block. Since contactService has no var it will be attached to the global scope where it can be accessed by our assertions. Now, that we have before each running, let's just take a quick look at our tests and make sure they still work. So far so good. Now, that we have module and inject in before each, we can write multiple statements and they'll all have the value inserted. So we've already tested that contact services and array, but let's make a more complex test. We know that our contact service should make a call to an http request when it loads. Can we test this? We can. Let' say it should call the backend and pass a function. Now Angular Mocks in addition to inject and module has brought in a few extra things for us. The most important being the $httpBackend module. This is a special module which modifies the way that angular works. On our back end tests, we're not actually going to make the http requests. The http request will be intercepted by a service called http back end. So let's inject that service into our functions. Remember, that when testing, your http requests will be intercepted, whether you're requiring http backend or not. As long as you use Angular Mocks, the http service, like we're leveraging in our contact service, won't behave quite the same way. Now with httpBackend, you can run assertions in the form of word like expect, or get. When you call httpBackend.flush, it runs all the requests that have been made. And if an unexpected one has been made, it will throw an error. By using $httpBackend.flush(), we can assert that our application is not making any unexpected HTTP requests. So let's have a look at our tests. And we get the expected error. It says there has been an unexpected Get request. When the back end flushed, it saw that request, but we never told the back end to expect it. This is in effect what we want. It's letting us know that hey. You never account anywhere for this get request. Did you even want to do this? If you did want to do it, please let your test know. So let's copy this since we know this the root it's expecting. And we'll paste it into HTTP backend expect get. And we'll paste that URL in. Now, we're expecting and then flushing another error. It says, no response is defined. Well we can't just expect a get, without defining some sort of data to return, even if it's undefined or just a hello world string. So let's update our expect get by chaining respond to it. And respond the first argument will be a status and the second argument, just an empty array something very simple. And we'll save it and refresh and very good. We've now implemented http backend to verify that our http requests are working correctly. We've also learned about before each, which is a very cool and effective module for all our testing purposes.

Back to the top