在角度 e2e 测试中模拟 $httpBackend [英] mock $httpBackend in angular e2e tests
问题描述
有人知道如何在角度 e2e 测试中模拟 $httpBackend 吗?这个想法是在 travis-ci 上运行测试时存根 XHR 请求.我正在使用 karma 来代理我在 travis 上运行的 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();
}));
我尝试通过$injector接收$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,这里是代码示例:
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
的 E2E 应用程序,我将 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([...]);
});
然后,我在我的 Jenkins CI 服务器中迈出了第一步,将 studentsApp
替换为 studentsAppDev
并添加对 angular-mocks.js 的引用
code> 在主 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.
这篇关于在角度 e2e 测试中模拟 $httpBackend的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!