Question

我正在编写指令并希望添加单元测试。我想写测试：

it（'当指令创建时，消息变量被定义'）
it（'当创建指令时，它不包含任何消息'）
it（'当消息被调用时，它会向堆栈添加新消息'）

我的指令代码如下

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

这些是需要考虑的几件事。

$scope.addMessage(message){..的控制器功能存在语法错误，所以我只是猜测并修复它。
在控制器中，messages放入$scope而不是控制器实例本身（this），但在测试用例中，您在控制器实例中查找messages。
message指令具有独立的范围，因此传递给$scope的{{1}}无法对其进行测试。
作为一种解决方法，您可以使用angular.element（..）。isolateScope（）来获取隔离的测试范围。

工作测试用例应该是这样的：

$compile

有关完整示例，请参阅：http://plnkr.co/edit/c2yeH3AMSt1Cp7MdF889?p=preview

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

1 个答案: