Angular.js e2e测试对外部服务的HTTP请求
Angular.js e2e测试对外部服务的HTTP请求
提问于 2013-02-01 13:16:04
我正在尝试对e2e场景中的指令进行一些基本的测试。代码运行得很好，我可以将新元素呈现给浏览器。下面是我使用的代码。
这里是指令代码。
'use strict';
var directives = angular.module('lelylan.directives', [])
directives.directive('device', ['Device', function(Device) {
var definition = {
restrict: 'E',
replace: true,
templateUrl: 'js/templates/device.html',
scope: { id: '@' }
};
definition.link = function postLink(scope, element, attrs) {
scope.$watch('id', function(value){
var device = Device.get({ id: scope.id }, function() {
scope.device = device;
});
});
};
return definition
}]);这里是设备服务代码。
// Service Device
'use strict';
angular.module('lelylan.services', ['ngResource']).
factory('Device', ['$resource', '$http', function($resource, $http) {
var token = 'df39d56eaa83cf94ef546cebdfb31241327e62f8712ddc4fad0297e8de746f62';
$http.defaults.headers.common["Authorization"] = 'Bearer ' + token;
var resource = $resource(
'http://localhost:port/devices/:id',
{ port: ':3001', id: '@id' },
{ update: { method: 'PUT' } }
);
return resource;
}]);下面是应用程序代码。
'use strict';
angular.module('lelylan', ['lelylan.services', 'lelylan.directives'])这里是index.html。
<!doctype html>
<html lang="en" ng-app="lelylan">
<head>
<meta charset="utf-8">
<title>Lelylan Components</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<device id="50c61ff1d033a9b610000001"></device>
<!-- In production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</body>
</html>在阅读了Angular documentation并尝试了不同的解决方案后，我提出了以下测试，其中我尝试模拟我的后端请求。问题是请求仍然命中真正的服务。看起来我无法拦截这些请求。
// e2e test
'use strict';
describe('directives', function() {
var resource = { id: '1', uri: 'http://localhost:3001/devices/1' };
var myAppDev = angular.module('myAppDev', ['lelylan', 'ngMockE2E']);
myAppDev.run(function($httpBackend) {
$httpBackend.when('GET', 'http://localhost:3001/devices/1').respond(resource);
$httpBackend.when('GET', /\/templates\//).passThrough();
});
beforeEach(function() {
browser().navigateTo('../../app/index.html');
});
describe('when renders a device', function() {
it('renders the title', function() {
expect(element('.device .name').text()).toEqual('Closet dimmer');
});
it('renders the last time update', function() {
expect(element('.device .updated-at').text()).toEqual('2012-12-20T18:40:19Z');
})
});
});我想我遗漏了一些配置，但我真的不能理解是哪些配置。非常感谢。
Stack Overflow用户
发布于 2013-02-01 17:23:26
在阅读this question的最后一条评论时，我得到了最终的解决方案。
实际上，我遗漏了一个重要的步骤，因为我必须使用一个使用模拟应用程序的HTML文件。让我们让代码说话。
1)我已经在测试环境中创建了一个HTML文件。主要区别在于我设置了ng-app=test，并且添加了两个新的JS文件。第一个是/ test /e2e/app-test.js，我在其中创建了测试模块，第二个是/test/lib/angular-mocks.js。
<!doctype html>
<html lang="en" ng-app="test">
<head>
<meta charset="utf-8">
<title>Lelylan Test</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<device id="1"></device>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/settings.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- Test application with mocked requests -->
<script src="../test/e2e/app-test.js"></script>
<script src="../test/lib/angular/angular-mocks.js"></script>
</body>
</html>现在，让我们看看如何实现测试模块。在这里，我定义了一个与我的主模块(lelylan)完全相同的模块，并添加了允许您访问$httpBackend和模拟HTTP请求的ngMockE2E。
'use strict';
var resource = { id: '1', uri: 'http://localhost:3001/devices/1' };
var test = angular.module('test', ['lelylan', 'ngMockE2E']);
test.run(function($httpBackend) {
$httpBackend.when('GET', 'http://localhost:3001/devices/1').respond(resource);
$httpBackend.when('GET', /\/templates\//).passThrough();
});没别的了。运行scripts/e2e-test.sh，就完成了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14640199
复制相关文章
相似问题
腾讯云开发者
