AngularJSの単体テスト：サービス、コントローラー、プロバイダー-jsチュートリアル-php.cn

キーテイクアウト

テストサービス

テストプロバイダー

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJSの単体テスト：サービス、コントローラー、プロバイダー

Lisa Kudrow

Feb 20, 2025 am 08:31 AM

AngularJSの単体テスト：サービス、コントローラー、プロバイダー

キーテイクアウト

AngularJSは、依存関係噴射を使用してユニットテストを容易にし、サービス、コントローラー、プロバイダーなどのさまざまなコンポーネントにアプリケーションのモジュール化を可能にし、テスト可能性を念頭に置いて設計されています。 AngularJSのサービスは、中央の場所で再利用可能なロジックを定義する一般的なコンポーネントです。サービスをテストするとき、他のサービスにある依存関係は、モックオブジェクトに置き換える必要があります。 AngularJのコントローラーは注射できませんが、ルートロードまたはNGコントローラーディレクティブがコンパイルされたときに自動的にインスタンス化されます。コントローラーをテストするときは、手動でインスタンス化する必要があり、ビューがコンパイルされた後にスコープに追加されるオブジェクトを手動で作成してコントローラーに追加する必要があります。 AngularJのプロバイダーは、アプリケーションの開始前に作成する必要があるアプリケーション全体の構成のAPIを公開するために使用されます。プロバイダーをテストするには、モジュールをロードして準備する必要があります。依存関係をock笑する必要があり、コールバックをモジュールブロックに渡す必要があります。 AngularJSでの単位テストは難しい場合がありますが、アプリケーションの正確性を保証するため、時間の価値があります。 AngularJSにより、フレームワークを使用して記述された単位テストコードが簡単になります。
単体テストの定義に従って、テスト中のシステムは単独でテストする必要があります。したがって、システムが必要とする外部オブジェクトは、モックオブジェクトに置き換える必要があります。名前自体が言うように、模擬オブジェクトは実際のタスクを実行しません。むしろ、テスト中のシステムの期待を満たすために使用されます。モッキングの復習が必要な場合は、以前の記事の1つを参照してください。AngularJSテストでのモッキング依存関係を参照してください。この記事では、AngularJSのテストサービス、コントローラー、プロバイダーに関する一連のヒントを共有します。コードスニペットはジャスミンを使用して記述されており、Karma Test Runnerで実行できます。この記事で使用されているコードをGitHub Repoからダウンロードできます。ここでは、テストの実行に関する指示も見つけることができます。
テストサービス

サービスは、AngularJSアプリケーションで最も一般的なコンポーネントの1つです。それらは、中央の場所で再利用可能なロジックを定義する方法を提供し、同じロジックを何度も繰り返す必要がないようにします。サービスのシングルトンの性質により、複数のコントローラー、ディレクティブ、さらには他のサービスで同じデータを共有することができます。
サービスは、そのタスクを実行するために他のサービスのセットに依存できます。たとえば、Aという名前のサービスは、そのタスクを実行するためにサービスB、C、Dに依存します。サービスAのテスト中、依存関係B、C、およびDをモックに置き換える必要があります。
$ Rootscopeや$ Parseなどの特定のユーティリティサービスを除き、通常、すべての依存関係をock笑します。 Jasmine.createspy（）を使用して、テストで検査する必要がある方法（ジャスミンでは、模擬はスパイと呼ばれます）でスパイを作成します。
次のサービスを考えてみましょう

このサービスには1つの方法（showdialog）しかありません。この方法が受信する入力の値に応じて、依存関係（$ windowまたはmodalsvc）として注入される2つのサービスの1つを呼び出します。
```
angular.module('services', [])
 .service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){
 this.showDialog = function(message, title){
 if(title){
 modalSvc.showModalDialog({
 title: title,
 message: message
 });
 } else {
 $window.alert(message);
 }
 };
 }]);
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これで、ShowDialogメソッドの動作をテストできます。メソッドのために書くことができる2つのテストケースは次のとおりです。

タイトルがパラメーターが渡されない場合、アラートを呼び出します

タイトルパラメーターとメッセージパラメーターの両方が存在する場合、showmodaldialogを呼び出します
```
var mockWindow, mockModalSvc, sampleSvcObj;
beforeEach(function(){
 module(function($provide){
 $provide.service('$window', function(){
 this.alert= jasmine.createSpy('alert');
 });
 $provide.service('modalSvc', function(){
 this.showModalDialog = jasmine.createSpy('showModalDialog');
 });
 });
 module('services');
});

