ハブのイオンフレームワークに関する記事 は 既にありました しかし、私はそれらのどれでもこれをすべてテストすることについて少しも見つけませんでした。 そのため、私は記事の翻訳をここに投稿することにしました。 イオンアプリケーションのテストを書くことは誰かにとっても役に立つことを願っています。
イオンデモプロジェクトの作成
最初に、デモアプリケーションを作成します。 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éの最初の記事であり、実際に最初の資料です。何かを正しく説明しなかった場合、またはよりシンプルで優れたソリューションがある場合は、喜んでコメントします。