带模板和链接的jasmine angularjs指令单元测试

我有一个如下的指令，我想作为jasmine单元测试的一部分介绍它，但不确定如何在我的测试用例中获取模板值和链接中的值。这是我第一次尝试对指令进行单元测试

angular.module('newFrame', ['ngResource'])
.directive('newFrame', [
    function () {

        function onAdd() {
            $log.info('Clicked onAdd()');
        }

        return {
            restrict: 'E',
            replace: 'true',
            transclude: true,
            scope: {
                filter: '=',
                expand: '='
            },
            template:
                    '<div class="voice ">' +
                        '<section class="module">' +
                            '<h3>All Frames (00:11) - Summary View</h3>' +
                            '<button class="btn" ng-disabled="isDisabled" ng-hide="isReadOnly" ng-click="onAdd()">Add a frame</button>' +
                        '</section>' +
                    '</div>',
            link: function (scope) {

                scope.isDisabled = false;   
                scope.isReadOnly = false;   

                scope.onAdd = onAdd();
            }
        };
    }
]);

angular.module（'newFrame'，['ngResource']））
.directive（'newFrame'[
函数（）{
函数onAdd（）{
$log.info（'Clicked onAdd（）'）；
}
返回{
限制：'E'，
替换为：“true”，
是的，
范围：{
筛选器：'='，
展开：'='
},
模板：
'' +
'' +
'所有帧（00:11）-摘要视图'+
“添加框架”+
'' +
'',
链接：功能（范围）{
scope.isDisabled=false；
scope.isReadOnly=false；
scope.onAdd=onAdd（）；
}
};
}
]);

在阅读了指令的角度文档后，我能够解决这个问题。由于restrict标记为E，因此只能通过元素名注入该指令。早些时候我试着通过下面的div

angular.element('<div new-frame></div>')

angular.element（“”）

如果将限制标记为A（属性），则此操作有效。现在，我更改了规范文件中的注入，以使指令与元素名匹配

angular.element('<new-frame></new-frame>')

angular.element（“”）

---

现在我能够在我的规范中获得模板和范围属性。为了确保接受所有内容，A（属性）、E（元素）和C（类名）的组合可以根据需要在restrict或任意2中使用。

在阅读指令的角度文档后，我能够解决这个问题。由于restrict标记为E，因此只能通过元素名注入该指令。早些时候我试着通过下面的div

angular.element('<div new-frame></div>')

angular.element（“”）

如果将限制标记为A（属性），则此操作有效。现在，我更改了规范文件中的注入，以使指令与元素名匹配

angular.element('<new-frame></new-frame>')

angular.element（“”）

---

现在我能够在我的规范中获得模板和范围属性。为了确保接受所有内容，A（属性）、E（元素）和C（类名）的组合可以根据需要在restrict或任意2中使用。

在阅读指令的角度文档后，我能够解决这个问题。由于restrict标记为E，因此只能通过元素名注入该指令。早些时候我试着通过下面的div

angular.element('<div new-frame></div>')

angular.element（“”）

如果将限制标记为A（属性），则此操作有效。现在，我更改了规范文件中的注入，以使指令与元素名匹配

angular.element('<new-frame></new-frame>')

angular.element（“”）

---

现在我能够在我的规范中获得模板和范围属性。为了确保接受所有内容，A（属性）、E（元素）和C（类名）的组合可以根据需要在restrict或任意2中使用。

在阅读指令的角度文档后，我能够解决这个问题。由于restrict标记为E，因此只能通过元素名注入该指令。早些时候我试着通过下面的div

angular.element('<div new-frame></div>')

angular.element（“”）

如果将限制标记为A（属性），则此操作有效。现在，我更改了规范文件中的注入，以使指令与元素名匹配

angular.element('<new-frame></new-frame>')

angular.element（“”）

---

现在我能够在我的规范中获得模板和范围属性。为了确保接受所有内容，A（属性）、E（元素）和C（类名）的组合可以根据需要在restrict或任意2中使用。

下面是一个示例，并进行了说明：