beforeEach(inject(function($window, modalSvc, sampleSvc){
 mockWindow=$window;
 mockModalSvc=modalSvc;
 sampleSvcObj=sampleSvc;
}));
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
次のスニペットには、これらのテストが表示されます
- この方法にはテストするロジックはあまりありませんが、通常のWebアプリのサービスには通常、多くの機能が含まれています。このヒントに示されている手法を使用して、サービスへの参照をock笑して取得できます。サービステストでは、サービスの作成中に想定されていたあらゆるシナリオをカバーする必要があります。
- コントローラーのテスト
コントローラーをテストするためのセットアッププロセスは、サービスのセットアッププロセスとはまったく異なります。これは、コントローラーが注射できないため、ルートがロードされたときに自動的にインスタンス化されるか、NGコントローラーディレクティブがコンパイルされているためです。テストでビューが読み込まれていないため、テスト中のコントローラーを手動でインスタンス化する必要があります。
コントローラーは一般にビューに結び付けられているため、コントローラーのメソッドの動作はビューに依存します。また、ビューがコンパイルされた後、いくつかの追加のオブジェクトがスコープに追加される場合があります。これの最も一般的な例の1つは、フォームオブジェクトです。テストを予想どおりに機能させるには、これらのオブジェクトを手動で作成してコントローラーに追加する必要があります。
コントローラーは、次のタイプのいずれかを使用できます。
- で使用されるコントローラー Controllerで構文
- コントローラー
違いがわからない場合は、こちらについて詳しく読むことができます。いずれにせよ、これらの両方のケースについて説明しますでコントローラーをテストします
次のコントローラーを検討してください：

このコントローラーをテストするには、$スコープオブジェクトとサービスの模擬オブジェクト（DataSVC）を渡すことにより、コントローラーのインスタンスを作成する必要があります。このサービスには非同期方法が含まれているため、前の記事で概説したモッキングプロミステクニックを使用してock笑する必要があります。
次のスニペットはDataSVCサービスをock笑します：
```
angular.module('services', [])
 .service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){
 this.showDialog = function(message, title){
 if(title){
 modalSvc.showModalDialog({
 title: title,
 message: message
 });
 } else {
 $window.alert(message);
 }
 };
 }]);
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
$ rotscope。$ new Methodを使用して、コントローラーの新しいスコープを作成できます。コントローラーのインスタンスを作成した後、この新しい$スコープにすべてのフィールドとメソッドがあります。

コントローラーがフィールドとメソッドを$スコープに追加すると、それらが正しい値に設定されているかどうか、メソッドに正しいロジックがあるかどうかを確認できます。上記のサンプルコントローラーは、正規表現を追加して有効な番号を確認します。正規表現の動作をテストするために仕様を追加しましょう：
```
var mockWindow, mockModalSvc, sampleSvcObj;
beforeEach(function(){
 module(function($provide){
 $provide.service('$window', function(){
 this.alert= jasmine.createSpy('alert');
 });
 $provide.service('modalSvc', function(){
 this.showModalDialog = jasmine.createSpy('showModalDialog');
 });
 });
 module('services');
});

beforeEach(inject(function($window, modalSvc, sampleSvc){
 mockWindow=$window;
 mockModalSvc=modalSvc;
 sampleSvcObj=sampleSvc;
}));
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
コントローラーがデフォルト値のオブジェクトを初期化した場合、仕様内の値を確認できます。
SaveDataメソッドをテストするには、BookDetailsとBookFormオブジェクトの値を設定する必要があります。これらのオブジェクトはUI要素にバインドされるため、ビューがコンパイルされた実行時に作成されます。すでに述べたように、Savedataメソッドを呼び出す前に、いくつかの値で手動でそれらを初期化する必要があります。
```
it('should show alert when title is not passed into showDialog', function(){
 var message="Some message";
 sampleSvcObj.showDialog(message);

 expect(mockWindow.alert).toHaveBeenCalledWith(message);
 expect(mockModalSvc.showModalDialog).not.toHaveBeenCalled();
});

it('should show modal when title is passed into showDialog', function(){
 var message="Some message";
 var title="Some title";
 sampleSvcObj.showDialog(message, title);

 expect(mockModalSvc.showModalDialog).toHaveBeenCalledWith({
 message: message,
 title: title
 });
 expect(mockWindow.alert).not.toHaveBeenCalled();
});
```
ログイン後にコピー
ログイン後にコピー
次のスニペットはこの方法をテストします：
```
angular.module('controllers',[])
 .controller('FirstController', ['$scope','dataSvc', function($scope, dataSvc) {
 $scope.saveData = function () {
 dataSvc.save($scope.bookDetails).then(function (result) {
 $scope.bookDetails = {};
 $scope.bookForm.$setPristine();
 });
 };

 $scope.numberPattern = /^\d*$/;
 }]);
```
ログイン後にコピー
ログイン後にコピー
「コントローラーとして」のコントローラーをテストする
syntax
コントローラーを使用するコントローラーをテストするのは、$スコープを使用して構文をテストするよりも簡単です。この場合、コントローラーのインスタンスがモデルの役割を果たします。その結果、すべてのアクションとオブジェクトはこのインスタンスで利用できます。
次のコントローラーを検討してください：

