jQuery Trigger-Ereignis in AngularJS Karma-Test

Ich versuche zu testen, eine neue Richtlinie, die ich Schreibe. Aber ich kann nicht scheinen, um das keydown-Ereignis auslösen mit jQuery innerhalb von Karma/Jasmin.

Hier ist eine vereinfachte version des test : 

'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);

    });

  });

});

Mein karma config enthält AngularJS und jQuery. Hier der betreffende Abschnitt:

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

Wenn ich den test ausführen, bekomme ich die Fehlermeldung, dass mein input-element hat keine trigger-Methode : 

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)

Auf den ersten, können Sie denken, dass jQuery ist nicht im Lieferumfang enthalten. Es ist jedoch im Lieferumfang enthalten. Wenn es waren nicht, der test würde fehlschlagen bei $.Event.

Anregungen zu bekommen, das keydown-Ereignis die Arbeit an der Eingabe?

Das ist das problem. [object Object] has no method 'trigger' so ist, kann ich nicht auslösen, die Veranstaltung.
sorry, ich meinte angular.element(inputEl).trigger('keydown')
Danke. Versucht. Kein Glück. Noch Object [object Object] has no method 'trigger'

InformationsquelleAutor Justin Noel | 2014-01-18

  1. 11

    Ich hoffe, das funktioniert

      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
    Ich habe ein identisches Antwort via Twitter, aber Sie bekommen die Stimmen hier. $(inputEl).trigger(e) hat den trick. Dank

    InformationsquelleAutor dcodesmith

  2. 2

    TLDR: load jQuery vor AngularJS.

    Auf den ersten, können Sie denken, dass jQuery ist nicht im Lieferumfang enthalten. Jedoch, es ist
    im Lieferumfang enthalten ist. Wenn es waren nicht, der test würde fehlschlagen $.Event.

    Haben Sie 2 Abhängigkeiten auf jQuery hier:

    1. $.Event eine direkte Referenz; und
    2. $ indirekt verwiesen wird, die von angular.element();

    Wenn AngularJS geladen wird, sieht es für eine zuvor geladene jQuery-Instanz, und falls es vorhanden ist, macht es element nur ein alias zu $. Ansonsten lädt eine Referenz auf jqLite, die nicht über eine trigger Methode.

    So, ich bin sicher, Sie haben jQuery geladen ist, aber das bedeutet nicht, AngularJS verwenden. Dies zu tun, müssen Sie sicherstellen, dass jQuery geladen ist (überall) vor AngularJS.

    Wenn angular.element() bezieht sich auf jqLite, es würde nie aufrufen, jQuery, auch nach jQuery geladen wird. So können Sie rufen nur Methoden definiert, die auf jqLite:

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

    Jedoch jqLite ist triggerHandler würde nicht ausführen Ereignis blubbert, ist es nicht zuverlässig zu verspotten auslösen von Ereignissen. jQuery trigger so besser.

    JQuery verwenden, tun dies auf Ihrer HTML:

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

    Oder auf Ihrem karma.conf.js:

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

    Referenz:

    Anregungen zu bekommen, das keydown-Ereignis die Arbeit an der Eingabe?

    Haben Sie gefunden, ein Ansatz, durch die Arbeit-um das problem. Es ist nicht eine große Sache für den unit-tests, wo würden Sie wollen, eine bessere DOM-Bibliothek, aber Sie wissen jetzt, was Los ist.

    PS: ich mochte die Beantwortung dieser. Eine Frage, die von mehr als einem Jahr gesehen von 6k Benutzer, und immer noch keine Antwort auf die core problem.

    InformationsquelleAutor André Werlang

Schreibe einen Kommentar