angularjs - 在 Angular e2e 测试中模拟 $httpBackend

Question

有谁知道如何在 Angular e2e 测试中模拟 $httpBackend ？
这个想法是在 travis-ci 上运行测试时 stub XHR 请求。
我正在使用 karma 来代理我在 travis 上运行的 rails 应用程序的 Assets 和部分。
我想在没有真正数据库查询的情况下进行验收测试。

这是我的 karma 配置文件的一部分:

...
files = [
  MOCHA,
  MOCHA_ADAPTER,

  'spec/javascripts/support/angular-scenario.js',
  ANGULAR_SCENARIO_ADAPTER,

  'spec/javascripts/support/angular-mocks.js',
  'spec/javascripts/e2e/**/*_spec.*'
];
...

proxies = {
  '/app': 'http://localhost:3000/',
  '/assets': 'http://localhost:3000/assets/'
};
...

这是我的规范文件的一部分:

beforeEach(inject(function($injector){
  browser().navigateTo('/app');
}));

it('should do smth', inject(function($rootScope, $injector){
  input('<model name>').enter('smth');
  //this is the point where I want to stub real http query
  pause();
}));

我尝试通过 $injector 接收 $httpBackend 服务:

$injector.get('$httpBackend')

但这不是在我的测试运行的 iframe 中使用的那个。

我的下一次尝试是使用 angular.scenario.dsl，这里是代码示例:

angular.scenario.dsl('mockHttpGet', function(){
  return function(path, fakeResponse){
    return this.addFutureAction("Mocking response", function($window, $document, done) {
      // I have access to window and document instances 
      // from iframe where my tests run here
      var $httpBackend =  $document.injector().get(['$httpBackend']);
      $httpBackend.expectGET(path).respond(fakeResponse)
      done(null);
    });
  };
});

使用示例:

it('should do smth', inject(function($rootScope, $injector){
  mockHttpGet('<path>', { /* fake data */ });
  input('search.name').enter('mow');
  pause();
}));

这会导致以下错误:

<$httpBackend listing>  has no method 'expectGET'

所以，在这一点上，我不知道下一步。有没有人尝试过这样做，这种类型的 stub 真的可能吗？

Answer 1

如果您真的想在 E2E 测试中模拟后端(这些测试称为场景，而规范用于单元测试)，那么这就是我在之前的项目中所做的。

我正在测试的应用程序名为 studentsApp .这是一个通过查询 REST api 来搜索学生的应用程序。我想在不实际查询该 api 的情况下测试应用程序。

我创建了一个名为 studentsAppDev 的 E2E 应用程序我注入(inject)的 studentsApp和 ngMockE2E进入。在那里，我定义了 mockBackend 应该期待什么调用以及返回什么数据。以下是我的 studentsAppDev 的示例文件:

"use strict";

// This application is to mock out the backend. 
var studentsAppDev = angular.module('studentsAppDev', ['studentsApp', 'ngMockE2E']);
studentsAppDev.run(function ($httpBackend) {

    // Allow all calls not to the API to pass through normally
    $httpBackend.whenGET('students/index.html').passThrough();

    var baseApiUrl = 'http://localhost:19357/api/v1/';
    var axelStudent = {
        Education: [{...}],
        Person: {...}
    };
    var femaleStudent = {
        Education: [{...}],
        Person: {...}
    };
    $httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&')
        .respond([axelStudent, femaleStudent]);
    $httpBackend.whenGET(baseApiUrl + 'students/?searchString=axel&')    
        .respond([axelStudent, femaleStudent]);
    $httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=1&')
        .respond([axelStudent]);
    $httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=2&')
        .respond([femaleStudent]);
    $httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=3&')    
        .respond([]);

    ...

    $httpBackend.whenGET(baseApiUrl + 'departments/?teachingOnly=true')
        .respond([...]);
    $httpBackend.whenGET(baseApiUrl + 'majors?organization=RU').respond([...]);
});

然后，我在我的 Jenkins CI 服务器中有第一步来替换 studentsApp与 studentsAppDev并添加对 angular-mocks.js 的引用在主 index.html 文件中。