このコントローラーを呼び出すプロセスは、前述のプロセスに似ています。唯一の違いは、$スコープを作成する必要がないことです。
```
module(function($provide){
 $provide.factory('dataSvc', ['$q', function($q)
 function save(data){
 if(passPromise){
 return $q.when();
 } else {
 return $q.reject();
 }
 }
 return{
 save: save
 };
 }]);
});
```
ログイン後にコピー
このインスタンスには、コントローラー内のすべてのメンバーとメソッドが追加されるため、インスタンス参照を使用してアクセスできます。

以下のスニペットテスト上記のコントローラーに追加された番号パターンフィールド：

Savedataメソッドのアサーションは同じままです。このアプローチの唯一の違いは、BookDetailsとBookformオブジェクトに値を初期化する方法です。

次のスニペットには、スペックが表示されます：
```
beforeEach(inject(function($rootScope, $controller, dataSvc){
 scope=$rootScope.$new();
 mockDataSvc=dataSvc;
 spyOn(mockDataSvc,'save').andCallThrough();
 firstController = $controller('FirstController', {
 $scope: scope, 
 dataSvc: mockDataSvc
 });
}));
```
ログイン後にコピー
```
angular.module('services', [])
 .service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){
 this.showDialog = function(message, title){
 if(title){
 modalSvc.showModalDialog({
 title: title,
 message: message
 });
 } else {
 $window.alert(message);
 }
 };
 }]);
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
テストプロバイダー

プロバイダーは、アプリケーションの開始前に作成する必要があるアプリケーション全体の構成のAPIを公開するために使用されます。 AngularJSアプリケーションの構成フェーズが終了すると、プロバイダーとの相互作用が許可されます。したがって、プロバイダーは、構成ブロックまたは他のプロバイダーブロックでのみアクセスできます。注入ブロックを使用してプロバイダーインスタンスを取得することはできません。むしろ、モジュールブロックにコールバックを渡す必要があります。
2番目のプロバイダー（別のプロバイダー）の定数（AppConstants）に依存する次のプロバイダーを考えてみましょう：
```
var mockWindow, mockModalSvc, sampleSvcObj;
beforeEach(function(){
 module(function($provide){
 $provide.service('$window', function(){
 this.alert= jasmine.createSpy('alert');
 });
 $provide.service('modalSvc', function(){
 this.showModalDialog = jasmine.createSpy('showModalDialog');
 });
 });
 module('services');
});

beforeEach(inject(function($window, modalSvc, sampleSvc){
 mockWindow=$window;
 mockModalSvc=modalSvc;
 sampleSvcObj=sampleSvc;
}));
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これをテストするには、まず依存関係をmock笑する必要があります。サンプルコードでこれを行う方法を見ることができます。
プロバイダーをテストする前に、モジュールがロードされて準備が整っていることを確認する必要があります。テストでは、注入ブロックが実行されるか、最初のテストが実行されるまでモジュールの負荷が延期されます。いくつかのプロジェクトでは、モジュールをロードするために空の最初のテストを使用するいくつかのテストを見てきました。私はこのアプローチのファンではありません。テストでは何もしておらず、テストの総数にカウントを追加します。代わりに、空の注入ブロックを使用してモジュールをロードします。
次のスニペットは参照を取得し、モジュールをロードします。

参照がすべて揃ったので、プロバイダーで定義されたメソッドを呼び出してテストできます。

