Angular 2 Appテスト、html要素にアクセスして操作する方法は？

Question

私はAngular 2 Frontendをテストしていますが、私はサイト（https://kendaleiv.com/angular-2-component-testing-template-using-testbed/）でng-test（角コアテスト）TestBedを使っている人を見つけました。これは本当に基本的な例です。 。

私のアプリケーションには入力フォーム要素があり、入力信号がフォーム要素から送信されると、それはInfoBox要素に結果セットが表示されます。 私がしたいのは、TestBedから要素フォームを取得し、それを検索して入力ボックスからの応答を取得するStringを提供することです。 （テスト3）

1）要素（フォームとインフォボックス）を取得するにはどうすればよいですか？

2）インフォボックスから信号を処理するにはどうすればよいですか？

3）シグナルが処理されたら、インフォボックスエレメントから結果セットを取得するにはどうすればよいですか？

私が使用しているコードサンプルは、 'ng test'コマンドで実行してChromeを起動し、最初の2つのテストが動作しています。

describe('AppComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AgsResultsComponent, 
     AppComponent, 
     FormularComponent, 
     FormularAutocompleteComponent, 
     InfoBoxComponent, 
     InfoBoxAgencyDetailsComponent, 
     InfoBoxAgencyItemComponent 
     ], 
     providers: [ConfigurationService], 
     schemas: [NO_ERRORS_SCHEMA] 
    }).compileComponents(); 
    })); 

    // Test 1 
    it('should create the app', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    const app = fixture.debugElement.componentInstance; 
    console.log(app); 
    expect(app).toBeTruthy(); 
    })); 

    // Test 2 
    it('should render agsheading in a h1 tag', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges(); 
    const compiled = fixture.debugElement.nativeElement; 
    expect(compiled.querySelector('h1').textContent).toContain('Agentursuche'); 
    })); 

    // Test 3 
    it('should execute a search using Form', async(() => { 
    const formular = TestBed.createComponent(FormularComponent); 
    const infoBox = TestBed.createComponent(InfoBoxComponent); 
    formular.detectChanges(); 
    infoBox.detectChanges(); 
    const formularCompiled = formular.debugElement.nativeElement; 
    const infoBoxCompiled = infoBox.debugElement.nativeElement; 
    formularCompiled.sendInput('Just a Test'); 
    expect(infoBoxCompiled).toContain(something); 
    })); 

}); 

Answer 1

あなたが各テストで同じことを書いて避けるよう、コンポーネントを作成し、ローカル変数に格納する別のbeforeEachメソッドを使用する必要があります。あなたはそれとディスパッチイベントに値を設定することができることをしたら

const inputDebugElement = formular.debugElement.query(By.css('input')); 
const inputHtmlElement = inputDebugElement.nativeElement as HTMLInputElement; 

：1デバッグ要素にクエリメソッドを使用することができますコンポーネントからHTML要素を取得するために

inputHtmlElement.value = 'foo'; 
inputHtmlElement.dispatchEvent(new Event('input')); 

変更検出をトリガーするには、フィクスチャでdetectChanges（）を呼び出してから、それが安定するのを待つ必要があることを覚えておいてください.stable（）を呼び出すか、fakeAsyncテスト内でtick

Angularアプリケーションのテスト方法をよりよく理解するには、official testing guidelinesを読むことをおすすめします。