angular2ユニットテストパスデータ入力にスペック

Question

から私はこの

export class Component { 

    private selectedFieldType: string; 
    private enableAddCheck: boolean = false; 

    @Input('itemX') item; 
} 

ようなコンポーネントを宣言していると私は2つのこの

Field : <input [(ngModel)]="item.fieldLabel" type="text" class="input-bars"> 

だからユニットテストを作成しているように結合するためのHTMLを有しますこのようなコードでこのような2方向バインディングを確認する

beforeEach(async(() => { 


    // refine the test module by declaring the test component 
    TestBed.configureTestingModule({ 
     imports: [ FormsModule ], 
     declarations: [Component , DND_DIRECTIVES], 
     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 
     providers: [ 
     { provide: ComponentFixtureAutoDetect, useValue: true }, 
     DND_PROVIDERS ] 
    }) 

    // create component and test fixture 
    fixture = TestBed.createComponent(Component); 

    // get test component from the fixture 
    comp = fixture.componentInstance; 



    })); 

    it('To check fieldLabel to way binding from inputbox to data',() => { 

    comp.item = { 
     fieldLabel: 'text' 
    }; 


    fixture.detectChanges(); 

    let fieldTypeInput: HTMLInputElement; 

    const input = fixture.debugElement.query(By.css('input')); 

    fieldTypeInput = input[0].nativeElement; 
    fieldTypeInput.value = 'field'; 

    fixture.detectChanges(); 

    expect(comp.item.fieldLabel).toBe('field'); 

    }); 

しかし、 'fieldLabel'には未定義のエラーがあります私。

ユニットテストでコンポーネントの@inputにデータを渡す方法はありますか？

Answer 1

// refine the test module by declaring the test component 
    TestBed.configureTestingModule({ 
     imports: [ FormsModule ], 
     declarations: [Component , DND_DIRECTIVES], 
     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 
     providers: [ 
     DND_PROVIDERS ] 
    }) 

エラーはComponentFixtureAutoDetectにありました。それはプロバイダとして言及されているため、データがインスタンスを通過するときに変更を検出しません。 DetectChanges（）関数を使用して手動で変更を検出する必要があります