16

We are using 

TestBed.overrideComponent(CoolComponent, {
    set: {
      template: '<div id="fake-component">i am the fake component</div>',
      selector: 'our-cool-component',
      inputs: [ 'model' ]
    }
  })

to override a component.

The component has a ViewChild which we configure in our ngOnInit method

@Component({
  selector: 'our-cool-component',
  templateUrl: 'cool.component.html'
})
export class CoolComponent implements OnInit, OnDestroy {
  @Input() model: SomeModel
  @ViewChild(CoolChildComponent) coolChildComponent;

  ngOnInit() {
    this.coolChildComponent.doStuff();
  }
}

The CoolComponent in turn lives in a Wrapper component.

When we call fixture.detectChanges() on the Wrapper fixture, this attempts to construct the CoolComponent, but it immediately dies when it calls doStuff() because CoolChildComponent is undefined.

Is there a way to get at the CoolComponent to stub its CoolChildComponent? It doesn't seem like we can get it off the Wrapper because it's only referenced through the template, not as a property of the component.

Ankit Singh
  • 24,525
  • 11
  • 66
  • 89
Joe Taylor
  • 2,145
  • 1
  • 19
  • 35
  • 1
    I just added a bounty, apparently you aren't informed (http://meta.stackoverflow.com/q/333838/3001761) – jonrsharpe Sep 04 '16 at 20:27
  • Has this ever been working? Does it work when you're running it in the browser (or whatever you're targeting)? Is this a testing only problem? – j2L4e Sep 08 '16 at 06:18

1 Answers1

8
ngOnInit() {
  this.coolChildComponent.doStuff();
}

should be 

ngAfterViewInit() {
  this.coolChildComponent.doStuff();
}

because

View child is set before the ngAfterViewInit callback is called.

Ankit Singh
  • 24,525
  • 11
  • 66
  • 89