如何在角度指令中測試控制器

Question

我正在編寫指令並希望添加單元測試。 我想要寫測試：

• 它（「當創建指令消息變量被定義」）
• 它（「當創建指令它不包含任何消息」）
• 它（'當消息被稱爲會增加新的消息堆棧「）

我的指令代碼如下

app.directive("message", function() { 
return { 
    transclude: false, 
    require: '^ngModel', 
    templateUrl: 'notificationBar.html', 
    scope: { 
     message: '@' 
    }, 
    controller: function ($scope) { 

     $scope.messages = []; 

     $scope.addMessage=function(message){ 
      $scope.messages.push(message); 
     }       
    } 
} 

}）;

而且我的測試，但我不知道爲什麼這不起作用

describe("messageSpec", function(){ 
var element; 
var $scope; 
var ctrl; 

beforeEach(module(app)); 
beforeEach(inject(function($compile, $controller, $rootScope){ 
    var elm = angular.element(' <div data-message data-message="{{ message }}" >'); 
    $scope = $rootScope; 
    element = $compile(elm)($scope); 
    $scope.$digest(); 

    ctrl = element.controller("message"); 
})); 

describe("test", function(){ 
    it('When directive is created messages variable is defined', function(){ 
     spyOn(ctrl,messages); 

     expect(ctrl.messages).toBeDefined(); 
    }); 
    it('When directive is created it contains no messages',function(){ 
    spyOn(ctrl,messages); 

    expect(ctrl.messages.length).toBe(0); 
    }); 
    it('When message is called it will add new message to stack', function(){ 
    // todo 
    }); 

}); 

}）;

Answer 1

這些是需要考慮的幾件事情。

1. 在控制器功能$scope.addMessage(message){..有一個語法錯誤，所以我只是猜測並修復它。
2. 在控制器中，messages放入$scope而不是控制器實例本身（this），但在測試用例中，您在控制器實例中查找messages。
3. message指令具有隔離範圍，因此傳遞到$compile的$scope不能針對兩者進行測試。
4. 作爲一種解決方法，您可以使用angular.element（..）.isoScope（）來獲取測試的獨立範圍。

工作測試用例應該是這樣的：

describe("messageSpec", function() { 
    var element; 
    var $scope; 
    var isolateScope; 

    beforeEach(module("myApp")); 
    beforeEach(inject(function($compile, $controller, $rootScope) { 
    var elm = angular.element('<div data-message="{{ message }}">'); 
    $scope = $rootScope; 
    element = $compile(elm)($scope); 
    $scope.$digest(); 

    isolateScope = element.isolateScope(); 
    })); 

    describe("test", function() { 
    it('When directive is created messages variable is defined', function() { 
     expect(isolateScope.messages).toBeDefined(); 
    }); 

    it('When directive is created it contains no messages', function() { 
     expect(isolateScope.messages.length).toBe(0); 
    }); 

    it('When message is called it will add new message to stack', function() { 
     // todo 
    }); 
    }); 
}); 

有關完整例子中看到：在預覽http://plnkr.co/edit/c2yeH3AMSt1Cp7MdF889?p=preview