を見つけることができない私は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
の声明のためのものです。
したがって、テンプレートを上書きすると、コンポーネントに関連付けられた条件プロパティも失われるようです。
私はここで何か根本的に間違っていますか?私はテンプレートの上書きをうまくオーバーライドする例を見てきましたが、入力プロパティを持つテンプレートをオーバーライドしたことがありませんでした(そして、そのプロパティに値を代入しようとしています)。
ご協力いただければ幸いです。回避策の上書き文の入力を再指定するよう
あなたはcomponent.htmlコンテンツを追加してくださいことはできますか? – Supamiu
これで、IfNodeコンポーネント全体を追加し、わかりやすくするためにテンプレートをマージしました。 – Maloric