Angular JS官方教程-第2步单元测试错误
Angular JS official tutorial - step 2 Unit testing errors
我在完成官方AngularJS教程的第二步时遇到了麻烦。我正在试着执行单元测试的指令。
我不认为我在源代码中做了任何改变,并且完全遵循了教程。教程中特定步骤的链接可以在这里找到。
这是我在控制台窗口中从Karma获得的错误:
Changed file "/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js".
Chrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneListCtrl should create "phones" model with 2 phones fetched from xhr FAILED
Expected [ { name : 'Nexus S', snippet : 'Fast just got faster with Nexus S.' }, { name : 'Motorola XOOM™ with Wi-Fi', snippet : 'The Next, Next Generation tablet.' }, { name : 'MOTOROLA XOOM™', snippet : 'The Next, Next Generation tablet.' } ] to equal data [ ].
Error: Expected [ { name : 'Nexus S', snippet : 'Fast just got faster with Nexus S.' }, { name : 'Motorola XOOM™ with Wi-Fi', snippet : 'The Next, Next Generation tablet.' }, { name : 'MOTOROLA XOOM™', snippet : 'The Next, Next Generation tablet.' } ] to equal data [ ].
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:31:28)
Error: No pending request to flush !
at Function.$httpBackend.flush (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:1439:34)
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:32:20)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 1 of 5 (1 FAILED) (0 secs / 0.069 sChrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneListCtrl should set the default value of orderProp model FAILED
Expected undefined to be 'age'.
Error: Expected undefined to be 'age'.
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:40:31)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 2 of 5 (2 FAILED) (0 secs / 0.075 sChrome 35.0.1916 (Mac OS X 10.9.2) PhoneCat controllers PhoneDetailCtrl should fetch phone detail FAILED
Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams
http://errors.angularjs.org/1.2.18/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:78:12
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3741:19
at Object.getService [as get] (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3746:45
at getService (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
at Object.invoke (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3896:13)
at workFn (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2149:20)
Error: Declaration Location
at window.inject.angular.mock.inject (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2134:25)
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:55:16)
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:45:3)
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:4:1
TypeError: Cannot read property 'phone' of undefined
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/controllersSpec.js:66:19)
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 3 of 5 (3 FAILED) (0 secs / 0.083 sChrome 35.0.1916 (Mac OS X 10.9.2): Executed 4 of 5 (3 FAILED) (0 secs / 0.086 sChrome 35.0.1916 (Mac OS X 10.9.2) service check the existence of Phone factory FAILED
Error: [$injector:unpr] Unknown provider: PhoneProvider <- Phone
http://errors.angularjs.org/1.2.18/$injector/unpr?p0=PhoneProvider%20%3C-%20Phone
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:78:12
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3741:19
at Object.getService [as get] (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3746:45
at getService (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3869:39)
at Object.invoke (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular/angular.js:3896:13)
at workFn (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2149:20)
Error: Declaration Location
at window.inject.angular.mock.inject (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/app/bower_components/angular-mocks/angular-mocks.js:2134:25)
at null.<anonymous> (/Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/servicesSpec.js:9:46)
at /Users/user/Dropbox/personal projects/learn_angular/angular-phonecat/test/unit/servicesSpec.js:3:1
Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 5 of 5 (4 FAILED) (0 secs / 0.088 sChrome 35.0.1916 (Mac OS X 10.9.2): Executed 5 of 5 (4 FAILED) (0.666 secs / 0.088 secs)
这是我的controller .js文件:
'use strict';
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
],
$scope.name = "Anon";
});
//phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
function($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);
这是controllersSpec.js文件,我甚至没有在教程步骤2中添加说明,因为它已经在Karma中为我产生错误。
'use strict';
/* jasmine specs for controllers go here */
describe('PhoneCat controllers', function() {
beforeEach(function(){
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
}
});
});
beforeEach(module('phonecatApp'));
beforeEach(module('phonecatServices'));
describe('PhoneListCtrl', function(){
var scope, ctrl, $httpBackend;
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/phones.json').
respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
scope = $rootScope.$new();
ctrl = $controller('PhoneListCtrl', {$scope: scope});
}));
it('should create "phones" model with 2 phones fetched from xhr', function() {
expect(scope.phones).toEqualData([]);
$httpBackend.flush();
expect(scope.phones).toEqualData(
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
});
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('age');
});
});
describe('PhoneDetailCtrl', function(){
var scope, $httpBackend, ctrl,
xyzPhoneData = function() {
return {
name: 'phone xyz',
images: ['image/url1.png', 'image/url2.png']
}
};
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
$routeParams.phoneId = 'xyz';
scope = $rootScope.$new();
ctrl = $controller('PhoneDetailCtrl', {$scope: scope});
}));
it('should fetch phone detail', function() {
expect(scope.phone).toEqualData({});
$httpBackend.flush();
expect(scope.phone).toEqualData(xyzPhoneData());
});
});
});
任何帮助将是非常感激-我已经尝试了这么多不同的东西,但不能得到它的工作。
提前感谢&祝一切顺利!
controller.js
和controllersSpec.js
的版本号可能是step 4
或以后的版本号
下面的代码是在步骤4中添加的。
$scope.orderProp = 'age';
https://docs.angularjs.org/tutorial/step_04 https://github.com/angular/angular-phonecat/compare/step-3...step-4 我认为,你需要再做一次Workspace Reset Instructions
。如:
git checkout -f step-2
相关文章:
- 我的单元测试选项是什么
- 如何在Angular单元测试中从另一个控制器的rootScope将方法添加到rootScope中
- 使用量角器的当前url单元测试的getTitle
- AngularJS指令单元测试中未定义的函数
- 如何在ember单元测试中模拟_super()方法
- 单元测试依赖关系没有被嘲笑
- 为什么不'当单元测试出现解析错误时,我的因果报应测试会失败
- 在node.js中编写单元测试的最佳方式是什么
- Ng点击-如何进行行为单元测试
- Jasmine单元测试在监视服务方法时失败
- Angular 2和服务单元测试
- 在我的目录结构中,将单元测试助手源文件放在哪里
- 如何对CSS transitionEnd事件后执行的JavaScript进行单元测试
- 使用Node.js在应用程序引擎上进行本地单元测试
- 我应该如何衡量JS的单元测试覆盖率?我可以'我对jscoverage不满意
- 如何使用KARMA对React JSX ES6代码进行单元测试
- 如何在单元测试中将存储注入Ember.Service
- 单元测试:使用酶模拟父组件中子组件的点击事件
- Javascript单元测试
- Angular JS官方教程-第2步单元测试错误