javascript - 如何在 PhantomJS 测试中 ng-click A 指令

Question

由 Yeoman 使用 Angular 生成器生成的应用程序。

指令:

angular.module('psApp').directive('scrollTop', function () {
  return {
    restrict: 'A',
    scope: true,
    template: '<a href="#" ng-click="click()" class="scroll-top"><span class="glyphicon glyphicon-arrow-up"></span> Back to top</a>',
    controller: ['$scope', '$element', '$document', function ($scope, $element, $document) {
      $scope.click = function () {
        $document.scrollTop(0, 500);
      };
    }]
  };
});

测试:

describe('Directive: scrollTop', function () {

  // load the directive's module
  beforeEach(module('psApp'));

  var scope, element;

  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
    element = $compile('<div scroll-top></div>')(scope);
    scope.$apply();
  }));

  it('should have "Back to top" as text', inject(function () {
    expect(element.html()).toBe('<a href="#" ng-click="click()" class="scroll-top"><span class="glyphicon glyphicon-arrow-up"></span> Back to top</a>');
    expect(element.text()).toBe(' Back to top');
    element.click();
  }));
});

错误:

PhantomJS 1.9.7 (Mac OS X) Directive: scrollTop should have "Back to top" as text TypeError: 'undefined' is not a function (evaluating 'element.click()')

我不明白问题出在哪里。 :( 请发布功能代码。

Answer 1

这不是 PhantomJS 的缺陷，而是 AngularJS 中包含的 jqLit​​e 包的已知限制。它的元素类中没有“点击”功能: https://docs.angularjs.org/api/ng/function/angular.element

有两种用于测试目的的替代方法。

1. 在您的测试中包含 jQuery。如果包含 jQuery，则 jqLit​​e 包将自动替换为完整的 jQuery 包，该包具有完整的 click() 实现。我意识到这并不理想，因为您的应用程序可能不使用 jQuery。

2. 使用 jqLit​​e 的“triggerHandler()”函数来调用点击处理程序。但这种方法会使用虚拟事件调用您的处理程序；请参阅triggerHandler 的文档。测试代码如下所示:

   element.triggerHandler('click');
   

   由于triggerHandler不传递“真实”事件对象，您可能需要相应地调整您的测试。