如何在PhantomJS测试中单击A指令

Question

由Yeoman用角度发生器生成的应用程序.

指示:

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)指令:scrollTop应该有"返回顶部"作为文本TypeError:'undefined'不是函数(评估'element.click()')

我无法理解问题出在哪里.:(请发布功能代码.

Answer 1

这不是PhantomJS的缺陷,而是AngularJS中包含的jqLit​​e包的已知限制.它的元素类中没有'click'函数:https: //docs.angularjs.org/api/ng/function/angular.element

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

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

2. 使用jqLit​​e的'triggerHandler()'函数来调用click处理程序.但是这种方法会用虚拟事件调用你的处理程序; 请参阅triggerHandler的文档.测试代码看起来像:

   element.triggerHandler('click');
   

   由于triggerHandler未传递"真实"事件对象,因此您可能需要相应地调整测试.