Question

我有一个指令如下所示，我想作为我的茉莉花单元测试的一部分，但不知道如何在我的测试用例中获取模板值和链接内的值。这是我第一次尝试对指令进行单元测试。

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

Answer 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;

Answer 2

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

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

如果将restrict标记为A（属性），则此方法有效。现在我在spec文件中更改了注入，以使指令与元素名称匹配。

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

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

angularjs指令单元测试用茉莉花与模板和链接

2 个答案: