[解決済み] Angular2の@Input()を使ったユニットテスト

質問

コンポーネントで @Input() アノテーションを使用するコンポーネントがあります。 openProductPage() メソッドのユニットテストを書こうとしているのですが、ユニットテストをどのようにセットアップすればいいのか少し迷っています。 I ができました。 インスタンス変数をpublicにすることもできますが、そんなことをする必要はないと思います。

どのようにJasmineのテストをセットアップすれば、モックされた製品がインジェクションされ（提供され？ openProductPage() メソッドをテストするにはどうしたらよいでしょうか？

私のコンポーネントです。

import {Component, Input} from "angular2/core";
import {Router} from "angular2/router";

import {Product} from "../models/Product";

@Component({
    selector: "product-thumbnail",
    templateUrl: "app/components/product-thumbnail/product-thumbnail.html"
})

export class ProductThumbnail {
    @Input() private product: Product;


    constructor(private router: Router) {
    }

    public openProductPage() {
        let id: string = this.product.id;
        this.router.navigate([“ProductPage”, {id: id}]);
    }
}

どのように解決するのですか？

いつもはこんな感じです。

describe('ProductThumbnail', ()=> {
  it('should work',
    injectAsync([ TestComponentBuilder ], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TestCmpWrapper).then(rootCmp => {
        let cmpInstance: ProductThumbnail =  
               <ProductThumbnail>rootCmp.debugElement.children[ 0 ].componentInstance;

        expect(cmpInstance.openProductPage()).toBe(/* whatever */)
      });
  }));
}

@Component({
 selector  : 'test-cmp',
 template  : '<product-thumbnail [product]="mockProduct"></product-thumbnail>',
 directives: [ ProductThumbnail ]
})
class TestCmpWrapper { 
    mockProduct = new Product(); //mock your input 
}

なお product の他のフィールドと ProductThumbnail クラス は はこのアプローチでプライベートなものになります (少し冗長になりますが、私が Thierry のアプローチよりこの方法を好む主な理由です)。