[英]Karma not running Angular tests as expected
我是 Karma 的新手,所以錯誤可能非常基本。
這是我的 karma.conf.js 文件
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'app/index.js',
'app/heroDetail.js',
'app/*.js',
'test/*.js',
'app/**/*.js',
'test/**/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
在app directory
我的js
和html
文件駐留。
index.html
看起來像:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-heroComponentSimple-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="index.js"></script>
<script src="heroDetail.js"></script>
</head>
<body ng-app="heroApp">
<!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b><br>
<hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
</html>
index.js
看起來像:
(function(angular) {
'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
this.hero = {
name: 'Miles Bronson'
};
});
})(window.angular);
現在在我的test spec
文件中,我嘗試了:
describe('MainController',function(){
var $rootScope,
$scope,
controller;
beforeEach(function(){
module('heroApp');
inject(function($injector){
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('MainCtrl',{$scope: $scope});
});
});
it('should initialize name of the hero',function(){
expect($scope.hero.name).toEqual('Miles Bronson');
});
it('should not pass',function(){
expect($scope.hero.name).toEqual('Milesl Bronsonkk');
});
});
現在當我做karma start karma.conf.js
它說
$ karma start karma.conf.js
18 01 2017 19:58:51.928:WARN [karma]: No captured browser, open http://localhost:9876/
18 01 2017 19:58:51.943:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9876/
18 01 2017 19:58:51.943:INFO [launcher]: Launching browser Chrome with unlimited concurrency
18 01 2017 19:58:51.953:INFO [launcher]: Starting browser Chrome
18 01 2017 19:58:54.145:INFO [Chrome 55.0.2883 (Windows 8.1 0.0.0)]: Connected on socket oOKBdNiWr9pVmcqnAAAA with id 12481546
Chrome 55.0.2883 (Windows 8.1 0.0.0) MainController should initialize name of the hero FAILED
TypeError: Cannot read property 'name' of undefined
at Object.<anonymous> (test/controllers/main-controller-spec.js:45:27)
Chrome 55.0.2883 (Windows 8.1 0.0.0) MainController should not pass FAILED
TypeError: Cannot read property 'name' of undefined
at Object.<anonymous> (test/controllers/main-controller-spec.js:49:27)
Chrome 55.0.2883 (Windows 8.1 0.0.0): Executed 2 of 2 (2 FAILED) ERROR (0.052 secs / 0.038 secs)
但是第二個應該失敗,而第一個應該通過? 為什么會出現這種意外行為?
我究竟做錯了什么 ?
Chrome 瀏覽器也沒有太大幫助......
請幫忙!
我想也許你有一個嵌套問題,而且描述太多了......
看起來你想要更像這樣的東西,其中 beforeEach 在每次測試之前觸發:
describe('MainController',function(){
var $rootScope,
$scope,
controller;
beforeEach(function(){
module('heroApp');
inject(function($injector){
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('MainCtrl',{$scope: $scope});
});
});
it('should initialize name of the hero',function(){
expect($scope.hero.name).toEqual('Miles Bronson');
});
it('should not pass',function(){
expect($scope.hero.name).toEqual('Milesl Bronsonkk');
});
});
此外,您並沒有真正在控制器中使用全局范圍……我認為您的測試在設置和斷言方面可以簡單得多。 就像是:
describe('TestMainController',function(){
beforeEach(module('heroApp'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('should initialize name of the hero',function(){
var controller = $controller('MainController');
expect(controller.hero.name).toEqual('Miles Bronson');
});
it('should not pass',function(){
var controller = $controller('MainController');
expect(controller.hero.name).toEqual('Milesl Bronsonkk');
});
});
這是一個 plunkr: https ://plnkr.co/edit/IAs4iYL69E8Nm5uvQDw1 ? p = preview
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.