javascript - 测试 AngularJS 指令的惯用方法是什么？

Question

执行指令的内存中集成测试的惯用方法是什么？

例如，假设我有一个指令，其中包含一个按钮，单击该按钮会改变颜色，以下是否符合 DOM 集成测试的习惯用法？

colored-button-directive-spec.js

var ColoredButtonDirective = require('../colored-button-directive');

describe('colored button', function() {

    var $compile, $rootScope;

    beforeEach(inject(function($templateCache, $rootScope, $injector) {
      // Should configuration of the module be located in the beforeEach?   
      angular.module('test', [])
            .directive('coloredButton', ColoredButtonDirective);
        $templateCache.put('./colored-button.html');            
        $compile = $injector.get('$compile'); // Can I have $compile injected instead?
    }));

    it('should turn red when clicked', function() {
        //arrange
        var dom, button;
        dom = $compile(angular.element('<colored-button></colored-button>'))($rootScope); // Must I inject a scope to the invocation of the link function?
        button = angular.element(dom.querySelector('button')); // Is there a better way of getting the button inside the rendered DOM?

        //act
        button.click();

        //assert
        expect(button.css('background-color')).toBe('red');
    });

});

colored-button.html

<button ng-click='onClick'>My button</button>

colored-button-directive.js

return function ColoredButtonDirective() {
    return {
        scope: {
            onClick: function($event) {
                $event.currentTarget.css('background-color', 'red');
            }
        },
        restrict: 'E',
        template: require('./colored-button.html'),
        replace: true,
    };
};

Answer 1

首先，在评论中解决您的问题:

// Should configuration of the module be located in the beforeEach?   
angular.module('test', [])
  .directive('coloredButton', ColoredButtonDirective);

更惯用的方式是做

beforeEach(module('test'));

如 https://code.angularjs.org/1.4.7/docs/guide/unit-testing 所示.所以从你的真实代码实例化你的应用程序的行

var app = angular.module('test', []);

必须在测试环境中运行。

$compile = $injector.get('$compile'); // Can I have $compile injected instead?

是的，喜欢

beforeEach(inject(function(_$rootScope_, _$compile_) {
  $rootScope = _$rootScope_;
  $compile = _$compile_;
}));

将作用域注入(inject)$compile

dom = $compile(angular.element('<colored-button></colored-button>'))($rootScope); // Must I inject a scope to the invocation of the link function?

是的，你必须这样做。如果需要，您可以编译一个元素一次，然后针对不同的范围进行链接，以获得来自同一编译版本的不同 DOM 元素。 (我认为这就是 ng-repeat 在幕后所做的)。

button = angular.element(dom.querySelector('button')); // Is there a better way of getting the button inside the rendered DOM?

我怀疑是的，但正如我所写的那样，我怀疑这条线不起作用，原因有两个:

• dom 是一个 jQlite 对象，没有 querySelector 方法
• dom 是指令根的 jQlite 对象，在您的情况下是一个按钮，因此查找按钮不会找到任何东西。

但是，如果您有不同的 DOM 结构，您可以执行以下操作:

button = dom.find('button');

你也没有问，但是

//act
button.click();

不会工作，因为 jQlite 没有“点击”功能。你可以这样做:

dom.triggerHandler('click');

此外，

scope: {
  onClick: function($event) {
    $event.currentTarget.css('background-color', 'red');
  }
}

不会起作用，因为这不是 scope 对象在指令定义中的使用方式。要工作，这必须在链接函数中，然后还使用 $event.target 代替

link: function(scope, element, attrs) {
  scope.onClick = function($event) {
    angular.element($event.target).css('background-color', 'red');
  }
}

然后让它运行，并传递 $event 对象，模板，而不是

<button ng-click='onClick'>My button</button>

必须是

<button ng-click='onClick($event)'>My button</button>

把这些放在一起，你会得到一个像这样的指令

app.directive('coloredButton', function ColoredButtonDirective() {
  return {
    scope: {
    },
    restrict: 'E',
    template: '<button ng-click="onClick($event)">My button</button>',
    replace: true,
    link: function(scope, element, attrs) {
      scope.onClick = function($event) {
        angular.element($event.target).css('background-color', 'red');
      }
    }
  };
});

然后像这样测试:

describe('colored button', function() {
  var $compile, $rootScope;

  beforeEach(module('test'));

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;
  }));

  it('should turn red when clicked', function() {
    var dom, button;
    dom = $compile(angular.element('<colored-button></colored-button>'))($rootScope);
    dom.triggerHandler('click');
    expect(dom.css('background-color')).toBe('red');
  });

});

可以在http://plnkr.co/edit/L50B59V826Z6Wm8WtgJe?p=preview看到

---

但是，还有其他方法可以编写并测试该指令。

另一种方法是在链接函数中根本不使用查询选择器，而是在单击时在范围上设置一些状态，然后模板将使用这些状态。

app.directive('coloredButton', function ColoredButtonDirective() {
  return {
    scope: {
    },
    restrict: 'E',
    template: '<button ng-click="onClick()" ng-style="{\'background-color\': isRed ? \'red\' : \'\'}">My button</button>',
    link: function(scope, element, attrs) {
      scope.isRed = false;
      scope.onClick = function() {
        scope.isRed = true;
      }
    }
  };
});

这意味着链接函数不依赖于 DOM 结构，您的一个测试可以替换为三个

• 测试在点击按钮时调用某个范围的函数
• 测试作用域函数在作用域上设置一些状态
• 测试如果范围有一些状态，按钮是某种颜色

请注意，出于两个原因，我特意删除了定义中的 replace: true:

• 已弃用
• 3 个测试中的 2 个确实需要找到按钮，因此它更接近于一个重要的示例

测试本身可以写成

describe('colored button', function() {
  var $compile, $rootScope, dom, button, $scope;

  beforeEach(module('test'));

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;
  }));

  beforeEach(function() {
    dom = $compile(angular.element('<colored-button></colored-button>'))($rootScope);
    button = dom.find('button');
    $scope = dom.isolateScope();
  });

  it('should call the onClick handler', function() {
    spyOn($scope, 'onClick');
    expect($scope.onClick).not.toHaveBeenCalled();
    button.triggerHandler('click');
    expect($scope.onClick).toHaveBeenCalled();
  });

  it('the onClick handler should set isRed to be true', function() {
    expect($scope.isRed).toBe(false);
    $scope.onClick();
    expect($scope.isRed).toBe(true);
  });

  it('setting isRed true should make the button red', function() {
    expect(button.css('background-color')).not.toBe('red');
    $scope.isRed = true;
    $scope.$apply();
    expect(button.css('background-color')).toBe('red');
  });
});

可以在http://plnkr.co/edit/MmZGsYLopYP876Ft6ONG?p=preview看到

这会使您的测试更加“单元化”，诚然，如果您想在单个测试中测试从点击到生效的完整流程，这可能不是您想要实现的。但是，如果需要的话，您仍然可以将 3 个测试合并为 1 个来测试它们的集成:

it('clicking should make the button red', function() {
  expect(button.css('background-color')).not.toBe('red');
  button.triggerHandler('click');
  expect(button.css('background-color')).toBe('red');
});

可以在http://plnkr.co/edit/5WHzzzbpNFdqd94ITT8Q?p=preview看到