我正在处理 Angular Phonecat tutorial ,并纳入 Opinionated AngularJS Styleguide 中的一些建议
但是,我很难理解为什么特定的 Karma 测试失败。
我的应用程序代码是:
function routeProvider(provider){ ... }
function phoneListCtrl(scope, http){ ... }
function phoneDetailCtrl(scope, http, routeParams){
http.get("/phones/" + routeParams.phoneId + ".json").success(function(data){
scope.phone = data;
});
}
angular.module("phonecatApp", ["ngRoute"])
.controller('PhoneListCtrl', ["$scope", "$http", function($scope, $http){
phoneListCtrl($scope, $http);
}])
.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
phoneDetailCtrl($scope, $http, $routeParams);
}])
.config(['$routeProvider',function($routeProvider) {
routeProvider($routeProvider);
}]);
此应用程序代码在浏览器中运行,电话列表和电话详细信息 View 均按预期显示。控制台中没有报告任何错误。
但是,由于
,PhoneDetailCtrl 的此测试失败PhoneCat Controllers PhoneDetailCtrl should fetch phone detail FAILED
Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams
describe("PhoneDetailCtrl", function(){
var scope, $httpBackend, ctrl;
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller){
$httpBackend = _$httpBackend_;
$httpBackend.expectGET("phones/xyz.json").respond({name : "phone xyz"});
$routeParams.phoneId = "xyz";
scope = $rootScope.$new();
ctrl = $controller("PhoneDetailCtrl", {$scope : scope});
}));
it("should fetch phone detail", function(){
expect(scope.phone).toBeUndefined();
$httpBackend.flush();
expect(scope.phone).toEqual({name : "phone xyz"});
});
});
具体来说,beforeEach(inject(function( ... ) { ... }));
在进入 angular-mocks.js< 中编码之前先抛出错误
.
为什么在重新组织应用程序代码后测试代码就失败了,但在浏览器中仍然可以工作?仅当运行 Karma 测试时才会发生这种情况,所有 Protractor 测试均通过。
预计到达时间
有些人询问了 karma.conf.js
中的 files
数组。设置为:
files : [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*.js',
'test/unit/**/*.js'
],
最佳答案
我在完全相同的测试中遇到了类似的错误。我发现问题在于模块是在内部 describe
block 之一内定义的。将模块创建语句移动到顶级 describe
block 修复了此错误。
错误代码如下:
'use strict';
describe('Controller: MainCtrl', function () {
describe('PhoneListCtrl', function() {
var scope, ctrl, $httpBackend;
beforeEach(module('phonecatApp'));
...
});
describe('PhoneDetailCtrl', function() {
var scope, $httpBackend, ctrl;
...
});
正确应该是:
'use strict';
describe('Controller: MainCtrl', function () {
beforeEach(module('phonecatApp'));
describe('PhoneListCtrl', function() {
var scope, ctrl, $httpBackend;
...
});
describe('PhoneDetailCtrl', function() {
var scope, $httpBackend, ctrl;
...
});
关于javascript - Angular 和 Karma - 为什么这个测试失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24985778/