Ich möchte eine Direktive testen, die einen Platzhalter emuliert, wobei der Eingabewert nur bei Keyup/Down-Ereignissen gelöscht wird.
Sie müssen ein Ereignis programmatisch erstellen und auslösen. Es ist sehr hilfreich, jQuery für Komponententests zu verwenden. Beispielsweise könnten Sie ein einfaches Dienstprogramm wie folgt schreiben:
var triggerKeyDown = function (element, keyCode) {
var e = $.Event("keydown");
e.which = keyCode;
element.trigger(e);
};
und verwenden Sie es dann in Ihrem Gerätetest wie folgt:
triggerKeyDown(element, 13);
Sie können diese Technik in Aktion im http://angular-ui.github.io/bootstrap/ project hier sehen: https://github.com/angular-ui/bootstrap/blob/master/ src/typeahead/test/typeahead.spec.js
Disclaimer: Lassen Sie uns hier genau sagen: Ich befürworte nicht die Verwendung von jQuery mit AngularJS! Ich sage nur, dass es ein nützliches DOM-Manipulationsdienstprogramm ist, um Tests zu schreiben, die mit dem DOM interagieren.
Damit der obige Code without jQuery funktioniert, ändern Sie:
$.Event('keydown')
zu:
angular.element.Event('keydown')
Ich hatte Probleme mit der akzeptierten Antwort. Ich habe andere Lösung gefunden.
var e = new window.KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
shiftKey: true
});
delete e.keyCode;
Object.defineProperty(e, 'keyCode', {'value': 27});
$document[0].dispatchEvent(e);
Arbeitsbeispiel finden Sie hier
Ich habe so etwas in der Arbeit.
element.triggerHandler({type:"keydown", which:keyCode});
wenn Sie angle2 verwenden, können Sie jedes Ereignis auslösen, indem Sie dispatchEvent(new Event('mousedown'))
für die Variable HTMLElement
aufrufen. Zum Beispiel: Getestet mit Winkel 2.rc1
it('should ...', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<any>) => {
fixture.detectChanges();
let com = fixture.componentInstance;
/* query your component to select element*/
let div:HTMLElement = fixture.nativeElement.querySelector('div');
/* If you want to test @output you can subscribe to its event*/
com.resizeTest.subscribe((x:any)=>{
expect(x).toBe('someValue');
});
/* If you want to test some component internal you can register an event listener*/
div.addEventListener('click',(x)=>{
expect(x).toBe('someOtherValue');
});
/* if you want to trigger an event on selected HTMLElement*/
div.dispatchEvent(new Event('mousedown'));
/* For click events you can use this short form*/
div.click();
fixture.detectChanges();
});
Ich wollte diesen HostListener kürzlich an einer Komponente testen (Angular 2):
@HostListener('keydown.esc') onEsc() {
this.componentCloseFn();
};
Und nach einiger Zeit funktioniert das:
..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...