web-dev-qa-db-ja.com

Angular単体テストの入力値

私はユニットテストのための公式のAngular2ドキュメントを読んでいます（ https://angular.io/docs/ts/latest/guide/testing.html ）が、コンポーネントの入力フィールド値の設定に苦労していますコンポーネントプロパティに反映されている（ngModelを介してバインドされている）。ブラウザでは画面は正常に機能しますが、単体テストではフィールド値を設定できないようです。

私は以下のコードを使用しています。他のテストが正常に機能しているため、「フィクスチャ」は適切に初期化されます。 「comp」はコンポーネントのインスタンスであり、入力フィールドはngModelを介して「user.username」にバインドされます。

it('should update model...', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement;
    field.value = 'someValue'
    field.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(field.textContent).toBe('someValue');
    expect(comp.user.username).toBe('someValue');
  }));

Angular2の私のバージョン："@angular/core": "2.0.0"

angularunit-testingangular2-testing
36
Zyga

入力にはtextContentはなく、値のみがあります。したがって、expect(field.textContent).toBe('someValue');は役に立たない。それはおそらく失敗しているものです。 2番目の期待は通ります。ここに完全なテストがあります。

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: 'peeskillet' };
}

describe('component: TestComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [ TestComponent ]
    });
  });

  it('should be ok', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css('input'));
      let el = input.nativeElement;

      expect(el.value).toBe('peeskillet');

      el.value = 'someValue';
      el.dispatchEvent(new Event('input'));

      expect(fixture.componentInstance.user.username).toBe('someValue');
    });
  }));
});

重要な部分は最初のfixture.whenStable()です。発生するフォームとの非同期セットアップがいくつかあるため、fixture.detectChanges()を実行した後、それが完了するのを待つ必要があります。 fakeAsync()の代わりにasync()を使用している場合、tick()の後にfixture.detectChanges()を呼び出すだけです。

64
Paul Samsotha

追加するだけ

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})
10
ktretyak

次のようにwhenStable.then関数内で期待値/アサートを使用します。

component.label = 'blah';
fixture.detectChanges();

fixture.whenStable().then(() => {
    expect(component.label).toBe('blah');
}
2
Akash Yellappa