Làm cách nào để kích hoạt sự kiện keyup/keydown trong thử nghiệm đơn vị góc cạnh?

Question

Tôi muốn đơn vị kiểm tra một chỉ thị mô phỏng một trình giữ chỗ, nơi giá trị đầu vào chỉ được xóa trên các sự kiện keyup/down.

Answer 1

Bạn cần tạo một sự kiện theo chương trình và kích hoạt sự kiện đó. Để làm như vậy, bao gồm jQuery cho các bài kiểm tra đơn vị là khá hữu ích. Ví dụ, bạn có thể viết một tiện ích đơn giản như thế này:

var triggerKeyDown = function (element, keyCode) { 
    var e = $.Event("keydown"); 
    e.which = keyCode; 
    element.trigger(e); 
    }; 

và sau đó sử dụng nó trong bài kiểm tra đơn vị bạn như vậy:

triggerKeyDown(element, 13); 

Bạn có thể thấy kỹ thuật này trong hành động trong http://angular-ui.github.io/bootstrap/ dự án ở đây: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/typeahead.spec.js

Tuyên bố từ chối: hãy chính xác ở đây: Tôi không ủng hộ việc sử dụng jQuery với AngularJS! Tôi chỉ nói rằng nó là một tiện ích thao tác DOM hữu ích để viết các bài kiểm tra tương tác với DOM.

Để làm cho đoạn code làm việc trên mà không jQuery, thay đổi:

$.Event('keydown') 

tới:

angular.element.Event('keydown') 

Answer 2

Tôi đã có vấn đề với việc sử dụng câu trả lời chấp nhận. Tôi tìm thấy linh hồn khác.

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

dụ làm việc có thể được tìm thấy here

Answer 3

tôi có một cái gì đó giống như làm việc này.

element.triggerHandler({type:"keydown", which:keyCode}); 

Answer 4

nếu bạn đang sử dụng angular2, bạn có thể kích hoạt bất kỳ sự kiện bằng cách gọi dispatchEvent(new Event('mousedown')) trên HTMLElement dụ. ví dụ: Thử nghiệm với góc 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(); 
}); 

Answer 5

thời gian gần đây tôi muốn thử nghiệm HostListener này trên một thành phần (góc 2):

@HostListener('keydown.esc') onEsc() { 
    this.componentCloseFn(); 
    }; 

Và sau khi tìm kiếm một thời gian, điều này đang làm việc :

.. 
nativeElement.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Escape'})); 
...