angularjs – 在角度e2e测试中模拟$httpBackend

发布时间：2020-12-17 07:28:26 所属栏目：安全来源：网络整理

导读：有没有人知道如何在角度e2e测试中模拟$httpBackend？这个想法是在travis-ci上运行测试时存根XHR请求. 我正在使用业力来代理我在travis上运行的rails应用程序中的资产和部分资源. 我想在没有真正的DB查询的情况下进行验收测试. 这是我的业力配置文件的一部分

有没有人知道如何在角度e2e测试中模拟$httpBackend？
这个想法是在travis-ci上运行测试时存根XHR请求.
我正在使用业力来代理我在travis上运行的rails应用程序中的资产和部分资源.
我想在没有真正的DB查询的情况下进行验收测试.

这是我的业力配置文件的一部分：

...
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/'
};
...

这是我的spec文件的一部分：

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,这里是代码samle：

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',$injector){
  mockHttpGet('<path>',{ /* fake data */ });
  input('search.name').enter('mow');
  pause();
}));

这会导致以下错误：

<$httpBackend listing>  has no method 'expectGET'

所以,在这一点上我不知道下一步.有没有人试过做这样的事情,这种类型的存根真的可能吗？

如果你真的想在E2E测试中模拟后端(这些测试被称为场景,而Specs用于单元测试)那么这就是我在之前工作的项目中所做的.

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

我创建了一个名为studentsAppDev的E2E应用程序,我将studentApp和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服务器中第一步用studentAppDev替换studentsApp,并在主index.html文件中添加对angular-mocks.js的引用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!