AngularJSテスト：ブートストラップブロック、ルート、イベント、アニメーション

キーポイント

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

テスト構成とブロックを実行します

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

<code class="language-javascript">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);
    });
});</code>

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

<code class="language-javascript">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());
});</code>

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

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

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

<code class="language-javascript">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();
    });
});</code>

<code class="language-javascript">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");
    });
});</code>

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

を参照してください）

結論

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

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

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