En Vanilla JS puede simular una tecla en una entrada haciendo:
testComponent.dispatchEvent(new Event("keyup"))Sin embargo, hacer esto en la prueba de unidad angular-cli o en la consola no activa esta función en mi componente , que responde a eventos clave de la siguiente manera:
@HostListener('keyup', ['$event']) onKeyUp(event: KeyboardEvent) {¿Algunas ideas?
Deberías crear un evento.
const event = new KeyboardEvent('keyup', { bubbles : true, cancelable : true, shiftKey : false });Y luego obtenga la referencia de debugElement usando el selector css
const input = debugElement.query(By.css('#id_of_element'));Y luego la referencia del elemento html nativo del anterior
const inputElement = input.nativeElement;Asigne el valor para el elemento nativo como , ahora el valor del campo de texto contiene 12.
inputElement.value = 12;finalmente enviar el evento clave
inputElement.dispatchEvent(event);activará la función
No olvide agregar la siguiente línea antes de cada uno y asegúrese de definir debugElement
debugElement = fixture.debugElement;Espero eso ayude
Mi caso, de alguna manera, el valor estaba vacío y tuve que definirlo explícitamente:
function generateKeyUpEvent(value: string): KeyboardEvent { const event: KeyboardEvent = new KeyboardEvent('keyup', { bubbles: true, cancelable: true }); Object.defineProperty(event, 'target', { value: { value } }); return event; }y luego envío en mi caso de prueba:
component.input.nativeElement.dispatchEvent(generateKeyUpEvent('a'));