2016-08-19 12 views
2

を見つけることができない私は2つのコンポーネントがあります。角度RC5 - オーバーライドコンポーネントテンプレートは、入力プロパティ

IfNodeComponent

@Component({ 
    template: '<se-dynamic-condition (questionLinkClicked)="onQuestionClicked" [condition]="node.condition"></se-dynamic-condition>', 
    selector: 'se-node-if' 
}) 
export class NodeIfComponent { 
    @Input() node: NodeProperties; 

    onQuestionClicked(event: IQuestionLinkClickEvent): void { 
     // do stuff 
    } 
} 

をDynamicConditionComponent

@Component({ 
    template: '<p>My original template</p>', 
    selector: 'se-dynamic-condition' 
}) 
export class DynamicConditionComponent { 
    @Input() condition: Condition; 
    @Output() questionLinkClicked = new EventEmitter<IQuestionLinkClickEvent>(); 
} 

私が書いています[condition]バインディングがに接続されていることを確認するテストifノードテンプレート内のコンポーネント。これを行うには、DynamicConditionComponentのテンプレートを単にオーバーライドして{{condition | json}}にするだけです。これにより、JSONを比較し、渡されるべき条件と同じであると主張できます。

RC5の前に、これを達成するためにOverridingTestComponentBuilderを使用しました。しかし、私はRC5にアップグレードして以来、代わりにTestBedを使用するようにそのテストを書き直しています。これはあまりうまくいきません。ここでは、それがどのように見えるかです:

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [NodeIfComponent, DynamicConditionComponent] 
    }); 

    TestBed.overrideComponent(DynamicConditionComponent, { 
     set: { 
      template: '{{condition | json}}' 
     } 
    }); 

    fixture = TestBed.createComponent(NodeIfComponent); 
    component = fixture.componentInstance; 
    element = fixture.nativeElement; 

    component.node = {some:'data'}; 
    fixture.detectChanges(); 
}); 

it('should display a dynamic condition component and pass the condition to it',() => { 
    let dc = element.querySelectorAll('se-dynamic-condition'); 
    expect(dc.length).toEqual(1, 'Dynamic condition component is found'); 
    expect(dc[0].innerHTML).toEqual(JSON.stringify({some:'data'}, null, 2)); 
}); 

しかし、このテストを実行すると、次のエラーで失敗します

Can't bind to 'condition' since it isn't a known property of 'se-dynamic-condition'.

私はDynamicConditionComponent用のテンプレートをオーバーライドしない場合、私は得ることはありませんエラーは、私のテストは失敗します。 IfNodeテンプレートからプロパティー・バインディングを削除すると、エラーは発生しませんが、テストは期待通りに失敗します。エラーメッセージは、se-dynamic-conditionコンポーネントが同じモジュールに登録されていないことを示しています。しかし、それは、私はそれを実行するとコードが動作します。いずれにしても、モジュール定義を使用しないのは単なるテストです。それはTestBed.configureTestingModuleの声明のためのものです。

したがって、テンプレートを上書きすると、コンポーネントに関連付けられた条件プロパティも失われるようです。

私はここで何か根本的に間違っていますか?私はテンプレートの上書きをうまくオーバーライドする例を見てきましたが、入力プロパティを持つテンプレートをオーバーライドしたことがありませんでした(そして、そのプロパティに値を代入しようとしています)。

ご協力いただければ幸いです。回避策の上書き文の入力を再指定するよう

+0

あなたはcomponent.htmlコンテンツを追加してくださいことはできますか? – Supamiu

+0

これで、IfNodeコンポーネント全体を追加し、わかりやすくするためにテンプレートをマージしました。 – Maloric

答えて

2

これは今のところhttps://github.com/angular/angular/pull/10767

によってRC6に固定RC5のバグです。

使用

TestBed.overrideComponent(DynamicConditionComponent, { 
    set: { 
     template: '{{condition|json}}', 
     inputs: ['condition'], 
    } 
}); 
+0

ありがとうございました。免責条項 - ロバートは私と一緒に働いていますが、その答えがその担当者を得ることがわかりました。同じ問題を抱えている他の不幸な魂のためにここに残しなさい。 – Maloric

関連する問題