Angular 2 - 測試回調到子組件中的事件

我得到了一個包含1個子組件的組件。是這樣的：Angular 2 - 測試回調到子組件中的事件

<custom-component (customEvent)="foo()"></custom-component>

富是做東西的功能，假設是一個簡單的增量。

我想編寫一個單元測試，以確保自定義事件發出後，實際發生的增量。

是我的嘗試目前在試做的是這樣的：

let oldValue = component.variableThatShouldBeIncremented; 
childComponent.onCustomEvent.emit(); 
expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue);

這並不目前的工作。但如果我在setTimeout中包含期望值，它確實如此。這是有意義的，因爲事件是異步的。

我想擺脫setTimeout。有沒有辦法告訴「等到事件回調已經完成」？

我試着尋找例子，但我只找到了檢查發現特定事件而不是檢查發射特定事件的後果的測試。

編輯：

我走了正確的答案yurzui。代碼應該工作。我通過簡化Q的代碼犯了一個錯誤，省略了實際導致問題的代碼：foo函數。

該函數從服務調用函數，它不是一個簡單的增量。

爲了便於參考，我的實際問題是爲服務的模擬版本創建的間諜沒有在該事件處理程序中註冊對該函數的調用。現在的問題解決了

來源

2016-12-29 Massimo Franciosa

爲什麼寫'（customEvent）=「foo」'而不是'（customEvent）=「foo（）」'？ – yurzui

對不起，這是一個錯字。我編輯了這個問題:) –

它應該工作。你確定你使用變量的正確名稱嗎？舉例來說，如果你有下面的模板

<custom-component (customEvent)="foo()"></custom-component>

那麼你的輸出事件應該是這樣的：

@Output('customEvent') onCustomEvent = new EventEmitter();

，最終測試將被傳遞Plunker Example

it('should work',() => { 
    let oldValue = component.variableThatShouldBeIncremented; 
    childComponent.onCustomEvent.emit(); 
    expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue); 
});

來源

2016-12-29 11:09:17 yurzui

我認爲這個傢伙是訂閱onCustomEvent的地方，並且在回調中增加了變量ThatShouldBeIncremented，並試圖以這種方式測試訂閱。 – Milad

@yurzui是對的。我實際上是在抽象這個問題上犯了一個錯誤。我在「foo」函數中實際做的是調用服務（即注入）。我試圖窺探這個服務的模擬版本，但沒有奏效。我認爲最初的問題是關於同步（這就是爲什麼我以這種方式創建問題），但實際問題是關於沒有註冊函數調用的間諜。 –

底線 - 問題在別的地方，代碼應該可以工作。我會將yurzui的答案標記爲正確的並編輯問題，因此任何其他訪問者在這個問題上磕磕碰碰都不會誤導。 –

你需要使用異步和使用刻度：

在您的測試：

it('should work', fakeAsync(() => { 

     let oldValue = component.variableThatShouldBeIncremented; 
     childComponent.onCustomEvent.emit(); 
     tick(10); // fast forward 10 milliseconds considering that emit would take 10 milliseconds 

      expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue); 
    }));

任何的方式，我認爲你這樣做增量和東西只是爲了看看，如果你的訂閱工作，在這種情況下，處理這一個更好的辦法是：

it('should work', fakeAsync(() => { 

    childComponent.customEvent.subscribe((data)=>{ 
     expect(data).toBe('what ever you expect to be emitted'); 
    }); 
    childComponent.onCustomEvent.emit(); 

}));

如果沒有，忽略這個。

來源

2016-12-29 10:52:00 Milad

嗨米拉德，謝謝你的回答。我現在發現我的問題實際上是不同的，並且與foo函數的實際功能（調用服務而不是增量）有關。通過抽象我隱藏真正問題的問題。 –

Angular 2 - 測試回調到子組件中的事件

回答

相關問題