web-dev-qa-db-ja.com

ng testとng e2eの本当の違いは何ですか

誰かが私の質問を閉じているのではないかと心配していますが、満足のいく質問を見つけることができませんでした（多分Angular 2+ worldに制限があり、何か間違ったことを理解したため）。

Hello Worldがほとんど行われず、YouTubeデモがほとんど見られなかったことが理解できる限り：

ngテスト：

  • ジャスミン言語を使用してテストを記述します
  • karmaを使用して利用可能な多くのブラウザーでテストをテストします
  • 単体テストまたは統合テストを実行します
  • すべて xxx.compnent.spec.ts実行すると、JUnitに似た最終レポートがブラウザに表示されます

ng e2e：

  • ジャスミン言語を使用してテストを記述します
  • karmaを使用して利用可能な多くのブラウザーでテストをテストします

  • ネストするユーザーイベントを念頭に置いてテストを記述します。

    eg. page.navigateTo();
page.getParagraphText()
  .then(msg => expect(msg).toEqual('Welcome to app!!'))
  .then(msg => expect(msg).toEqual('xxx'))
  .then(done, done.fail);

  • 主にアプリケーションを一種の運用前環境に展開した後、分度器を使用してエンドツーエンドテストを実行します。

  • e2eフォルダーの下のテストがトリガーされ、結果がコマンドラインコンソールに出力されます

理論的には、2番目はエンドツーエンドに特化しており、エンドユーザーが行うフロー全体をシミュレートすることに焦点を当てています。

うまくいけば、ここが正解になるまで、舞台裏で何が起こって本当に違うのかと思っています。私はどちらが良いかを比較したくないが、確かに私はエンドユーザーによって行われたまったく同じアイデアを使用していくつかのテストを作成し、ngテストによってそれをトリガーしたため、どういうわけかいくつかの点を見逃している。

例えば：

...

it('should display the modal when `create Paste` is clicked', () => {

    let createPasteButton = fixture.debugElement.query(By.css("button"));
    //create a spy on the createPaste  method
    spyOn(component,"createPaste").and.callThrough();

    //triggerEventHandler simulates a click event on the button object
    createPasteButton.triggerEventHandler('click',null);

    //spy checks whether the method was called
    expect(component.createPaste).toHaveBeenCalled();
    fixture.detectChanges();
    expect(component.showModal).toBeTruthy("showModal should now be true");
    expect(element.innerHTML).toContain("source-modal");
});

...

「分度器はテストの実行中に待機/スリープ動作を提供する」などのようなものを読みましたが、分度器が最終ユーザーをシミュレートできなかったテストを見ると、この集計値がどこにあるかわかりません。エンドユーザーがまったく同じフローを実行するようにテストをコーディングしている限り、Angular Cli。によって作成されたe2eフォルダーの下で提案されたe2eテストと同じになります。

私の研究が上記のように正しく理解するように私を駆り立てた場合、唯一の本当の違いは、開発者としての私のテストの編成方法です。舞台裏で実際に起こっていることは何もありません。

繰り返しになりますが、これは教訓的な目的のための質問を明確にするものとして理解していただければ幸いです。フレームワークをここで比較する意図はまったくありません。

angularjasmineprotractorangular-clikarma-jasmine
28
Jim C

あなたはすべてを理解する良い道を進んでいます。

  • Ngテスト（Jasmine + Angular Karmaから起動されたユーティリティテストのテスト）：

ジャスミンフレームワークを使用してテストを記述し、テストをスイートとして定義し、テストできる結果を期待していますが、主なことは、実際にカルマランチャーを使用してブラウザーで直接テストを実行することです。これは通常、angularアプリで設定されます。

これは、テストを実行するサーバーが1つあり、それだけであることを意味します。独自の値でテストし、コンポーネントが正しく機能していることを確認します。

目的は、単一の機能（小さなテスト）が副作用なしに意図したとおりに正しく機能していることを、単一のコンポーネント（単体テスト）または複数のモジュール/コンポーネント（統合テスト）で確認することです。

  • Ng E2E（ジャスミン+分度器）：

Protractorは、AngularおよびAngularJSアプリケーション用のエンドツーエンドのテストフレームワークです。Protractorは、実際のブラウザで実行されているアプリケーションに対してテストを実行し、ユーザーと同じように対話します。

ここでは、作成したテストがユーザーとして機能します。これは、ブラウザでアプリケーションが実行されていることを意味し、別のプログラムがアプリケーションに対してテストを実行し、ユーザーの操作をシミュレートします。

これは非常に重要です。なぜなら、それは次の2つのことを意味するからです。

  1. 単体テストと統合テストでは、静的な模擬データを使用してテストを実行しています。
  2. 分度器のテストでは、実際のデータを使用し、HTTP（または使用しているもの）呼び出しを行ってデータを取得し、消費/テストします。

分度器の目的は、アプリケーションの完全な運用上のワークフローを検証することです。たとえば、ログインコンポーネントのユニットテスト、ログインサービスのユニットテスト、モジュール全体の統合テスト、およびいくつかのコンポーネント/サービスに依存するテストが必要な動作を記述します。これが完了したら、アプリケーションの認証プロセス全体を検証する完全なエンドツーエンドテストを後で作成します。

非常に論理的なテストには重要な比率があることに留意してください。

  • 単体テストは、テストの70％を表す必要があります。
  • 統合テストは、テストの20％を占める必要があります。
  • E2Eテストは、テストの10％を表す必要があります。

何故ですか ？多数のコンポーネントのユニットテストを正しく行った場合、エンドツーエンドテストで再度ユニットテストを行う必要はありません。

結論：

  • それらは異なる動作をし、その目的は異なるものをテストすることです（ユニット機能/完全なワークフロー）。
  • これらは補完的です。つまり、ユニット/統合テストのみを実現した場合、ワークフローがAからZまで機能するという保証はありません。また、E2Eテストのみを記述した場合、ワークフローに副作用がないことを確認することはできません。

N.B。：これらの点にも注意してください：

  • Jasmine、Karma、およびProtractorは自由にカスタマイズできるため、実用的ではないコマンドラインではなく、Jenkinsジョブで処理できるXMLファイルで出力できます。
  • はい、両方に同じコードを書いて、同じことを効果的にテストできますが、効率が良く、保守可能なテストコードを書くことを忘れないでください。私が話した比率は非常に重要です。

お役に立てれば。

37
Alex Beugnet