title: Angular 2 unit testing component, mocking ContentChildren
body: <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>