AngularJS Karma測試中的jQuery觸發事件

Question

我正在嘗試測試我正在編寫的新指令。 但是，我似乎無法在Karma / Jasmine中使用jQuery觸發keydown事件。

以下是測試的簡化版本：

'use strict';

describe('', function() {

  var $compile;
  var $scope;

  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
  }));

  describe('Getting Trigger To Work', function() {

    it('Should Trigger a KeyDown Event', function() {

      var el = $compile('<form name="testing"><input id="field1" name="testfield" ng-model="result" type="text" ng-minlength="5" ng-maxlength="50"/></form>')($scope);
      console.log(el);

      var inputEl = el.find('input');
      console.log(inputEl);

      var e = $.Event('keydown');
      e.which = 65;

      inputEl.trigger(e);

    });

  });

});

我的業力配置包括AngularJS和jQuery。 這是部分：

//
files: [
  'lib/angular.js',
  'lib/angular-mocks.js',
  'lib/jquery-1.10.2.min.js',
  'test/**/*Spec.js'
],

當我運行測試時，我得到一個錯誤，我的input元素沒有觸發器方法：

INFO [watcher]: Changed file "/Volumes/Macintosh HD/dev_libraries/val-on-timeout/test/valOnTimeoutSpec.js".
LOG: Object{0: <form name="testing" class="ng-scope ng-pristine ng-valid"><input id="field1" name="testfield" ng-model="result" type="text" ng-minlength="5" ng-maxlength="50" class="ng-pristine ng-valid"></form>, length: 1}
LOG: Object{0: <input id="field1" name="testfield" ng-model="result" type="text" ng-minlength="5" ng-maxlength="50" class="ng-pristine ng-valid">, length: 1}
Chrome 32.0.1700 (Mac OS X 10.8.5)  testing valOnTimeout Should load FAILED
    TypeError: Object [object Object] has no method 'trigger'
        at null.<anonymous> (/Volumes/Macintosh HD/dev_libraries/val-on-timeout/test/valOnTimeoutSpec.js:79:21)
Chrome 32.0.1700 (Mac OS X 10.8.5): Executed 1 of 1 (1 FAILED) ERROR (0.327 secs / 0.033 secs)

首先，您可能認為不包含jQuery。 但是，它包括在內。 如果不是，測試將在$.Event失敗。

關於讓keydown事件在輸入上工作的建議？

Answer 1

我希望這有效

  var e = $.Event('keydown');
  e.which = 65;

  $(inputEl).trigger(e); // convert inputEl into a jQuery object first
  // OR
  angular.element(inputEl).triggerHandler(e); // angular.element uses triggerHandler instead of trigger to trigger events

Answer 2

TLDR ：在AngularJS之前加載jQuery。

首先，您可能認為不包含jQuery。 但是，它包括在內。 如果不是，測試將在$ .Event失敗。

這里有jQuery的2個依賴項：

1. $.Event ，直接參考; 和
2. $ ，由angular.element()間接引用;

當加載AngularJS時，它會查找以前加載的jQuery實例，如果它確實存在，它會使element只是$的別名。 否則，它會加載對jqLit​​e的引用，而jqLit​​e沒有trigger方法。

所以，我確定你已經加載了jQuery，但這並不意味着AngularJS會使用它。 為此，您必須確保在AngularJS之前（任何地方）加載jQuery。

當angular.element()引用jqLit​​e時，即使加載了jQuery，它也永遠不會調用jQuery。 所以你只能調用jqLit​​e上定義的方法：

angular.element(inputEl).triggerHandler(e);

但是，jqLit​​e的triggerHandler不會執行事件冒泡，模擬引發事件也不可靠。 jQuery的trigger更好。

要使用jQuery，請在HTML上執行此操作：

<script src="jquery.js">
<script src="angular.js">

或者在你的karma.conf.js上：

files: [
  'lib/jquery-1.10.2.min.js',
  'lib/angular.js',
  'lib/angular-mocks.js',
  'test/**/*Spec.js'
],

參考：

• https://docs.angularjs.org/api/ng/function/angular.element
• https://github.com/angular/angular.js/blob/master/src/Angular.js#L1608

關於讓keydown事件在輸入上工作的建議？

您已經通過解決問題找到了一種方法。 對於你的單元測試來說 ，這不是什么大問題，你需要一個更好的DOM庫，但現在你知道發生了什么。

PS：我真的很喜歡回答這個問題。 一個多年的問題，由6k用戶查看，但仍然沒有解決核心問題。