在Karma测试角度控制器

Question

我和我的团队一直在使用茉莉花的Karma测试跑步者设置控制器测试时遇到问题。

应用程序/ app.js

buyItApp = angular.module('buyItApp', ['ionic']); 

应用程序/控制器/ userSearchCtrl.js

buyItApp.controller("userSearchCtrl", function($http, $scope) { 
    var self = this; 
    self.searchQuery = function(searchData) { 
    $("ion-spinner").toggle(true); 
    $http({ 
     method: 'GET', 
     url: 'http://productfeedtest.wandoso.com/?keyword=' + searchData 
    }).then(function successCallback(response) { 
     $("ion-spinner").toggle(false); 
     $scope.showResultsCount = true 
     $scope.items = response.data.items; 
     $scope.isOffer = response.data.is_special_offer; 
     $scope.resultsCount = response.data.items.length; 
     $scope.searchQuery = searchData; 
    }, function errorCallback(response) { 
     $scope.searchResults = "server error!" 
    }); 
    } 
}); 

测试/ karma.conf.js

module.exports = function(config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine'], 
    files: [ 
     'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js', 
     'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-mocks.js', 
     'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-scenario.js', 
     '../public/javascripts/app/*.js', 
     '../public/javascripts/app/controllers/*.js', 
     'unit/userSearchCtrl.spec.js', 
     'unit/*.spec.js' 
    ], 

    exclude: [ 
    ], 

    preprocessors: { 
    }, 

    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['PhantomJS'], 
    singleRun: false, 
    concurrency: Infinity 
    }) 
} 

测试/单元/ userSearchCtrl.spec.js

describe('userSearchCtrl', function() { 

    var $rootScope, $scope, $controller, userSearchCtrl; 

    beforeEach(module('buyItApp')); 

    beforeEach(inject(function(_$rootScope_, _$controller_){ 
     $rootScope = _$rootScope_; 
     $scope = $rootScope.$new(); 
     $controller = _$controller_; 

     userSearchCtrl = $controller('userSearchCtrl', {'$rootScope' : $rootScope, '$scope': $scope}); 
    })); 

    it('should exist', function() { 
     expect(userSearchCtrl).toBeDefined(); 
    }); 
}); 

的失败的测试结果

http://textuploader.com/5jo6b

最值得注意的是：

Expected undefined to be defined. 
     at /Users/Harry/Dropbox/Dev/buyIt/test/unit/userSearchCtrl.spec.js:16 
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.004 secs/0.007 secs) 

它看起来像噶找不到控制器，但是检查代码，并审查其他项目也不是那么清楚是什么问题了。

Answer 1

由于错误

> http://errors.angularjs.org/1.5.0-beta.1/$injector/modulerr?p0=buyItApp&p1=Error: 
> [$injector:modulerr] 
> http://errors.angularjs.org/1.5.0-beta.1/$injector/modulerr?p0=ionic&p1=Error: 
> [$injector:nomod] 
> http://errors.angularjs.org/1.5.0-beta.1/$injector/nomod?p0=ionic 

明确地说，它无法找到它在buyItApp加载ionic模块。因为它不包含在Karma files中。

Answer 2

我认为问题是你不使用模拟。

beforeEach(module('buyItApp'));是afaik实例化一个真实模块。这显然失败，因为你不包括依赖关系。

另外，如果你想模拟控制器的功能，你应该使用angular.mock.inject而不是仅仅是inject。

我不确定这件事，但我一直这样做。

您的规格应该是这样的，那么：

describe('userSearchCtrl', function() { 
    var $rootScope, $scope, $controller, userSearchCtrl; 

    beforeEach(angular.mock.module('buyItApp')); 

    beforeEach(angular.mock.inject(function(_$rootScope_, _$controller_) { 
     $rootScope = _$rootScope_; 
     $scope = $rootScope.$new(); 
     $controller = _$controller_; 

     userSearchCtrl = $controller(
      'userSearchCtrl', 
      { 
       '$rootScope' : $rootScope, 
       '$scope': $scope 
      } 
     ); 
    })); 

    it('should exist', function() { 
     expect(userSearchCtrl).toBeDefined(); 
    }); 
});