Wie kann ich ein Click-Ereignis in meinem AngularJS-Direktive-Test simulieren?

Question

Ich habe versucht, das Format der ng-directive-testing Repo für eine Richtlinie, die ich geschrieben habe. Die Anweisung rendert grundsätzlich eine Überlagerung, wenn der Benutzer auf ein Element klickt. Hier ist die Richtlinie (vereinfacht):

mod.directive('uiCopyLinkDialog', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var $elm = angular.element(element); 
      element.bind('click', function(event) { 
       $elm.addClass('test'); 
      }); 
     } 
    }; 
}); 

Der Test Ich schreibe wie folgt aussieht:

describe('pre-compiled link', function() { 

    beforeEach(mocks.inject(function($compile, $rootScope) { 
     scope = $rootScope; 
     element = angular.element('<span class="foo" ui-copy-link-dialog="url"></span>'); 
     $compile(element)(scope); 
     scope.$digest(); 
    })); 

    it("should change the class when clicked", function() { 
     element.click(); // this returns "'undefined' is not a function" 
     element[0].click(); // so does this 
     $(elm).click(); // this uses jquery and doesn't *seem* to fail 
     waits(500); // hack to see if it was a race condition 
     expect(elm.className).toContain('test'); // always fails 
    }); 

}); 

Sie können in dem Test sehen, dass ich mehr Möglichkeiten versuchen, das click() Ereignis auf dem Link zu triggern , wobei die meisten einen undefined Fehler geben.

Kann mir jemand sagen, was ich hier falsch mache? Wenn ich die Beispiele lese, klingt das nach korrekter Syntax, aber mein Testläufer (Karma via Grunt) möchte nicht Ball spielen.

Answer 1

Das war also ein Problem mit PhantomJS: Einige Ereignisse, die auf Elemente wirken, scheinen nicht zu brennen, wenn die Elemente nicht irgendwo auf einem Dokument sind, sondern nur im Speicher (das ist sowieso meine Theorie) . Um dies zu umgehen musste ich diese Funktion nutzen click Ereignisse auf Elemente auszulösen:

define(function() { 
    return { 
     click: function (el) { 
      var ev = document.createEvent("MouseEvent"); 
      ev.initMouseEvent(
       "click", 
       true /* bubble */, true /* cancelable */, 
       window, null, 
       0, 0, 0, 0, /* coordinates */ 
       false, false, false, false, /* modifier keys */ 
       0 /*left*/, null 
      ); 
      el.dispatchEvent(ev); 
     } 
    }; 
}); 

Das funktionierte, obwohl andere Dinge waren härter: Ich wollte auch einen Test schreiben, die eine bestimmte Form gewährleistet input Fokus hat, aber diesen Wert zu bekommen war mit PhantomJS fast unmöglich, da ich denke, dass der Browser nichts fokussieren kann, wenn er keine Bildschirmdarstellung hat. Wer dies benötigt, kann sich CasperJS ansehen, das für einige dieser Anforderungen eine einfache API anbietet.

Answer 2

Wie wäre es mit angular-scenario und dann mit browserTrigger(element, 'click')?

Answer 3

Sie können TriggerHandler, Teil von JQLite verwenden.

ich dies ein Click-Ereignisses auf einer Richtlinie zur Auslösung verwendet ...

element = angular.element("<div myDirective-on='click'></div>"); 
compiled = $compile(element)($rootScope); 
compiled.triggerHandler('click'); 

Voll Beispiel auf diesem Blog-Eintrag: http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html

Answer 4

Ich habe auch Probleme mit diesem hat. Es scheint, als ob click() überhaupt nicht mit PhantomJS für irgendein Element funktioniert, das ich kompiliere. Es gibt immer undefined zurück.

Obwohl es nicht wirklich so gut wie ein tatsächliches klicken, können Sie die Richtlinie der Funktion in zugreifen konnte ng Sie auf einen Klick simulieren durch Isolat Umfang ist:

var element = $compile('<a ng-click="myfunc()">Click me</a>')(scope); 
var isolateScope = element.isolateScope(); 
isolateScope.myfunc(); 
scope.$digest(); 

/* check that things changed ... */ 

Answer 5

Also das ist meine Lösung war, die tatsächlich anhängen Element zum Körper. Da das Grundproblem darin besteht, dass phantomJs keine Ereignisse für Elemente im Speicher auslöst, schien es einfacher zu sein, jedes Element so anzuhängen, dass die Ereignisse real funktionieren.

afterEach(function(){ 
    $('body').empty(); 
}); 

it('should do something when clicked', function(){ 
    element = $compile('<div my-directive></div>')($scope); 
    $('body').append(element); 

    // fire all the watches, so the scope expressions will be evaluated 
    $rootScope.$digest(); 

    $(element).find('.my-input').click(); 
}); 

Answer 6

können Sie verwenden angular-test-runner Bibliothek und Test wird wie folgt aussehen:

const testRunner = require('angular-test-runner'); 

describe('directive',() => { 
    let app; 
    const {expectElement, click} = testRunner.actions; 

    beforeEach(() => { 
     app = testRunner.app(['mod']); 
    }); 

    it("should add class when clicked", function() { 
     const html = app.runHtml('<span class="foo" ui-copy-link-dialog="url"></span>'); 

     html.perform(
      click.in('.foo') 
     ); 

     html.verify(
      expectElement('.foo').toHaveClass('test') 
     ); 
    }); 

});