Я хочу unit test директиву, которая эмулирует местозаполнитель, где входное значение очищается только при событиях keyup/down.
Как я могу вызвать событие keyup/keydown в angularjs unit test?
Ответ 1
Вам необходимо создать событие программно и запустить его. Сделать это, включая jQuery для модульных тестов, весьма полезно. Например, вы можете написать простую утилиту вроде этого:
var triggerKeyDown = function (element, keyCode) {
var e = $.Event("keydown");
e.which = keyCode;
element.trigger(e);
};
а затем используйте его в unit test следующим образом:
triggerKeyDown(element, 13);
Вы можете увидеть эту технику в действии в проекте http://angular-ui.github.io/bootstrap/ здесь: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/typeahead.spec.js
Отказ от ответственности: давайте уточним здесь: я не сторонник использования jQuery с AngularJS! Я просто говорю, что это полезная утилита манипуляции DOM для написания тестов, взаимодействующих с DOM.
Чтобы сделать вышеуказанный код без jQuery, измените:
$.Event('keydown')
в
angular.element.Event('keydown')
Ответ 2
У меня были проблемы с принятым ответом. Я нашел другую душу.
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);
Рабочий пример можно найти здесь
Ответ 3
У меня что-то вроде этого работает.
element.triggerHandler({type:"keydown", which:keyCode});
Ответ 4
если вы используете angular2, вы можете вызвать любое событие, вызвав dispatchEvent(new Event('mousedown'))
в HTMLElement
экземпляре. например: Протестировано с помощью angular 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();
});
Ответ 5
Недавно мне захотелось протестировать этот HostListener на компоненте (Angular 2):
@HostListener('keydown.esc') onEsc() {
this.componentCloseFn();
};
И после поиска в течение некоторого времени это работает:
..
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'}));
...