2ウェイバインディングを使用する角4単位テストフォーム。モデルをビューから更新する際の問題

Question

私は奇妙な問題に遭遇しました。私は、テンプレートベースのフォームと双方向バインディングを使ってユニットテストを行っています。ここにテストコードがあります：

describe('Template Forms Input',() => { 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [BrowserModule, FormsModule], 
     declarations: [DummyFormsComponent], 
    }).compileComponents(); 
    }); 

    it('DOM input value changes the component model', fakeAsync(() => { 

    const fixture = TestBed.createComponent(DummyFormsComponent); 
    fixture.detectChanges(); 
    const dummyInputDe = fixture.debugElement.query(By.css('input')); 
    const dummyInputEl = dummyInputDe.nativeElement; 

    dummyInputEl.value = 'Super dummy'; 
    dummyInputEl.dispatchEvent(new Event('input')); 

    tick(); 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css('h2')).nativeElement.textContent).toEqual('Super dummy'); 
    })); 
}); 

@Component({ 
    selector: 'dummy-forms', 
    template: ` 
    <form> 
     <input name="title" [(ngModel)]="model.anotherDummyValue"> 
    </form> 
    <h2>{{model.anotherDummyValue}}</h2> 
    ` 
}) 
class DummyFormsComponent { 

    model = { anotherDummyValue: '', date: '' }; 
} 

私はテストに合格することができません。 h2は常に空です。しかしながら。 <form>タグを削除して、入力内のみをビューに保持するとします。テストは合格です。

私は非同期動作に何か問題があると思います。誰かがアイデアを持っていますか？

Answer 1

コードにコンポーネントインスタンスを追加してみてください。私はあなたのコンポーネントのngOnInitまたはコンストラクタを見ていません。

コンポーネント= fixture.componentInstance;

私たちは通常、あなたのコンポーネントをDECLAR方法beforeEachに

describe('EditComponent',() => { 
    let component: EditComponent; 
    let fixture: ComponentFixture<EditComponent>; 
    let displayText: DebugElement; 
    let editableText: DebugElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
     FormsModule, 
     ReactiveFormsModule 
     ], 
     declarations: [ EditComponent, MockCkeditorComponent ] 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(EditComponent); 
    component = fixture.componentInstance; 
    component.text = 'test input in the editor'; 
    displayText = fixture.debugElement.query(By.css('.row')); 
    editableText = fixture.debugElement.query(By.css('.editor-form')); 
    }); 

    it('should be created',() => { 
    component.ngOnInit(); 
    fixture.detectChanges(); 
    expect(component).toBeTruthy(); 
    }); 
.... 

の下で行います。