Ionicユニットテスト(Unit Tests)

皆さん、私のブログに対応内容を確認してください.そして私はIonic 1とIonic 2の過程を勉強して、一緒に勉強して、一緒に進歩します.
コードテストの必要性は、いかなるプログラミング言語に対しても、JavaScriptとHTMLは例外ではない.本論文では、Ionicをユニットテスト(Unit Tests)する方法について説明する.
テスト環境については、現在のフレームが多く、本文ではKarmaを使用しています.特にそれ自体はAnglarのために生まれていますので、Anglarと完璧に一体化することができます.テスト用例については、フレームワークも多く、本明細書ではJasmineを使用している.
このプロジェクトはionic cal 1.2.4のtabsプロジェクトテンプレートに基づいてテストを行いますが、Anglar 1コード規範により合うように、プロジェクトのカタログ構造とコードのスタイル構造に対して相応の変化をしました.まずソースを熟知した後、下記を参照してください.
ユニットテスト(ユニットTests)
ユニットテストとは、Unit Testsであり、名前の通り、コードの一部の独立した機能をテストすることを目的としています.
テスト環境のインストール
私たちはKarma、Jasmine及びangglar-mocksを使う必要があります.

$ npm install karma --save-dev
$ npm install karma-jasmine --save-dev

注意:angglar-mocksのバージョンはionicで使われているangglarバージョンと同じでなければなりません.

Failed to instantiate module ngMock... Unknown provider: $$rAFProvider

ここで使用するのはionic钻1.2.4で、そのanglarバージョンは1.4.3で、angular-mocks#1.4.3をインストールする必要があります.

$ bower install angular-mocks#1.4.3 --save-dev

端末の中でカードを使ってテストするためには、Karma CLIをインストールする必要があります.

$ npm install -g karma-cli

注意:クラスUnixシステムは、suodoを使用する必要があります.

$ sudo npm install -g karma-cli

最後に、私達は1種のブラウザーを使って私達のユニットのテストのキャリヤーとしなければならなくて、Karmaは大多数の主流のブラウザーを支持します.ここで一番人気のあるPhotomJSを使います.

$ npm install karma-phantomjs-launcher --save-dev

もちろん、他のブラウザを使ってもいいです.karma-*-launcherをインストールすればいいです.

$ npm install karma-chrome-launcher --save-dev
$ npm install karma-firefox-launcher --save-dev
...

試験環境の設定
試験用例を作成する前に、まずテスト環境の配置を行う必要があります.

$ karma init karma.conf.js

このステートメントを実行すると、端末では、各項目の構成情報を順次問い合わせることができます.すべての車に戻り、そのデフォルト値を使用してもいいです.karma.conf.jsが生成されたら、手動で修正します.karma.conf.jsを開けて、browsersオプションを見つけて、その値をPhantomJSに変更します.

browsers: ['PhantomJS']

filesオプションが見つかりました.自分のプロジェクトファイル構造に基づいて相応の修正を行います.

files: [
      'www/lib/ionic/js/ionic.bundle.js',
      'www/lib/angular-mocks/angular-mocks.js',
      'www/js/*.js',
      'www/views/**/*.js'
    ]

注意:jsのロード順序に注意して、ionic.bundle.jsはionicとangglarの関連ファイルを統合して、普通の工事jsファイルの前にロードする必要があります.同じ理由で、angular-mocks.jsはテストケースの先決条件であるため、テストケースjsファイルの前にロードする必要がある.読者は自身の工程構造に基づいて相応の修正を行う必要があります.ここではユニットテスト用のjsファイルを一般工程jsファイルと一緒に置くので、www/views/**/*.jsを使って彼らを代表することができます.
試験用例の作成
テストコントローラChatsページのcontrollerを例にして、試験用の例を作成します.名前はtab-chats.controller.spec.jsです.

(function () {
    'use strict';
    describe('ChatsCtrl', function () {
        var scopeMock,
            ChatsServiceMock,
            controller;

        beforeEach(module('starter'));
        beforeEach(inject(function ($rootScope, $controller, _ChatsService_) {
            scopeMock = $rootScope.$new();
            ChatsServiceMock = _ChatsService_;
            controller = $controller('ChatsCtrl', {'$scope': scopeMock, 'ChatsService': ChatsServiceMock});
        }));

        it('should have scopeMock defined', function () {
            expect(scopeMock).toBeDefined();
        });

        it('should get an instance of ChatsService', function () {
            expect(ChatsServiceMock).toBeDefined();
        });

        it('should delete a person in chats', function () {
            var chat = {
                id: 0,
                name: 'Ben Sparrow',
                lastText: 'You on your way?',
                face: 'img/ben.png'
            };
            scopeMock.remove(chat);
            expect(ChatsServiceMock.all().length).toBe(4);
            expect(scopeMock.chats.length).toBe(4);
        });
    });
})();

説明:
1.まずmodule方法(angglar-mocks.js提供)を使用してプロジェクトmoduleをロードし、beforeEach方法(jasmine提供)において、テストケースの実行前にまず実行できることを保証することができる.2.次に、私たちはinject方法を使用して、いくつかの必要なモジュールを挿入しました.controllerは、実用化されたcontrollerに用いられる.3.$controller方法は、2つのパラメータを受信し、第1のパラメータは、実装されるcontrollerの名前であり、第2のパラメータは、このcontrollerの依存リストである.4.テストケースもプログラムです.文法が分からないなら、まずJasmineを知る必要があります.
テストの実行:

$ karma start karma.conf.js

describe方法は、複数のテストを組み合わせることができ、it方法は実際のテストケースを定義し、彼らの最初のパラメータが説明文であること、すなわち自述性であることに注意して、このようにしてテストのデバッグに極めて便利さを提供し、expect方法はit方法の間にあり、各機能点が私たちの予想通りに実行されるかどうかをテストするために使用される.各it方法では、任意の複数のexpect方法が使用されてもよいが、適宜に処理する必要があり、そうでなければ、植字が容易ではない.
テストサービスChatsページのserviceを例にして、テスト用の例を作成します.名前はtab-chats.service.spec.jsです.

(function () {
    'use strict';
    describe('ChatsService', function () {
        var ChatsService;
        beforeEach(module('starter'));

        beforeEach(inject(function (_ChatsService_) {
            ChatsService = _ChatsService_;
        }));

        it('can get an instance of ChatsService', function () {
            expect(ChatsService).toBeDefined();
        });

        it('should has 5 chats', function () {
            expect(ChatsService.all().length).toBe(5);
        });

        it('should has Max as friend with id 1', function () {
            var friend = {
                id: 1,
                name: 'Max Lynx',
                lastText: 'Hey, it\'s me',
                face: 'img/max.png'
            };

            expect(ChatsService.get(1)).toEqual(friend);
        });
    });
})();

テストの実行:

$ karma start karma.conf.js

ソースはGithubで見つけられます.
参考文献:ionic工程組織ファイルAnglar Unit Tests unit-testing-innic-app-apt writet-autmatied-unit-tests nicユニットテスト