angular2の述語の使い方

Question

angular2を使用してログインページを作成しました。それはuserNameとpasswordという2つの入力フィールドを持っています。そのログインにはボタンがあります。 loginComponentのテストケースを書くときは、buttonを認識するためにpredicateを使用しなければなりませんでした。ここに私のテストケースがあります。

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { LoginComponent } from './login.component'; 


export class LoginComponentTest { 
    constructor(public loginComponent: LoginComponent){ 
    this.loginComponent.logIn('Chathura', '1234'); 

    } 
} 

describe('LoginComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     LoginComponent 
     ], 
    }) 
    }); 

    const fixture = TestBed.createComponent(LoginComponent); 

    const button = fixture.query(predicate: Predicate<DebugElement>, scope?: Function) : DebugElement 

}); 

私は入力値を入力してログインボタンをクリックして次にテストするつもりです。

述語を正しく使用するための正しいチュートリアルが見つかりませんでした。

Answer 1

Predicateを作成する最も簡単な方法は、css,directiveというByの静的メソッドの1つを使用することです。

const button = fixture.debugElement.query(By.css('.the-button')).nativeElement; 

By.css cssセレクタを渡しましょう。 queryの結果はDebugElementとなるため、ネイティブDOM要素とやり取りする場合はnativeElementを取得する必要があります。