How to Mock HTTP Requests in Protractor
Reading Time: 2 minutes
This post is part of a ten-part series on how to write better Protractor tests. You can find the rest of the series here.
Last time we talked about how to add Angular Modules to your Protractor tests. One of the main reasons you’d want to add a module during test time is for HTTP mocking.
Of course, if you can avoid it, you want your Protractor app to test against a real server. The idea is that our tests should be truly end-to-end. But of course, the real world is rarely that simple. You can’t always have your robot Protractor monkeys writing and deleting data in production. So what can we do in that case?
We can mock some or all of our HTTP requests.
Here’s how:
describe('MockingHttp', function() { beforeEach(function() { browser.addMockModule('httpMocker', function() { angular.module('httpMocker', ['ngMockE2E']) .run(function($httpBackend) { $httpBackend.whenGET( 'http://jsonplaceholder.typicode.com/photos') .respond([ { albumId: 1, id: 1, title: "accusamus beatae ad", url: "http://placehold.it/600/92c952", thumbnailUrl: "http://placekitten.com/g/200/300" } ]) }) }) }); |
What we’re doing here is
- using
addMockModuleto add thehttpMockermodule to our Angular app - using
ngMockE2Eto give us the functionality to mock our HTTP requests - using
runand injecting$httpBackend - using
$httpBackend.whenGETto specify that when this particular URL (http://jsonplaceholder.typicode.com/photos) is fetched using aGETrequest, we should instead intercept it andrespondwith an array with this single, specific object.
Pretty neat right?
Pros: We can mock HTTP requests and specifically control for API responses. We don’t have to worry about our tests failing because the API is down or changed.
Cons: Our end-to-end test is not really end-to-end any longer. Maybe the API changed but we wouldn’t know it because we mocked the result. Also, this only intercepts calls made using the $http service. So if you have a library that is using another HTTP library, it won’t be intercepted using this method.
Learn Protractor in a few hours with our online course
Protractor is a one of the best ways to ensure your app is working correctly because you can write code that acts like a real user. But Protractor can also be confusing and difficult to work with when you're just starting out. We've put together an online course that will help you become a master at Protractor.
You'll save tons of time and frustration learning Protractor because we've worked out everything you need to know. Become a Protractor testing master today!
