Ionicアプリのユニットテスト

これは、 karmaテストランナーおよびJasmineテストフレームワークを使用したIonicモバイルアプリケーションのテストに関する記事mcgivery.com/unit-testing-ionic-appの無料翻訳です。

ハブのイオンフレームワークに関する記事 は 既にありました しかし、私はそれらのどれでもこれをすべてテストすることについて少しも見つけませんでした。 そのため、私は記事の翻訳をここに投稿することにしました。 イオンアプリケーションのテストを書くことは誰かにとっても役に立つことを願っています。

イオンデモプロジェクトの作成

最初に、デモアプリケーションを作成します。 Ionicアプリケーションテンプレートの1つ-タブを使用します。 デモアプリケーションを作成するには、実行します。

ionic start ionic-testing tabs cd ionic-testing 

テストのためのプロジェクトの準備

テストには、いくつかのnpmモジュールとアンギュラーモックが必要です。 すべてがnpmおよびbowerパッケージマネージャーを介してインストールされます。

 npm install karma karma-jasmine karma-phantomjs-launcher --save-dev npm install -g karma-cli npm install bower install angular-mocks --save-dev 

次に、テスト用のフォルダーを作成し、karmaの構成ファイルを初期化します。

 mkdir tests cd tests karma init my.conf.js 

はい、すべての質問に答えます。 my.conf.jsで、プロジェクトのjsファイルとテストファイルへのパスを追加し、PhantomJSを使用するブラウザーのリストに追加します。

 // list of files / patterns to load in the browser files: [ '../www/lib/angular/angular.js', '../www/js/*.js', '../www/lib/angular-mocks/angular-mocks.js', '**/*tests.js' ], // Use the PhantomJS browser instead of Chrome browsers: ['PhantomJS'], 

テストの実行を簡単にするために、gulpタスクテストを追加します。

 //      var KarmaServer = require('karma').Server; // ...  gulp- // gulp-task    gulp.task('test', function(done) { new KarmaServer({ configFile: __dirname + '/tests/my.conf.js', singleRun: true, }, done).start(); }); 

これで、テストを実行するために、gulp testコマンドを使用できます（singleRunパラメーターを指定しない場合、my.conf.jsで指定されたファイルが変更されるたびにテストが実行されます）。

コントローラーの単体テスト

まず、標準のTabsプロジェクトにすでに含まれているAccountCtrlコントローラーのテストを作成しましょう。 testsフォルダーに新しいファイルControllers / controllers.tests.jsを作成します。

 describe('Controllers', function(){ var scope; // load the controller's module beforeEach(module('starter.controllers')); beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); $controller('AccountCtrl', {$scope: scope}); })); // tests start here it('should have enabled friends to be true', function(){ expect(scope.settings.enableFriends).toEqual(true); }); }); 

このテストは、AccountCtrlコントローラーでscope.settings.enableFriendsが有効になっているかどうかを確認します。 beforeEach関数は、テストの実行前に実行されます。 彼女は、テスト中の角度モジュールに関する情報を受け取ります。

ジャスミンはテストの作成に使用されます。 これは、JavaScriptコードをテストするためのフレームワークです。 公式Webサイトで構文に慣れることができます。

テストを実行するには、 gulp taskを実行しgulp task

ユニットテストサービス

2番目の単体テストでは、チャットサービスをテストします（元のバージョンではFriendsですが、新しいバージョンのタブアプリケーションでは名前が変更されています）。 tests Services / services.tests.jsディレクトリにファイルを作成します。

 describe('Chats Unit Tests', function() { var Chats; beforeEach(module('starter.services')); beforeEach(inject(function(_Chats_) { Chats = _Chats_; })); it('can get an instance of my factory', inject(function(Chats) { expect(Chats).toBeDefined(); })); it('has 5 charts', inject(function(Chats) { expect(Chats.all().length).toEqual(5); })); it('has Max as friend with id 1', inject(function(Chats) { var oneFriend = { id: 1, name: "Max Lynx", notes: 'Odd obsession with everything', face: '' }; expect(Chats.get(1).name).toEqual(oneFriend.name); })) }) 

beforeEachがコントローラーテストと同じアクションを実行するのと同じbeforeEachが表示されます。ここでは、コントローラーの代わりにチャットサービスが初期化されます。 Chats.all（）メソッドを呼び出して、オブジェクトの数を確認します（5でなければなりません）。

さらに、idで1つのオブジェクトを取得し、nameプロパティを確認します。

テストはgulp testもgulp test 。

PSこれはHabréの最初の記事であり、実際に最初の資料です。何かを正しく説明しなかった場合、またはよりシンプルで優れたソリューションがある場合は、喜んでコメントします。