如何在角度指令中测试控制器

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