單元測試指令的控制器

Question

我很努力從單元測試的指令中獲取控制器。這裏是我的角度應用：

angular.module('test-app', []) 

    .controller('loadingCtr', ['$scope', function ($scope) { 

    }]) 

    .directive('loading', function() { 
     return { 
      restrict: 'E', 
      controller: 'loadingCtr' 
     }; 
    }); 

這裏是我的單元測試代碼：

describe('loading', function() { 

    beforeEach(inject(function($rootScope, $compile) { 

     var fooElement = $compile('<loading></loading>')($rootScope); 
     var fooController = fooElement.controller('loading'); 

     $rootScope.$digest(); 
     console.log(fooController); 
    })); 

    describe('loading: testing loading directive', function() { 
     it('should create loading directive', function() { 
     }); 
    }); 
}); 

這裏是一個plnkr更動：http://plnkr.co/edit/38cc5HQFgeHDhnC8OMo8?p=info

FooController的總是返回未定義。我用下面的例子，我在網上找到試過，但我總是得到相同的結果：

Unit testing a directive that defines a controller in AngularJS

http://daginge.com/technology/2014/03/03/testing-angular-directive-controllers-with-jasmine-and-karma/

有什麼明顯的在這裏，我很想念？

Answer 1

我唯一可以看到的問題是，你沒有在你的fixture中加載模塊test-app，這意味着編譯後的html代碼並不真正編譯指令loading，因爲它在注入器中不可用。因此請嘗試將模塊加載到beforeEach塊中。加載模塊可確保在模塊中註冊的指令，控制器和服務等在注射器中可用，否則它將僅使用模塊ng，該模塊不知道loading指令的任何內容。

即

describe('loading', function() { 
    var fooController; 

    //Load the module 
    beforeEach(module('test-app')); 

    beforeEach(inject(function($rootScope, $compile) { 

     var fooElement = $compile('<loading></loading>')($rootScope); 
     fooController = fooElement.controller('loading'); 

     $rootScope.$digest(); 
     console.log(fooController); 
    })); 

    describe('loading: testing loading directive', function() { 
     it('should create loading directive', function() { 
      expect(fooController).toBeDefined(); 
     }); 
    }); 
}); 

Demo

還要注意的是，如果你是.controller註冊控制器，你可以直接$controller(ctrlName)結構得到控制的實例。如果您在指令中使用controllerAs語法，並且bindToController:true在您的指令中，那麼您可以從屬性名稱與別名相同的範圍中獲取它。