在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(); 
    }); 
});