在 Protractor / E2E 测试中访问 $http 数据 (AngularJS)

Question

我有很多单元测试进展顺利，并且我已经开始将 Protractor E2E 测试添加到我的项目中。我测试页面上的交互元素没问题，但我无法测试从浏览器发送的某些数据。

例如，我想看看单击某个按钮是否会向某个端点产生 POST。

我使用以下方法设置了量角器：

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

    global.expect = chai.expect;

    chai.use(promised);
}();

我了解如何使用 Protractor 进行交互：

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
    });
});

但是，我不知道如何在 Protractor 中设置 $httpBackend，以便捕获因 .click() 事件而发送的数据。我需要额外的模块吗？

在 Karma/Mocha 我会简单地：

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');
    });
});

但我不知道如何在 Protractor 中获取对 $httpBackend 和 inject 模块的引用。

Answer 1

端到端测试是关于测试代码的方式，类似于最终用户的方式。因此，验证是否发出远程请求应该根据可见结果进行验证，例如数据加载到 div 或网格中。

不过，如果您想验证远程请求是否已发出，您可以使用 ngMockE2E 模块创建一个模拟后端设置，其中包含一个类似于 [=12] 中的模拟 $htpBackend =].

查看 $httpBackend https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend

上的文档

Answer 2

$httpBackend 用于模拟对服务器的虚假调用。在 e2e 测试中，您通常 实际上 调用服务器。重要的是要注意量角器中的大多数元素定位器 return promises。

这意味着使用此代码，您的测试将知道要等到服务器返回响应，然后断言文本是 p 标记是来自服务器的正确数据。

我的-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");
  });


});

我的-file.po.js

'use strict';

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


};

module.exports = new MainPage();

在 Protractor / E2E 测试中访问 $http 数据 (AngularJS)

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

javascript

angularjs

angularjs-e2e

protractor

angular-mock