[解決済み] Angularのクリックイベントのユニットテスト

質問

Angular2アプリにユニットテストを追加しようとしています。コンポーネントの1つで、ボタンに (click) ハンドラを持つボタンがあります。ユーザーがボタンをクリックすると、関数が呼び出されます。 .ts クラスファイルで定義された関数が呼び出されます。この関数は、ボタンが押されたことを示すメッセージを console.log ウィンドウに表示します。私の現在のテストコードでは console.log メッセージの印刷をテストしています。

describe('Component: ComponentToBeTested', () => {
    var component: ComponentToBeTested;

    beforeEach(() => {
        component = new ComponentToBeTested();
        spyOn(console, 'log');
    });

    it('should call onEditButtonClick() and print console.log', () => {
        component.onEditButtonClick();
        expect(console.log).toHaveBeenCalledWith('Edit button has been clicked!);
    });
});

しかし、これはコントローラクラスをテストするだけで、HTMLをテストするわけではありません。私は、ロギングが起こることをテストしたいだけではありません。 onEditButtonClick が呼び出されたときにロギングが行われることをテストしたいだけではありません。 onEditButtonClick が呼び出されることをテストしたいのです。どうすればよいでしょうか？

どのように解決するのですか？

私の目的は、ユーザーが編集ボタンをクリックしたときに 'onEditButtonClick' が呼び出されるかどうかを確認することで、 console.log が出力されることだけを確認することではありません。

まず、Angularの TestBed . この方法で、実際にボタンを掴んでクリックすることができます。これから行うのは、モジュールを設定することです。 @NgModule と同じように、テスト環境用に

import { TestBed, async, ComponentFixture } from '@angular/core/testing';

describe('', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [ TestComponent ],
      providers: [  ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
    });
  }));
});

次に、スパイする必要があるのは onEditButtonClick メソッドをスパイし、ボタンをクリックし、そのメソッドが呼び出されたことを確認します。

it('should', async(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();

  fixture.whenStable().then(() => {
    expect(component.onEditButtonClick).toHaveBeenCalled();
  });
}));

ここでは async テストを実行する必要があります。 fixture.whenStable()

更新

現在では fakeAsync/tick コンボではなく async/whenStable コンボとは異なります。後者はXHRの呼び出しがある場合に使用されるべきです。 fakeAsync はそれをサポートしないからです。ですから、上記のコードの代わりにリファクタリングすると、次のようになります。

it('should', fakeAsync(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  tick();
  expect(component.onEditButtonClick).toHaveBeenCalled();

}));

を忘れずにインポートしてください。 fakeAsync と tick .

こちらもご覧ください。

• テスト用ドキュメント
• AngularのテストにおけるfakeAsyncとasyncの違いは何ですか？