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

Question

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 POST 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;

    chai.use(promised);
}();

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 $httpBackend in Protractor so I can capture the data that gets sent as a result of the .click() event. Do I need an additional module?

In Karma/Mocha I would simply:

beforeEach(module('exampleApp'));

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!'});
        backend.flush();
        expect($httpPostSpy.args[0][1]).to.have.property('message');
    });
});

But I don't know how to get a reference to $httpBackend and inject modules in Protractor.

Answer 1

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

Answer 2

$httpBackend is for mocking a fake call to the server. In e2e test you normally do want to actually make a call to the server. It's important to note that most element locators in protractor return promises .

That means with this code your test will know to wait until the response from the server comes back and then assert that the text is the p tag is the correct data from the server.

my-file.spec.js

    'use strict';

describe('The main view', function () {
  var page;

  beforeEach(function () {
    browser.get('/index.html');
    page = require('./main.po');
  });

  it('should have resultText defined', function () {
      expect(page.resultText).toBeDefined()
  })


  it('should display some text', function() {
    expect(page.resultText.getText()
      .then())
      .toEqual("data-that-should-be-returned");
  });


});

my-file.po.js

'use strict';

var MainPage = function() {
  this.resultText = element(by.css('.result-text'));


};

module.exports = new MainPage();