web-dev-qa-db-ja.com

Angular2コンポーネント：フォーム入力値の変更のテスト

テキスト入力があり、変更を聞いています。

mycomponent.ts

_ngOnInit() {
    this.searchInput = new Control();
    this.searchInput.valueChanges
        .distinctUntilChanged()
        .subscribe(newValue => this.search(newValue))
}
search(query) {
    // do something to search
}
_

mycomponent.html

_<search-box>
    <input type="text" [ngFormControl]="searchInput" >
</search-box>
_

アプリケーションを実行するとすべてが正常に機能しますが、単体テストを行いたいと思います。

これが私が試したことです

mycomponent.spec.ts

_beforeEach(done => {
    createComponent().then(fix => {
        cmpFixture = fix
        mockResponse()
        instance = cmpFixture.componentInstance
        cmpFixture.detectChanges();
        done();
    })
})
describe('on searching on the list', () => {
        let compiled, input
        beforeEach(() => {
            cmpFixture.detectChanges();
            compiled = cmpFixture.debugElement.nativeElement;
            spyOn(instance, 'search').and.callThrough()
            input = compiled.querySelector('search-box > input')
            input.value = 'fake-search-query'
            cmpFixture.detectChanges();
        })
        it('should call the .search() method', () => {
            expect(instance.search).toHaveBeenCalled()
        })
    })
_

.search()メソッドが呼び出されないため、テストは失敗します。

テストで変更を認識させるには、別の方法でvalueを設定する必要があると思いますが、実際にはその方法がわかりません。

誰かアイデアがありますか？

unit-testingangularangular2-formsangular2-componentsangular2-testing
9
Bolza

少し遅れるかもしれませんが、入力要素の値を設定した後、コードがinputイベントをディスパッチしていないようです。

// ...    
input.value = 'fake-search-query';
input.dispatchEvent(new Event('input'));
cmpFixture.detectChanges();
// ...

入力htmlフィールドをAngular 2 test 内から更新する

20
Andrius

FormControlの値の変更をトリガーするのは、次のように簡単です。

cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);
1
kimamula