キーポイント

• ユニットテストは、特に數(shù)十萬行のJavaScriptコードを含むアプリケーションでは、ソフトウェア開発にとって重要です。 AngularJSは、コードテストを容易にするために、依存関係噴射（DI）などの機(jī)能をサポートしています。
• モジュールのライフサイクルの開始時(shí)に構(gòu)成と実行ブロックが実行され、重要なロジックが含まれています。それらは他のコンポーネントと同じように直接呼ぶことはできません。これにより、テストをトリッキーにしますが、重要な役割により無視することはできません。
• angularjsは、$scopeのイベントを通じてイベントの集約を提供し、オブジェクトがお互いを知らなくても相互に対話できるようにします。単體テストは単獨(dú)で記述されるため、テスト仕様では、機(jī)能をテストするために一方の端をシミュレートする必要があります。 $emit/$broadcast
ルーティングは、ユーザーがアプリケーションでナビゲートする方法を定義し、変更が悪いユーザーエクスペリエンスにつながる可能性があります。したがって、ルーティングもテストする必要があります。 AngularJSアプリケーションで最も一般的に使用される2つのルーターは、ngrouteとUIルーターです。
• AngularJSのアニメーションのテストは、テスト命令よりも簡単であり、
ライブラリにはこのプロセスを簡素化するためのモジュールが含まれています。 AngularJSは、最初のダイジェストループが完了するまでアニメーションの実行を防ぎ、初期バインディングを高速化します。
• angular-mocks ngAnimateMock完全に機(jī)能するソフトウェアの構(gòu)築と配信の過程で、さまざまなテクノロジーを適用して、ソフトウェアの正しさと品質(zhì)を確認(rèn)します。ユニットテストはテクニックの1つです。多くの組織は、アプリケーションの潛在的な問題を見つけて修正するコストを削減するため、単體テストに大きな重點(diǎn)を置いています。數(shù)十萬行のJavaScriptコードを含むアプリケーションの開発を開始したとき、コードのテストを避けることができませんでした。一部のJavaScript開発者は、ランタイム前に言語の動(dòng)作が不明であるため、JavaScriptのテストがより重要であると言います。ありがたいことに、AngularJSは、依存関係注入（DI）などの機(jī)能をサポートすることにより、このフレームワークを使用して記述されたテストコードを簡単に作成します。以前の記事では、シミュレーション、コントローラー、サービス、プロバイダーのテスト方法、および指示のテスト方法に関するいくつかのヒントについて説明しました。この記事では、ブートブロックのテスト（構(gòu)成ブロック、実行ブロック、およびルーティング解像度ブロックを含む）、スコープイベント、およびAngularJSアプリケーションのアニメーションを紹介します。この記事で使用されているコードをGitHubリポジトリからダウンロードすることもできます。ここでは、テストを?qū)g行するための指示を見つけることもできます。

テスト構(gòu)成とブロックを?qū)g行します

モジュールのライフサイクルの開始時(shí)に構(gòu)成と実行ブロックが実行されます。モジュール、ウィジェット、またはアプリケーションがどのように機(jī)能するかを制御するための重要なロジックが含まれています。それらを他のコンポーネントと直接呼ぶことができないため、それらをテストするのは少し難しいです。同時(shí)に、彼らの役割が重要であるため、彼らは無視することはできません。次の構(gòu)成および実行ブロックを検討してください：

angular.module('configAndRunBlocks', ['ngRoute'])
    .config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        resolve: {
            bootstrap: ['$q', function ($q) {
                return $q.when({
                    prop: 'value'
                });
            }]
        }
    })
        .when('/details/:id', {
        templateUrl: 'details.html',
        controller: 'DetailsController'
    })
        .otherwise({
        redirectTo: '/home'
    });
})
    .run(function ($rootScope, messenger) {

    messenger.send('Bootstrapping application');
    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        messenger.send('Changing route to ' + next + ' from ' + current);
    });
});

テストプロバイダーの場合と同様に、構(gòu)成をテストしてブロック內(nèi)の機(jī)能を?qū)g行する前に、モジュールがロードされることを確認(rèn)する必要があります。したがって、モジュールをロードするために空の噴射ブロックを使用します。次のコードスニペットは、上記のブロックで使用されている依存関係をシミュレートし、モジュールをロードします。

describe('config and run blocks', function () {
    var routeProvider, messenger;

    beforeEach(function () {
        module('ngRoute');

        module(function ($provide, $routeProvider) {
            routeProvider = $routeProvider;
            spyOn(routeProvider, 'when').andCallThrough();
            spyOn(routeProvider, 'otherwise').andCallThrough();

            messenger = {
                send: jasmine.createSpy('send')
            };
            $provide.value('messenger', messenger);
        });

        module('configAndRunBlocks');
    });

    beforeEach(inject());
});

この記事の登録ルートを後でテストするため、意図的に

オブジェクトをシミュレートしませんでした。モジュールが読み込まれ、構(gòu)成と実行ブロックが実行されます。そのため、彼らの動(dòng)作のテストを開始できます。構(gòu)成ブロックはルートを登録するため、正しいルートを登録するかどうかを確認(rèn)できます。予想されるルート數(shù)が登録されているかどうかをテストします。次のテストでは、構(gòu)成ブロックの機(jī)能を検証します。 $routeProvider

サンプルコードの実行ブロックは、サービスを呼び出し、イベントを登録します。この記事の後半でこのイベントをテストします。現(xiàn)在、サービスへの呼び出しをテストしましょう：

describe('config block tests', function () {
    it('should have called registered 2 routes', function () {
        //Otherwise internally calls when. So, call count of when has to be 3
        expect(routeProvider.when.callCount).toBe(3);
    });

    it('should have registered a default route', function () {
        expect(routeProvider.otherwise).toHaveBeenCalled();
    });
});

describe('run block tests', function () {
    var rootScope;
    beforeEach(inject(function ($rootScope) {
        rootScope = $rootScope;
    }));
    it('should send application bootstrap message', function () {
        expect(messenger.send).toHaveBeenCalled();
        expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
    });
});

（テストスコープイベント、ルーティング、解析ブロック、アニメーションのその後の説明は、スペースの制限によりここで省略されています。完全なテストコードの例については、元のGitHubリポジトリを參照してください）

を參照してください）

結(jié)論

この記事を通して、過去2年間にAngularJSコードのテストで學(xué)んだテスト手法のほとんどを紹介します。これは終わりではありません。実際のアプリケーションのビジネスシナリオのテストを作成すると、詳細(xì)を?qū)Wびます。 AngularJSコードのテストに関する十分な知識(shí)があることを願(yuàn)っています。なぜ待つのですか？私がこれまでに書いたコードのすべての行のテストを書いてください！

（元のテキストのFAQの部分も、スペースの制限のために省略されています）

以上がAngularJSテスト：ブートストラップブロック、ルート、イベント、アニメーションの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。