観客と冗談で角度10迎撃機をテストする
8970 ワード
カルマとジャスミンからおかしなテストを行うときには、多くの理由があります. カルマとジャスミンより速く走る冗談 スナップショットテストをサポート 平行でのジェスト走力テスト テストのブラウザを必要としない より多く... しかし、欠落しているのは、特に角のHTTPインターセプターをテストして、Jestで角度単位テストを書く方法の例です.
この記事の目的のために、我々は、あなたにはすでに観戦者と冗談でセットされる角度プロジェクトがあると仮定します.そうでなければ、これらのライブラリを使って角度を設定する方法についてのリンクを提供します.
このポストの焦点がカルマとジャスミンから角度をJestに変える方法に関してでない間、以下はこの変換をする方法のリソースのリストです.また、私の使用することができますGithub project テンプレートとして.私は、あなたが他のテストフレームワークを使用するのに用いられるならば、JESTが少し奇妙であるかもしれないと言います. How to Set Up Angular Unit Testing with Jest Testing Angular applications with Jest and Spectator How I do configure Jest to test my Angular 8 Project https://github.com/thymikee/jest-preset-angular Unit Testing Angular with Jest Migrate your Angular library to Jest
観客は、いくつかの行に角度ユニットテストを設定するための粗いboilerplateコードを削減する素晴らしいライブラリです.それは、それが提供する値のために絶対価値があるいくつかの風変わりを持っています. https://github.com/ngneat/spectator Spectator V4: A Powerful Tool to Simplify Your Angular Tests! Spectator for Angular or: How I Learned to Stop Worrying and Love the Spec
観客と冗談を一緒に使用するときに留意する主なことは、スペクターの輸入は
'@ ngneat/spectator/jest 'からインポートします.
以下は最後のdevdependenciesセクションです
{ }
…
"dev依存性"
@角devkit/ビルド角度", "
"@角/cli ":"~ 9.1.7 "
@角/コンパイラCLI ", "~ 9.1.9 "
@ ngneat/spectator ", "^ 5.13.3 "
「@ type/jest」:"^ 26.0.13 "
「@ type/node」:"^ 111.1 "
"codelyzer ":"^ 5.1.2 "
"jest ":"^ 26.4.2 "
"jestプリセットアングル", "^ 8.3.1 "
分度器", "
"tsノード":"~ 8.3.0 "
"tslint ":"~ 6.1.0 "
"typescript ":"~ 3.8.3 "
｝
｝
この例では、コンソールにhttperrorresponseをログ出力するHTTPインターセプターをテストします.
@ angle/coreからのインポート{ injectable };
インポート
HttpRequest ,
httphandler ,
HttpEvent ,
HttpRequeptor , HTTperrorResponse , HttpResponse
@角/common/http 'から
' rxjs 'からインポート可能です.
インポート{ CatchError、';RXJS/演算子から
/*
* HttpRequestを傍受し、3 xx +のHTTPレスポンスを記録します.
*将来的には、このステータスコードに基づいて条件付きのリトライを行うことができます.
*
*/
@ injectable (' root dedin :' root ')
エクスポートクラスHTPPERRRORIRPATORを使用します
コンストラクタ() { }
インターセプト( REQ : HttpRequest , next : httphandler ):オブザーバブル
戻ります.ハンドル.パイプ( tap (())>{ }})
エラー(エラー)>{
を返します.
を返します.
コンソール.ログ(' status :' + error +'\nmessage :'+ errors . error . message );
その他
コンソール.ログ(エラー);
｝
｝
エラー(エラー);
))>
);
｝
｝
このコードは、アプリケーションからのHttpRequestをインターセプトし、HttpRelRelativeが返されたときに応答をコンソールに記録します.httpHandlerはリクエストを実行するために使用されます
この場合、httperrorResponseをキャッチし、エラーが発生しないHTTPreponseを通過させます.応答が検出されると、エラーメッセージを検査し、コンソールにログ出力できます.この場合、HttpResponseのカスタムボディを期待しています.
この単位テストでは、2 xxの応答が通過し、エラー応答がスローされることを確認します.より高度なテストのために、コンソールをモックアップすることができます、そして、我々はコンソールをチェックすることができます.ログが呼び出されました.これはこの記事の範囲外です.
からインポートします.HTTPエラー.インターセプター;'@ ngneat/spectator/jest 'からインポートします.「@角/コア/テスト」から{ { } }をインポートします' rxjs 'からのthrowerrorをインポートします;'@角/common/http 'からインポートされます説明します(' HTTPlrorInterceptor ', ()>>{ Spectator : SpectatorHTTP ( httperrorIntereptor );; const createHTTP HTTP = createHTPfactory ({ service : httperrorIntereptor });それぞれの(()>>{ spectator = createhttp ();)の前に;test (' http error ', async (()>> { const mockhandler ={ handle : jest . fn ()>> throwerror ( new httperrorresponse ({ status : 500 , error :{ message )"これはエラー'} );見物人.サービスIntercept (新しいHttpRequest < unknown >( httpmethod . get ,/thing '), mockhandler )subscribe ("response )=> {失敗(予期しないエラー);}(エラー=>{ expect ( error )));test (' http success ', async (())>{ const mockhandler ={ handle : jest . fn ()>> ( new httpresponse ( { status : 500 }))>;見物人.サービスIntercept (新しいHttpRequest < unknown >( httpmethod . get ,/thing '), mockhandler )subscribe ("response "=>{ expect ( response ))"tobetruty ();(エラー=>{ fail ('予期した));;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
ここでのキーは、1)ハンドラーがどのようにmockkedされているか、2)と、インターセプターレスポンスをテストする方法です.
インターセプターをテストするときに最初に混乱することは、HttpHandlerをモックアップする方法です.ジャスミンが除去されるので
Executions抽象クラスHTTPHandler { abstractハンドル( Req : HttpRequest )":観測可能な< httpevent < any >>;}
これは簡単に刻まれている
エラーケースでは、HttpRelRailResponseをスローし、レスポンス本体/エラーのカスタムオブジェクトを作成する方法を指示します.
ハッピーパスケースでは、以下のようになります.
const mockhandler ={ handle : jest . fn (()>>of ( new httpreponse ({ status : 200 }))};
HttpHandlerがモンクされたので、インターセプターがどうやってテストするのでしょうか?ここでのキーは、
見物人.サービスインターセプト(新しいHttpRequest < unknownN >( httpmethod . get , '/thing '), mockhandler ).subscribe ("response "=>{ expect ( response ))"tobetruty ();(エラー=>{ fail ('予期しました));
この場合、インターセプターはレスポンスを正常に通過し、エラーをスローしなかったことをチェックします.
いくつかのコードは、観客を使用していることに注意してください
また、このインターセプターが実際にレスポンスを修正していないことに注意してください.これは、インターセプターのテストを開始するための基本的なフレームワークです.を使用している場合、httpspondを使用して
角度10で観客と冗談を使用して非常に強力な組み合わせです.トリックのいずれかの冗談と観客の完全な理解を持っているかを描画する例の準備のソースがあります.私は、この記事では、角のHTTPInterceptorをテストするために観客とのコンサートでジェストを使用する方法の大まかな理解を提供することを願っています.ここのキーは 使用 テストのための購読ラムダへの入力変数の追加 Githubソース:https://github.com/djchi82/angular-jest-spectator-interceptor-test
角度、観客、冗談を設定する
この記事の目的のために、我々は、あなたにはすでに観戦者と冗談でセットされる角度プロジェクトがあると仮定します.そうでなければ、これらのライブラリを使って角度を設定する方法についてのリンクを提供します.
冗談
このポストの焦点がカルマとジャスミンから角度をJestに変える方法に関してでない間、以下はこの変換をする方法のリソースのリストです.また、私の使用することができますGithub project テンプレートとして.私は、あなたが他のテストフレームワークを使用するのに用いられるならば、JESTが少し奇妙であるかもしれないと言います.
見物人
観客は、いくつかの行に角度ユニットテストを設定するための粗いboilerplateコードを削減する素晴らしいライブラリです.それは、それが提供する値のために絶対価値があるいくつかの風変わりを持っています.
2 , 3のもの
観客と冗談を一緒に使用するときに留意する主なことは、スペクターの輸入は
@ngneat/spectator/jest パッケージ.'@ ngneat/spectator/jest 'からインポートします.
以下は最後のdevdependenciesセクションです
package.json .{ }
…
"dev依存性"
@角devkit/ビルド角度", "
"@角/cli ":"~ 9.1.7 "
@角/コンパイラCLI ", "~ 9.1.9 "
@ ngneat/spectator ", "^ 5.13.3 "
「@ type/jest」:"^ 26.0.13 "
「@ type/node」:"^ 111.1 "
"codelyzer ":"^ 5.1.2 "
"jest ":"^ 26.4.2 "
"jestプリセットアングル", "^ 8.3.1 "
分度器", "
"tsノード":"~ 8.3.0 "
"tslint ":"~ 6.1.0 "
"typescript ":"~ 3.8.3 "
｝
｝
アングル10インターセプターユニットテスト
この例では、コンソールにhttperrorresponseをログ出力するHTTPインターセプターをテストします.
@ angle/coreからのインポート{ injectable };
インポート
HttpRequest ,
httphandler ,
HttpEvent ,
HttpRequeptor , HTTperrorResponse , HttpResponse
@角/common/http 'から
' rxjs 'からインポート可能です.
インポート{ CatchError、';RXJS/演算子から
/*
* HttpRequestを傍受し、3 xx +のHTTPレスポンスを記録します.
*将来的には、このステータスコードに基づいて条件付きのリトライを行うことができます.
*
*/
@ injectable (' root dedin :' root ')
エクスポートクラスHTPPERRRORIRPATORを使用します
コンストラクタ() { }
インターセプト( REQ : HttpRequest , next : httphandler ):オブザーバブル
戻ります.ハンドル.パイプ( tap (())>{ }})
エラー(エラー)>{
を返します.
を返します.
コンソール.ログ(' status :' + error +'\nmessage :'+ errors . error . message );
その他
コンソール.ログ(エラー);
｝
｝
エラー(エラー);
))>
);
｝
｝
このコードは、アプリケーションからのHttpRequestをインターセプトし、HttpRelRelativeが返されたときに応答をコンソールに記録します.httpHandlerはリクエストを実行するために使用されます
next.handle . 次に、パイプを作成しますtap 処理の応答注:タップはrxjs pipe function これは、パイプ内の実際のデータを変更せずにデータを検査することができます.この場合、httperrorResponseをキャッチし、エラーが発生しないHTTPreponseを通過させます.応答が検出されると、エラーメッセージを検査し、コンソールにログ出力できます.この場合、HttpResponseのカスタムボディを期待しています.
単体テスト
この単位テストでは、2 xxの応答が通過し、エラー応答がスローされることを確認します.より高度なテストのために、コンソールをモックアップすることができます、そして、我々はコンソールをチェックすることができます.ログが呼び出されました.これはこの記事の範囲外です.
からインポートします.HTTPエラー.インターセプター;'@ ngneat/spectator/jest 'からインポートします.「@角/コア/テスト」から{ { } }をインポートします' rxjs 'からのthrowerrorをインポートします;'@角/common/http 'からインポートされます説明します(' HTTPlrorInterceptor ', ()>>{ Spectator : SpectatorHTTP ( httperrorIntereptor );; const createHTTP HTTP = createHTPfactory ({ service : httperrorIntereptor });それぞれの(()>>{ spectator = createhttp ();)の前に;test (' http error ', async (()>> { const mockhandler ={ handle : jest . fn ()>> throwerror ( new httperrorresponse ({ status : 500 , error :{ message )"これはエラー'} );見物人.サービスIntercept (新しいHttpRequest < unknown >( httpmethod . get ,/thing '), mockhandler )subscribe ("response )=> {失敗(予期しないエラー);}(エラー=>{ expect ( error )));test (' http success ', async (())>{ const mockhandler ={ handle : jest . fn ()>> ( new httpresponse ( { status : 500 }))>;見物人.サービスIntercept (新しいHttpRequest < unknown >( httpmethod . get ,/thing '), mockhandler )subscribe ("response "=>{ expect ( response ))"tobetruty ();(エラー=>{ fail ('予期した));;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
ここでのキーは、1)ハンドラーがどのようにmockkedされているか、2)と、インターセプターレスポンスをテストする方法です.
HttpHandlerのモッキング
インターセプターをテストするときに最初に混乱することは、HttpHandlerをモックアップする方法です.ジャスミンが除去されるので
mock and SpyOn テーブルから離れている.あなたはそれに気づくかもしれないjest.mock が存在するが、期待通りに機能しない.これは私が言及したそれらの小さな冗談の1つですjest.mock はパッケージではなくオブジェクトをモックするために使用されます.この場合、httpHandlerインターフェイスのようなオブジェクトをビルドし、メソッドを期待します.以下はhttphandlerインタフェースです.ご覧の通り、1つのメソッドしかありません.Executions抽象クラスHTTPHandler { abstractハンドル( Req : HttpRequest )":観測可能な< httpevent < any >>;}
これは簡単に刻まれている
jest.fn()const mockhandler ={ handle : jest . fn (()>) throwerror ( new httperrorresponse ({ status : 500 , error :{ message )"これはエラー'} );エラーケースでは、HttpRelRailResponseをスローし、レスポンス本体/エラーのカスタムオブジェクトを作成する方法を指示します.
ハッピーパスケースでは、以下のようになります.
const mockhandler ={ handle : jest . fn (()>>of ( new httpreponse ({ status : 200 }))};
インターセプターの応答のテスト
HttpHandlerがモンクされたので、インターセプターがどうやってテストするのでしょうか?ここでのキーは、
.subscribe ラムダ.見物人.サービスインターセプト(新しいHttpRequest < unknownN >( httpmethod . get , '/thing '), mockhandler ).subscribe ("response "=>{ expect ( response ))"tobetruty ();(エラー=>{ fail ('予期しました));
この場合、インターセプターはレスポンスを正常に通過し、エラーをスローしなかったことをチェックします.
観客ビットとユニットテスト
いくつかのコードは、観客を使用していることに注意してください
createHttpFactory の代わりにcreateServiceFactory . このシナリオでは、両方ともまったく同じ働きをします.使っているcreateHttpFactory HTTPリトライの追加を期待して.また、このインターセプターが実際にレスポンスを修正していないことに注意してください.これは、インターセプターのテストを開始するための基本的なフレームワークです.を使用している場合、httpspondを使用して
map , Mocked HttpHandlerを使って入力を指定し、インターセプター呼び出しの購読部に出力をテストできます.概要
角度10で観客と冗談を使用して非常に強力な組み合わせです.トリックのいずれかの冗談と観客の完全な理解を持っているかを描画する例の準備のソースがあります.私は、この記事では、角のHTTPInterceptorをテストするために観客とのコンサートでジェストを使用する方法の大まかな理解を提供することを願っています.ここのキーは
jest.fn() HTTPHandlerの機能を模擬するにはReference
この問題について(観客と冗談で角度10迎撃機をテストする), 我々は、より多くの情報をここで見つけました https://dev.to/ryboflavin42/testing-angular-10-interceptors-with-spectator-and-jest-3f4iテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol