2016-10-03 109 views
12

我正在使用Angular 1.5.8。這裏是我的代碼:

describe('My Controller', function() { 
    var MyController; 
    var $controller; 
    var $rootScope; 
    var $state; 

    beforeEach(angular.mock.module('ui.router')); 
    beforeEach(module('app.my.ctrl')); 
    beforeEach(inject(function(_$controller_, _$rootScope_, _$state_) { 
     $controller = _$controller_; 
     $rootScope = _$rootScope_; 
     $state = _$state_; 
     MyController = $controller('MyController', { scope: $rootScope.$new() }); 
    })); 

    describe('#init', function() { 
     it('should do something', function() { 
      console.log('logStatement', MyController); 

      MyController.init(); 

      expect(true).toBe(true); 
     }) 

    }) 
}); 

測試運行器能夠找到所有文件,所以這不是一個忘記加載的情況。當我運行這個測試,不僅在logStatement永遠不會出現,我得到這個錯誤:

Argument 'MyController' is not a function, got undefined 

這是我的控制器:

(function() { 
'use strict'; 

angular 
    .module('app.my.ctrl') 
    .controller('MyController', MyController); 

MyController.$inject = [ 
    '$scope' 
]; 
/* ngInject */ 
function MyController($scope) { 

    var vm = this; 

    vm.hello = 'world'; 

    vm.init = function() { 
     return true; 
    } 
} 

})(); 

,這是我的人緣的conf文件:

// Karma configuration 

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-ui-router/release/angular-ui-router.js', 
     'src/controllers/MyController.js', 
     'tests/unit/**/*.spec.js', 
    ], 


    // list of files to exclude 
    exclude: [ 
     '**/*.swp' 
    ], 


    // 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: ['spec'], 

    // Spec Reporter Config 
    specReporter: { 
    //  suppressErrorSummary: false, 
    //  suppressFailed: false, 
    //  suppressPassed: false, 
     suppressSkipped: true 
    //  showSpecTiming: false 
    }, 


    // 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: true, 

    // Concurrency level 
    // how many browser should be started simultaneous 
    concurrency: Infinity 
    }) 
}; 

這是什麼意思?我無法在文檔中找到任何解釋這一點的內容。

UPDATE:

我讀過this answer和答案沒有奏效。

+0

您的控制器定義在哪個模塊的名稱是什麼? – segFault

+0

請閱讀片段。 ''app.my.ctrl'' – dopatraman

+0

我讀到了,只是確定是正確的。 – segFault

回答

3

試圖改變從scope控制器注入的服務$scope

beforeEach(inject(function(_$controller_, _$rootScope_, _$state_) { 
     $controller = _$controller_; 
     $rootScope = _$rootScope_; 
     $state = _$state_; 
     MyController = $controller('MyController', { $scope: $rootScope.$new()}); 
})); 
+0

這當然是*下一個問題* OP會遇到但不是當前的:) – Phil

+0

請只添加已經過測試的答案。 – dopatraman

+0

除了這個答案,使用你的代碼適用於我。我向你推薦,檢查你的控制器.js文件是否已在業力流程中加載。爲此,使用'karma start --no-single-run'命令在url ** http:// localhost:9876/debug.html中打開您的瀏覽器。嘗試通過示例在您的'use strict'行之後打印控制器console.log或檢查控制器是否已加載在Chrome開發工具的'Sources'選項卡中 –

1

你嘗試讓你的PB儘可能簡單?在應用程序內可以成功進行此調用嗎? $controller('MyController', { $scope: $rootScope.$new()});。如果這有效(它實際上應該),問題肯定來自你的測試/茉莉/卡瑪/咕嚕/咕嚕配置,你不應該挖角度方向了。你能否給我們看看你在應用程序中如何定義app.my.ctrl模塊?也許這個模塊依賴於更多模塊,而不僅僅是你在測試中嘲笑的ui.router。如果是這種情況,則無法加載該模塊,也無法創建任何內部控制器。

+0

yes 。沒有骰子... – dopatraman

+0

「沒有骰子」......我不明白。這是否意味着測試環境的簡單調用不起作用?或者這是否意味着你的模塊不包含更多的依賴關係。 (有關信息,模塊定義是您在文章中未提及的唯一重要內容) – Stephane

0
describe('My Controller', function() { 
    var MyController; 
    var scope; 

    beforeEach(angular.mock.module('ui.router')); 
    beforeEach(module('app.my.ctrl')); 
    beforeEach(inject(function($rootScope) { 
     scope = $rootScope.$new(); 
    })); 

    describe('#init', function() { 
     it('should do something', function($componentController) { 
      var MyController = $componentController('MyController', { 
       $scope : scope 
      }); 
      MyController.init(); 

      expect(true).toBe(true); 
     }) 

    }) 
});