結論
```
it('should show alert when title is not passed into showDialog', function(){
 var message="Some message";
 sampleSvcObj.showDialog(message);

 expect(mockWindow.alert).toHaveBeenCalledWith(message);
 expect(mockModalSvc.showModalDialog).not.toHaveBeenCalled();
});

it('should show modal when title is passed into showDialog', function(){
 var message="Some message";
 var title="Some title";
 sampleSvcObj.showDialog(message, title);

 expect(mockModalSvc.showModalDialog).toHaveBeenCalledWith({
 message: message,
 title: title
 });
 expect(mockWindow.alert).not.toHaveBeenCalled();
});
```
ログイン後にコピー
ログイン後にコピー
単位テストは時々トリッキーになりますが、アプリケーションの正確性を保証するため、時間を費やす価値があります。 AngularJSを使用して、フレームワークを使用して記述されたコードを簡単にテストします。この記事が、アプリケーションのテストを拡張および強化するのに十分なアイデアを提供することを願っています。今後の記事では、コードの他の部分をテストする方法をさらに検討します。
angularjsサービス、コントローラー、およびプロバイダーに関するユニットテストに関するよくある質問（FAQ）
```
angular.module('controllers',[])
 .controller('FirstController', ['$scope','dataSvc', function($scope, dataSvc) {
 $scope.saveData = function () {
 dataSvc.save($scope.bookDetails).then(function (result) {
 $scope.bookDetails = {};
 $scope.bookForm.$setPristine();
 });
 };

 $scope.numberPattern = /^\d*$/;
 }]);
```
ログイン後にコピー
ログイン後にコピー
単位試験は、AngularJS開発の重要な側面です。これは、サービス、コントローラー、プロバイダーなどの個々のコンポーネントの機能を単独で検証するのに役立ちます。これにより、各コンポーネントがより大きなアプリケーションに統合される前に、予想どおりに機能することが保証されます。ユニットテストは、開発プロセスの早い段階でバグを特定するのに役立ち、それらを簡単に修正しやすくなります。また、コードの品質を維持し、アプリケーションの全体的な信頼性を向上させるのにも役立ちます。 AngularJSのテスト環境をセットアップするには、いくつかのステップが含まれます。まず、ジャスミンやカルマなどの必要なテストツールをインストールする必要があります。 Jasmineは、JavaScriptコードをテストするための動作駆動型開発フレームワークであり、Karmaは実際のブラウザでテストを実行するテストランナーです。これらのツールをインストールした後、テストケースを個別のテストファイルで作成し、Karmaを使用して実行できます。依存関係をock笑します。 Jasmineは、「Spyon」と呼ばれる関数を提供し、模擬関数を作成し、その呼び出しを追跡できます。この関数を使用して、サービスの依存関係をmockし、テスト用に分離できます。モックをセットアップした後、サービスのメソッドを呼び出し、ジャスミンの「期待」関数を使用して出力を検証できます。コントローラーのメソッドとプロパティのテスト。 AngularJSが提供する$コントローラーサービスを使用して、コントローラーのインスタンスを作成できます。インスタンスを作成した後、その方法を呼び出して、コントローラーの範囲に対する効果を確認できます。また、サービスをock笑し、メソッドへの呼び出しを検証することにより、コントローラーのサービスとの対話をテストすることもできます。
AngularJSプロバイダーをテストする方法は？プロバイダーをテストに注入し、その依存関係をock笑し、その方法をテストできます。ただし、プロバイダーには、サービスのインスタンスを返す「$ get」と呼ばれる特別な方法があります。この方法は、呼び出して返された値をチェックすることで個別にテストできます。コンポーネントへの依存関係。テストでは、この機能を使用して、テスト中のコンポーネントに依存関係のモックバージョンを注入できます。これにより、コンポーネントを隔離し、その依存関係とは独立してテストできます。Angularjsテストで非同期操作を処理するにはどうすればよいですか？
AngularJSテストでの非同期操作は、$ qサービスとJasmineが提供する「完了」関数を使用して処理できます。 $ Qサービスを使用すると、テストで解決または拒否できる約束を作成できます。「完了」関数は、非同期操作が完了したことを示すために呼び出すことができます。。 AngularJSが提供する$コンパイルサービスを使用して、ディレクティブのインスタンスを作成できます。インスタンスを作成した後、jQueryのような方法を使用して操作し、範囲への影響を確認できます。それらをock笑することで対処することができます。依存関係のモックバージョンを作成し、テスト中のコンポーネントに注入できます。これにより、依存関係の動作を制御し、テストのためにコンポーネントを分離できます。

以上がAngularJSの単体テスト：サービス、コントローラー、プロバイダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7927

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1250

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。