diplosaurus diplosaurus - 10 months ago 80
AngularJS Question

Accessing $http data in Protractor / E2E tests (AngularJS)

I have a bunch of Unit tests that are going well, and I've started to add Protractor E2E tests to my project. I'm doing okay testing interactive elements on the page, but I'm having trouble testing for certain data being sent out of the browser.

For instance, I want to see if clicking a certain button produces a

to a certain endpoint.

I have protractor set up using the following:

/*globals global*/
module.exports = function() {
'use strict';
var chai = require('chai')
, promised = require('chai-as-promised');

global.expect = chai.expect;


I understand how to use Protractor to interact:

it('send data to the "log" endpoint when clicked', function() {
var repeater = element.all(by.repeater('finding in data.items'));

repeater.get(0).click().then(function() {
// $http expectation

However, I don't know how to set up
in Protractor so I can capture the data that gets sent as a result of the
event. Do I need an additional module?

In Karma/Mocha I would simply:


describe('logging service', function() {
var $httpPostSpy, LoggingService;

beforeEach(inject(function(_logging_, $http, $httpBackend) {
$httpPostSpy = sinon.spy($http, 'post');
LoggingService = _logging_;
backend = $httpBackend;
backend.when('POST', '/api/log').respond(200);

it('should send data to $http.post', function() [
LoggingService.sendLog({ message: 'logged!'});

But I don't know how to get a reference to
modules in Protractor.


End to end testing is about testing the code is manner that is similar to how an end user will do. So verifying whether a remote request is made should be validated against a visible outcome, such as data getting loaded into a div or grid.

Still if you want to validate remote requests are made, you can create a mock back end setup using the ngMockE2E module, which contains a mock $htpBackend similar to the one in ngMock.

Look at the documentation on the $httpBackend https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend