在Angular 2中測試OnPush組件

我在使用OnPush更改檢測策略測試組件時遇到問題。在Angular 2中測試OnPush組件

測試是這樣

it('should show edit button for featured only for owners',() => { 
    let selector = '.edit-button'; 

    component.isOwner = false; 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css(selector))).toBeFalsy(); 

    component.isOwner = true; 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css(selector))).toBeTruthy(); 
});

如果我使用Default戰略它能正常工作，但OnPush到isOwner的變化不會被調用detectChanges重新描繪。我錯過了什麼嗎？

來源

2016-11-30 altschuler

看看這個主題https://github.com/angular/angular/issues/12313，這裏是你的測試https://plnkr.co/edit/llJG17sBZZUXXBertYPp?p=preview – yurzui

如果你檢查出這個偉大@君特的回答angular 2 change detection and ChangeDetectionStrategy.OnPush那麼你可以解決它通過使用事件處理程序，如：

const fixture = TestBed.overrideComponent(TestComponent, {set: {host: { "(click)": "dummy" }}}).createComponent(TestComponent); 
// write your test 
fixture.debugElement.triggerEventHandler('click', null); 
fixture.detectChanges();

這裏的Plunker Example

來源

2016-11-30 20:42:38 yurzui

我走的解決方案從你的評論。雖然這可能是「更清潔」，但它更麻煩，所以我寧願將黑客包裝在幫手中，希望在未來有更好的解決方案:)謝謝！ – altschuler

你需要告訴角度，你改變輸入組件的屬性。在一個理想的世界中，你將與

component.isOwner = false; 
fixture.changeDetectorRef.markForCheck(); 
fixture.detectChanges();

不幸的是更換

component.isOwner = false; 
fixture.detectChanges();

，不工作，因爲在角（https://github.com/angular/angular/issues/12313）的錯誤。您可以使用其中描述的解決方法之一。

來源

2017-02-01 16:09:45

在Angular 2中測試OnPush組件

回答

相關問題