带有模板和链接的茉莉花的angularjs指令单元测试答案

【问题标题】：angularjs directive unit testing with jasmine with template and link带有模板和链接的茉莉花的angularjs指令单元测试
【发布时间】：2014-05-28 17:44:47
【问题描述】：

我有一个如下指令，我想将其作为我的 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();
            }
        };
    }
]);

【问题讨论】：

标签： angularjs unit-testing angularjs-directive jasmine karma-jasmine

【解决方案1】：

这是一个带有解释的示例：

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();
  });
});

演示： http://plnkr.co/edit/tOJ0puOd6awgVvRLmfAD?p=preview

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

注入$log服务
将scope.onAdd = onAdd(); 更改为scope.onAdd = onAdd;

【讨论】：

【解决方案2】：

阅读指令的角度文档后，我能够解决这个问题。由于限制标记为 E，指令只能通过元素名称注入。早些时候我正在尝试通过 div 如下所示。

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

如果将限制标记为 A（属性），这将起作用。现在我在他的规范文件中更改了我的注入以匹配带有元素名称的指令。

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

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

【讨论】：