在角端到端测试模拟$ httpBackend [英] mock $httpBackend in angular e2e tests

问题描述

有没有人有一个想法如何嘲笑$ httpBackend在角端到端测试？
这个想法是存根在运行上特拉维斯慈测试XHR请求。
我使用的业力代理的资产和谐音从特拉维斯运行我的Rails应用程序。
我想要做的验收测试没有实际的数据库查询。

Does anyone have an idea how to mock $httpBackend in angular e2e tests? The idea is stubbing XHR requests while running tests on travis-ci. I'm using karma to proxy assets and partials from my rails app running on travis. I want to do acceptance testing without real DB queries.

下面是我的人缘配置文件的一部分：

Here is part of my karma config file:

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

下面是我的规格文件的一部分：

Here is part of my spec file:

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

我试图获得$ httpBackend到$喷油器服务：

I have tried to receive $httpBackend service through $injector:

$injector.get('$httpBackend')

但是，这不是一个用于内部的iframe在我的测试运行之一。

But this is not the one that is used inside iframe where my tests run.

第二天我尝试用angular.scenario.dsl制成，这里是code samle：

The next try I made was using angular.scenario.dsl, here is code 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', inject(function($rootScope, $injector){
  mockHttpGet('<path>', { /* fake data */ });
  input('search.name').enter('mow');
  pause();
}));

这将导致以下错误：

<$httpBackend listing>  has no method 'expectGET'

所以，在这一点上我没有下一步的想法。有任何人试图做这样的事情，就是这种类型的存根真的有可能吗？

So, at this point I have no idea of next step. Have anyone tried doing something like this, is this type of stubbing really possible?

推荐答案

如果你真的想要模拟出一个端到端测试后端（此类测试称为场景，而规格用于单元测试），那么这是什么我在做一个项目，我前面工作。

If you are really trying to mock out the backend in a E2E test (these tests are called Scenarios, while Specs are used for unit testing) then this is what I did in a project I was working on earlier.

我是测试被称为应用程序 studentsApp 。它是通过查询一个REST API搜索学生的应用程序。我想没有实际查询该API来测试应用程序。

The application I was testing was called studentsApp. It was an application to search for students by querying a REST api. I wanted to test the application without actually querying that api.

我创建了一个名为一个端到端的应用程序 studentsAppDev 我注入 studentsApp 和 ngMockE2E 成。在那里，我定义什么调用mockBackend应该期望和返回的数据。以下是我的 studentsAppDev 文件的例子：

I created a E2E application called studentsAppDev that I inject studentsApp and ngMockE2E into. There I define what calls the mockBackend should expect and what data to return. The following is an example of my studentsAppDev file:

"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([...]);
});

然后，我在我的詹金斯CI服务器的第一步，以取代 studentsApp 与 studentsAppDev 并添加参照角mocks.js 主index.html文件。

Then, I have a first step in my Jenkins CI server to replace the studentsApp with studentsAppDev and add a reference to angular-mocks.js in the main index.html file.

这篇关于在角端到端测试模拟$ httpBackend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！