コアポイント
angular-mocksモジュールで簡素化されます。 $provide
AngularJのプロバイダーシミュレーションは、サービスシミュレーションと同様のルールに従います。 $get
グローバルオブジェクト（サードパーティライブラリによって作成されたグローバルな「ウィンドウ」オブジェクトまたはオブジェクトの一部など）は、それらを$getに注入するか、グローバルオブジェクトを使用して値または定数を作成して注入することでシミュレートできます。必要に応じて。 $windowAngularjs設計コンセプトにはテストが含まれています。フレームワークのソースコードは非常によくテストされており、フレームワークを使用して記述されたコードもテスト可能です。組み込みの依存関係注入メカニズムにより、AngularJSで記述されたすべてのコンポーネントをテストすることができます。 AngularJSアプリケーションのコードは、既存のJavaScriptテストフレームワークを使用してユニットテストできます。 AngularJSコードのテストに使用される最も一般的なフレームワークはジャスミンです。この記事のすべてのサンプルコードスニペットは、Jasmineを使用して書かれています。 Angularプロジェクトで他のテストフレームワークを使用する場合でも、この記事で説明したアイデアを適用できます。
各ユニットテストのタスクは、コードの機能を単独でテストすることです。依存関係が異なるソースから来る可能性があり、シミュレートされるオブジェクトの責任を完全に理解する必要があるため、テスト中のシステムを分離することは困難な場合があります。 JavaScriptなどの標準的に入力されていない言語では、シミュレーションがシミュレートされるオブジェクトの構造を理解するのが容易ではないため、シミュレーションは困難です。同時に、柔軟性、つまり、テスト中のシステムが現在使用しているオブジェクトの一部のみをシミュレートし、残りを無視する柔軟性も提供します。
angularjsテストのock
AngularJSの主な目標の1つはテスト可能性であるため、コアチームはテストを容易にするためにこれに特別な努力を注いでおり、angular-mocksモジュールでの一連のシミュレーションを提供します。このモジュールには、AngularJSアプリケーションで広く使用されている一連のAngularJSサービス（$http、$timeout、$animateなど）をめぐるシミュレーションが含まれています。このモジュールは、開発者がテストを作成するのにかかる時間を短縮します。
これらのシミュレーションは、実際のビジネスアプリケーションのテストを作成するときに非常に役立ちます。同時に、アプリケーション全体をテストするには十分ではありません。フレームワーク内の依存関係を模倣する必要がありますが、モックされたものではありません - サードパーティのプラグイン、グローバルオブジェクト、またはアプリケーションで作成された依存関係から依存関係があります。この記事では、Angularjsの依存関係を模倣に関するいくつかのヒントを紹介します。
サービスは、AngularJSアプリケーションで最も一般的な依存関係タイプです。おそらくすでにご存知のように、サービスはAngularjsの過負荷用語です。サービス、工場、価値、定数、またはプロバイダーを指す場合があります。次のセクションでプロバイダーについて説明します。サービスは、次の方法のいずれかでシミュレートできます。
インジェクションブロックを使用して実際のサービスのインスタンスを取得し、サービスを聞くための方法。$provide
次のコードスニペットにより、上記のサービスのシミュレーションが作成されます。
angular.module('sampleServices', [])
.service('util', function() {
this.isNumber = function(num) {
return !isNaN(num);
};
this.isDate = function(date) {
return (date instanceof Date);
};
});テストに必要なすべてのモジュールをロードした後、すべてのシミュレーションを作成することをお勧めします。それ以外の場合、サービスがロードされたモジュールで定義されている場合、実際の実装はシミュレートされた実装をオーバーライドします。
module(function($provide) {
$provide.service('util', function() {
this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
// 模拟实现
});
this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
// 模拟实现
});
});
});
// 获取模拟服务的引用
var mockUtilSvc;
inject(function(util) {
mockUtilSvc = util;
});定数、工場、および値は、
、、
を使用して個別にシミュレートできます。
$provide.constantシミュレーションプロバイダー$provide.factory
$provide.valueシミュレーションプロバイダーは、シミュレーションサービスに似ています。執筆プロバイダーをock笑するときにも従う必要があるすべてのルールは従わなければなりません。次のプロバイダーを検討してください
プロバイダーと他のシングルトンへの参照を取得することの違いは、プロバイダーがこの時点で工場に変換されるため、この時点でプロバイダーが
ブロックで利用できないことです。angular.module('mockingProviders',[])
.provider('sample', function() {
var registeredVals = [];
this.register = function(val) {
registeredVals.push(val);
};
this.$get = function() {
function getRegisteredVals() {
return registeredVals;
}
return {
getRegisteredVals: getRegisteredVals
};
};
});プロバイダーを定義する場合、
module(function($provide) {
$provide.provider('sample', function() {
this.register = jasmine.createSpy('register');
this.$get = function() {
var getRegisteredVals = jasmine.createSpy('getRegisteredVals');
return {
getRegisteredVals: getRegisteredVals
};
};
});
});
// 获取提供程序的引用
var sampleProviderObj;
module(function(sampleProvider) {
sampleProviderObj = sampleProvider;
});テストファイルにロードされるモジュールに他の多くのモジュールが必要な場合、必要なすべてのモジュールがロードされない限り、テスト中のモジュールをロードできません。これらのすべてのモジュールをロードすると、テストからいくつかの実際のサービス方法が呼び出される可能性があるため、テストが失敗することがあります。これらの困難を回避するために、仮想モジュールを作成して測定されたモジュールをロードできます。
たとえば、次のコードが、追加のサービスを追加したモジュールを表しているとします。
angular.module('sampleServices', [])
.service('util', function() {
this.isNumber = function(num) {
return !isNaN(num);
};
this.isDate = function(date) {
return (date instanceof Date);
};
});ブロックです。
beforeEach
module(function($provide) {
$provide.service('util', function() {
this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
// 模拟实现
});
this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
// 模拟实现
});
});
});
// 获取模拟服务的引用
var mockUtilSvc;
inject(function(util) {
mockUtilSvc = util;
});約束に戻る方法をシミュレート
非同期方法は、静的値で約束を返す別の非同期方法を使用してシミュレートできます。次の工場を検討してください
上記の工場で
関数をテストします。ご覧のとおり、それはangular.module('mockingProviders',[])
.provider('sample', function() {
var registeredVals = [];
this.register = function(val) {
registeredVals.push(val);
};
this.$get = function() {
function getRegisteredVals() {
return registeredVals;
}
return {
getRegisteredVals: getRegisteredVals
};
};
});にサービスを提供する方法に依存しています。 getData()メソッドの機能をテストする前に、サービスと方法をシミュレートする必要があります。 dataSourceSvc
getAllItems()getData()サービスには、静的値を使用して約束を解決または拒否することを可能にする
メソッドがあります。これらの方法は、約束を返すモッキング方法のテストに非常に役立ちます。次のコードスニペットは、$qファクトリ：when()をシミュレートします
reject()
dataSourceSvc
module(function($provide) {
$provide.provider('sample', function() {
this.register = jasmine.createSpy('register');
this.$get = function() {
var getRegisteredVals = jasmine.createSpy('getRegisteredVals');
return {
getRegisteredVals: getRegisteredVals
};
};
});
});
// 获取提供程序的引用
var sampleProviderObj;
module(function(sampleProvider) {
sampleProviderObj = sampleProvider;
});
$qグローバルオブジェクトをシミュレート$rootScope.$digest()
angular.module('first', ['second', 'third'])
// util 和 storage 分别在 second 和 third 中定义
.service('sampleSvc', function(utilSvc, storageSvc) {
// 服务实现
});
依存関係の注入により、Angularで記述されたコードのすべての部分がテスト可能です。 DIを使用すると、実際のオブジェクトシムに従うオブジェクトを渡すことができます。これにより、テストされたコードが実行されたときに壊れないようにします。グローバルオブジェクトを注入できれば、シミュレートできます。グローバルオブジェクトを注入可能にする方法は2つあります。
グローバルオブジェクトを必要とするサービス/コントローラーに$windowにアクセスします。たとえば、次のサービスでは$window：$windowを介してLocalStorageを使用しています。
angular.module('sampleServices', [])
.service('util', function() {
this.isNumber = function(num) {
return !isNaN(num);
};
this.isDate = function(date) {
return (date instanceof Date);
};
});module(function($provide) {
$provide.service('util', function() {
this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
// 模拟实现
});
this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
// 模拟实现
});
});
});
// 获取模拟服务的引用
var mockUtilSvc;
inject(function(util) {
mockUtilSvc = util;
});次のコードスニペットには、ローカルストレージとtoAstrのシミュレーションが表示されます。
結論angular.module('mockingProviders',[])
.provider('sample', function() {
var registeredVals = [];
this.register = function(val) {
registeredVals.push(val);
};
this.$get = function() {
function getRegisteredVals() {
return registeredVals;
}
return {
getRegisteredVals: getRegisteredVals
};
};
});模擬は、あらゆる言語で単体テストを書くことの重要なコンポーネントの1つです。これまで見てきたように、依存関係の注入は、テストとシミュレーションにおいて重要な役割を果たします。コードは、その機能を簡単にテストできるように、方法で整理する必要があります。この記事では、AngularJSアプリケーションをテストするときにシミュレートする最も一般的なオブジェクトのセットをリストします。この記事に関連するコードは、GitHubからダウンロードできます。 AngularJSテスト（FAQ）
のモッキング依存関係に関する
FAQ AngularJSテストで依存関係をock笑する目的は何ですか？ AngularJSテストのモッキング依存関係は、単体テストの重要な部分です。開発者は、テストされたコードを分離し、依存関係の動作をシミュレートできます。このようにして、実際にコードを呼び出すことなく、コードが依存関係とどのように対話するかをテストできます。これは、依存関係が複雑で、遅い、またはテスト中に避けたい副作用がある場合に特に役立ちます。これらの依存関係をock笑することにより、制御された環境でコードの機能をテストすることに焦点を当てることができます。
サービスを使用することが含まれます。
サービスの、、または$provideメソッドを使用して、サービスのシミュレートされた実装を定義できます。基本的な例は次のとおりです
$provide
この例では、valueメソッドを使用して、シミュレートされた実装の実装を定義します。テスト中、この模擬サービスは実際のサービスの代わりに使用されます。 factory
service（スペースの制限のために、FAQの残りの質問を1つずつ尋ねてください。簡潔で明確な答えを提供するために最善を尽くします。）
以上がAngularJSテストのモッキング依存関係の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