describe('newFrame', function() {

  var $compile,
    $rootScope,
    $scope,
    $log,
    getElement;

  beforeEach(function() {

    // Load module and wire up $log correctly
    module('newFrame', function($provide) {
      $provide.value('$log', console);
    });

    // Retrieve needed services
    inject(function(_$compile_, _$rootScope_, _$log_) {
      $compile = _$compile_;
      $rootScope = _$rootScope_;
      $scope = $rootScope.$new();
      $log = _$log_;
    });

    // Function to retrieve a compiled element linked to passed scope
    getCompiledElement = function(scope) {
      var element = $compile('<new-frame></new-frame>')(scope);
      $rootScope.$digest();
      return element;
    }

    // Set up spies
    spyOn($log, 'info').and.callThrough();
  });

  it('test', function() {

    // Prepare scope for the specific test
    $scope.filter = 'Filter';
    $scope.expand = false;

    // This will be the compiled element wrapped in jqLite
    // To get reference to the DOM element do: element[0]
    var element = getCompiledElement($scope);

    // Get a reference to the button element wrapped in jqLite
    var button = element.find('button');

    // Verify button is not hidden by ng-hide
    expect(button.hasClass('ng-hide')).toBe(false);

    // Verify button is not disabled
    expect(button.attr('disabled')).toBeFalsy();

    // Click the button and verify that it generated a call to $log.info
    button.triggerHandler('click');
    expect($log.info).toHaveBeenCalled();
  });
});

description（'newFrame'，function（）{
var$compile，
$rootScope，
$scope，
$log，
getElement；
beforeach（函数（）{
//加载模块并正确连接$log
模块（'newFrame'，函数（$provide）{
$provide.value（“$log”，控制台）；
});
//检索所需服务
注入（函数（$compile，$rootScope，$log）{
$compile=\$compile；
$rootScope=\u$rootScope；
$scope=$rootScope.$new（）；
$log=$log；
});
//函数检索链接到传递范围的已编译元素
getCompiledElement=函数（作用域）{
变量元素=$compile（“”）（范围）；
$rootScope.$digest（）；
返回元素；
}
//设置间谍
spyOn（$log，'info'）。和.callThrough（）；
});
它（'test'，function（）{
//准备具体测试的范围
$scope.filter='filter'；
$scope.expand=false；
//这将是用jqLite包装的编译元素
//要获取对DOM元素的引用，请执行以下操作：元素[0]
var元素=getCompiledElement（$scope）；
//获取对jqLite中包装的button元素的引用
var button=element.find（'button'）；
//确认按钮未被ng hide隐藏
expect（button.hasClass（'ng-hide'））.toBe（false）；
//确认按钮未被禁用
expect（button.attr（'disabled'））.toBeFalsy（）；
//单击按钮并验证它是否生成了对$log.info的调用
triggerHandler（'click'）；
expect（$log.info）.toHaveBeenCalled（）；
});
});

演示：

请注意，我更改了指令的代码：

注入

$log

服务

已更改

scope.onAdd=onAdd（）至
scope.onAdd=onAdd

---

下面是一个示例，并进行了说明：

describe('newFrame', function() {

  var $compile,
    $rootScope,
    $scope,
    $log,
    getElement;

  beforeEach(function() {

    // Load module and wire up $log correctly
    module('newFrame', function($provide) {
      $provide.value('$log', console);
    });

    // Retrieve needed services
    inject(function(_$compile_, _$rootScope_, _$log_) {
      $compile = _$compile_;
      $rootScope = _$rootScope_;
      $scope = $rootScope.$new();
      $log = _$log_;
    });

    // Function to retrieve a compiled element linked to passed scope
    getCompiledElement = function(scope) {
      var element = $compile('<new-frame></new-frame>')(scope);
      $rootScope.$digest();
      return element;
    }

    // Set up spies
    spyOn($log, 'info').and.callThrough();
  });

  it('test', function() {

    // Prepare scope for the specific test
    $scope.filter = 'Filter';
    $scope.expand = false;

    // This will be the compiled element wrapped in jqLite
    // To get reference to the DOM element do: element[0]
    var element = getCompiledElement($scope);

    // Get a reference to the button element wrapped in jqLite
    var button = element.find('button');

    // Verify button is not hidden by ng-hide
    expect(button.hasClass('ng-hide')).toBe(false);

    // Verify button is not disabled
    expect(button.attr('disabled')).toBeFalsy();

    // Click the button and verify that it generated a call to $log.info
    button.triggerHandler('click');
    expect($log.info).toHaveBeenCalled();
  });
});

description（'newFrame'，function（）{
var$compile，
$rootScope，
$scope，
$log，
getElement；
beforeach（函数（）{
//加载模块并正确连接$log
模块（'newFrame'，函数（$provide）{
$provide.value（“$log”，控制台）；
});
//检索所需服务
注入（函数（$compile，$rootScope，$log）{
$compi