在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组件

回答

相关问题