Testing OnPush components in Angular 2

If you check out this great @Günter's answer angular 2 change detection and ChangeDetectionStrategy.OnPush then you can work around it by using event handler like:

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

Here's Plunker Example


This problem can be easily solved... https://github.com/angular/angular/issues/12313#issuecomment-298697327

TestBed.configureTestingModule({
  declarations: [ MyComponent ] 
})
.overrideComponent(MyComponent, {
  set: {  changeDetection: ChangeDetectionStrategy.Default  }
})
.compileComponents();

keep in mind this approach may cloak some change detection issues

credits: marchitos


You need to tell angular that you changed input property of the component. In an ideal world, you would replace

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

with

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

Unfortunately, that doesn't work since there is a bug in angular (https://github.com/angular/angular/issues/12313). You can use one of the workarounds described there.