AngularJS 测试的 Karma 错误
Karma Error on AngularJS Test
我正在尝试了解 g运行t-karma 插件和 jasmine 框架以编写第一个 karma 测试。当我 运行 业力测试(g运行t 测试)时,我看到初始化模块、范围的错误。我究竟做错了什么 ?感谢您的帮助。
gruntfile.js
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
grunt.registerTask('test',['karma:unit']);
karma.conf.js
files: [
'scripts/bower_components/angular/angular.js',
'scripts/bower_components/angular-mocks/angular-mocks.js',
'config/config.js',
'scripts/app.js',
'scripts/controllers/*.js',
'test/unittest/personController.test.js'
],
app.js
var app = angular.module('myApp', ['services.config']);
personController.js
app.controller('personCtrl', ['$scope', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
}]);
config.js (service.config)
'use strict';
angular.module('services.config', [])
.constant('configuration', {
getAllBooks: '@@getAllBooks'
});
personController.test.js
describe('Testing AngularJS SampleApp [app]', function (){
//myApp will be loaded once instead of mentioning in every it() function
beforeEach(module('myApp'));
describe('1.Testing SampleApp Controllers', function(){
var scope;
var ctrl;
//loading controller once inside describe instead of every it() function
beforeEach(inject(function($controller,$rootScope){
scope = $rootScope.$new();
ctrl = $controller('personCtrl',{$scope:scope});
}));
afterEach(function(){
//clean-up code
});
it('should initialize the scope', function(){
expect(scope.firstName).toBeDefined('John');
expect(scope.lastName).toBeDefined('Doe');
});
});
});
错误:
15 09 2016 17:08:37.568:INFO [Chrome 52.0.2743 (Mac OS X 10.10.5)]: Connected on socket /#Pq9aUWSZ6FSyQjeRAAAA with id 50553444
Chrome 52.0.2743 (Mac OS X 10.10.5) Testing AngularJS SampleApp [app] 1.Testing SampleApp Controllers should initialize the scope FAILED
Error: [$injector:modulerr] Failed to instantiate module services.config due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
at scripts/bower_components/angular/angular.js:68:12
和
at Object.workFn (scripts/bower_components/angular-mocks/angular-mocks.js:3074:52)
TypeError: Cannot read property 'firstName' of undefined
at Object.<anonymous> (test/unittest/personController.test.js:23:16)
Chrome 52.0.2743 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) ERROR (0.034 secs / 0.02 secs)
问题:
1. 从 g运行t file.js 引用 karma.con.js 的最佳方式是什么?我在一些博客中读到我们还可以覆盖 g运行t 文件中的所有 karma.conf.js 属性,而不是引用文件 ?
2. 在 xxx.test.js 文件中访问控制器作用域的最佳方式是什么?
我能够解决问题,感谢 estus 指出问题,我应该已经意识到了。
personController.test.js
beforeEach(module('services.config'));
beforeEach(module('myApp'));
我没有加载 myApp
中使用的 services.config
模块。然后我收到 TypeError 错误:angular.element.cleanData 不是函数。我必须确保 angular
和 angular-mocks
的版本相同。
带走
1.load 加载应用程序之前的所有依赖模块
2.Add angualr、angualr-mocks 和所有脚本文件的链接
3.Make 一定要安装兼容的 angular 和 angular-mocks 版本
我正在尝试了解 g运行t-karma 插件和 jasmine 框架以编写第一个 karma 测试。当我 运行 业力测试(g运行t 测试)时,我看到初始化模块、范围的错误。我究竟做错了什么 ?感谢您的帮助。
gruntfile.js
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
grunt.registerTask('test',['karma:unit']);
karma.conf.js
files: [
'scripts/bower_components/angular/angular.js',
'scripts/bower_components/angular-mocks/angular-mocks.js',
'config/config.js',
'scripts/app.js',
'scripts/controllers/*.js',
'test/unittest/personController.test.js'
],
app.js
var app = angular.module('myApp', ['services.config']);
personController.js
app.controller('personCtrl', ['$scope', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
}]);
config.js (service.config)
'use strict';
angular.module('services.config', [])
.constant('configuration', {
getAllBooks: '@@getAllBooks'
});
personController.test.js
describe('Testing AngularJS SampleApp [app]', function (){
//myApp will be loaded once instead of mentioning in every it() function
beforeEach(module('myApp'));
describe('1.Testing SampleApp Controllers', function(){
var scope;
var ctrl;
//loading controller once inside describe instead of every it() function
beforeEach(inject(function($controller,$rootScope){
scope = $rootScope.$new();
ctrl = $controller('personCtrl',{$scope:scope});
}));
afterEach(function(){
//clean-up code
});
it('should initialize the scope', function(){
expect(scope.firstName).toBeDefined('John');
expect(scope.lastName).toBeDefined('Doe');
});
});
});
错误:
15 09 2016 17:08:37.568:INFO [Chrome 52.0.2743 (Mac OS X 10.10.5)]: Connected on socket /#Pq9aUWSZ6FSyQjeRAAAA with id 50553444
Chrome 52.0.2743 (Mac OS X 10.10.5) Testing AngularJS SampleApp [app] 1.Testing SampleApp Controllers should initialize the scope FAILED
Error: [$injector:modulerr] Failed to instantiate module services.config due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
at scripts/bower_components/angular/angular.js:68:12
和
at Object.workFn (scripts/bower_components/angular-mocks/angular-mocks.js:3074:52)
TypeError: Cannot read property 'firstName' of undefined
at Object.<anonymous> (test/unittest/personController.test.js:23:16)
Chrome 52.0.2743 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) ERROR (0.034 secs / 0.02 secs)
问题:
1. 从 g运行t file.js 引用 karma.con.js 的最佳方式是什么?我在一些博客中读到我们还可以覆盖 g运行t 文件中的所有 karma.conf.js 属性,而不是引用文件 ?
2. 在 xxx.test.js 文件中访问控制器作用域的最佳方式是什么?
我能够解决问题,感谢 estus 指出问题,我应该已经意识到了。
personController.test.js
beforeEach(module('services.config'));
beforeEach(module('myApp'));
我没有加载 myApp
中使用的 services.config
模块。然后我收到 TypeError 错误:angular.element.cleanData 不是函数。我必须确保 angular
和 angular-mocks
的版本相同。
带走
1.load 加载应用程序之前的所有依赖模块
2.Add angualr、angualr-mocks 和所有脚本文件的链接
3.Make 一定要安装兼容的 angular 和 angular-mocks 版本