Angular 2 unit testing component, mocking ContentChildren
<p>I am implementing a wizard component in Angular 2 RC4, and now I am trying to write som unit tests. Unit testing in Angular 2 is starting to get well documented, but I simply cannot find out how to <strong>mock the result of a content query</strong> in the component.</p>

<p>The app has 2 components (in addition to the app component), WizardComponent and WizardStepComponent. The app component (app.ts) defines the wizard and the steps in its template:</p>

<pre><code> &lt;div&gt;
  &lt;fa-wizard&gt;
    &lt;fa-wizard-step stepTitle="First step"&gt;step 1 content&lt;/fa-wizard-step&gt;
    &lt;fa-wizard-step stepTitle="Second step"&gt;step 2 content&lt;/fa-wizard-step&gt;
    &lt;fa-wizard-step stepTitle="Third step"&gt;step 3 content&lt;/fa-wizard-step&gt;
  &lt;/fa-wizard&gt;
&lt;/div&gt;
</code></pre>

<p>The WizardComponent (wizard-component.ts) gets a reference to the steps by using a ContentChildren query.</p>

<pre><code>@Component({
selector: 'fa-wizard',
template: `&lt;div *ngFor="let step of steps"&gt;
            &lt;ng-content&gt;&lt;/ng-content&gt;
          &lt;/div&gt;
          &lt;div&gt;&lt;button (click)="cycleSteps()"&gt;Cycle steps&lt;/button&gt;&lt;/div&gt;`

})
export class WizardComponent implements AfterContentInit {
    @ContentChildren(WizardStepComponent) steps: QueryList&lt;WizardStepComponent&gt;;
....
}
</code></pre>

<p>The problem is how to mock the steps variable in the unit test:</p>

<pre><code>describe('Wizard component', () =&gt; {
  it('should set first step active on init', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) =&gt; {
    return tcb
    .createAsync(WizardComponent)
    .then( (fixture) =&gt;{
        let nativeElement = fixture.nativeElement;
        let testComponent: WizardComponent = fixture.componentInstance;

        //how to initialize testComponent.steps with mock data?

        fixture.detectChanges();

        expect(fixture.componentInstance.steps[0].active).toBe(true);
    });
  })));
});
</code></pre>

<p>I have created a <a href="http://plnkr.co/edit/xwDLZbGJP5TbkwO7RX9n?p=preview" rel="noreferrer">plunker</a> implementing a very simple wizard demonstrating the problem. The wizard-component.spec.ts file contains the unit test.</p>

<p>If anyone can point me in the right direction, I would greatly appreciate it.</p>