Jasmine と Karma_node.js を使用して AngularJS ページ プログラムをテストする

AngularJS は、jQuery 以来 JavaScript に起こる最良のものです。これは、JavaScript 開発が常に意図されてきた方法です。 Angular の主な利点の 1 つは、コードの単体テストに非常に便利な依存関係の挿入 (Dependency Injection) です。しかし、少し奇妙なのは、単体テストの実行方法に関するチュートリアルが見つからないことです。

もちろん、Jasmine テスト フレームワークと Karma テスト実行プログラム (テスト ランナー) の使用など、多くの優れた推奨事項がありますが、ゼロからテストする方法についての完全なチュートリアルはありません。そこでこの記事を書きました。その方法を理解するためにオンラインで多くのリソースを見つけましたが、(最初にこの記事を読んでいるのであれば) 今それを行う必要はありません。

これが Karma と Jasmine に基づいた Angular アプリのテストのベスト プラクティスであると言えるまで、表示されたエラーを教えてください。

はじめに

この記事では、自動テストに Karma と Jasmine を使用するために必要なすべてのツールをインストールする方法を説明します。実際に TDD (テスト駆動開発) を使用するか TAD (テスト支援開発) を使用するかは気にしません。この記事では、テストするファイルがすでにあることを前提としています。

Karma をインストールします

Node.js がインストールされていない場合は、自分でダウンロードしてインストールしてください。インストール後、ターミナルまたはコマンドラインを開いて次のコマンドを入力します:

npm install -g karma

ファイル構造

ファイル構造は今回のトピックとは密接に関係ありませんが、次のテストで使用したファイル構造は次のとおりです:

Application
| angular.js
| angular-resource.js
| Home
 | home.js
| Tests
 | Home
 | home.tests.js
 | karma.config.js (will be created in the next step)
 | angular-mocks.js

*私はこの文書構造を推奨しているわけではなく、単なるテスト例として示しています。

カルマを構成する

構成ファイルを配置するディレクトリに切り替えて、ターミナルに次のコマンドを入力して構成ファイルを作成します。

karma init karma.config.js

どのテスト フレームワークを使用するか、自動監視ファイルが必要かどうか、どのようなテストとテスト対象ファイルが含まれるかなど、いくつかの質問が表示されます。このチュートリアルでは、「Jasmine」をデフォルトのフレームワークとして保持し、自動ファイル検出を有効にし、次のファイルを含めます:

../*.js
../**.*.js
angular-mocks.js
**/*.tests.js

これらは相対パスです。1) 親ディレクトリ内のすべての .js ファイル、2) 親ディレクトリの下のすべてのサブディレクトリ内のすべての .js ファイル、3) 現在のディレクトリの angular-mock.js、4) そしてすべて現在のディレクトリ (サブディレクトリを含む) にある .tests.js ファイル (私はこの方法でテスト ファイルを他のファイルと区別するのが好きです)。

どのファイルを選択する場合でも、angular.js、angular-mock.js、および使用する必要があるその他のファイルを必ず含めてください。

カルマを開始

これで、ターミナルに次のように入力して、Karma を開始できます:

karma start karma.config.js

このコマンドは、コンピューター上の構成ファイルにリストされているブラウザーを起動します。これらのブラウザはソケット経由で Karma インスタンスに接続し、アクティブなブラウザのリストが表示され、テストを実行しているかどうかが通知されます。 Karma が各ブラウザでの最終テスト結果の概要 (例: 16 件中 15 件が合格、1 件が不合格) を提供してくれればよかったのですが、残念ながらこの情報はターミナル ウィンドウからしか見ることができません。

Karma の優れた機能の 1 つは、ネットワーク上の任意のデバイスを使用してコードに接続してテストできることです。モバイル ブラウザで Karma サービスを指定してみてください。コンピュータで実行されている任意のブラウザでテスト URL を見つけることができます。 http://localhost:9876/?id=5359192 のようになります。電話、仮想マシン、またはその他のデバイスのブラウザで [ネットワーク上の IP アドレス]:9876/?id=5359192 を指定できます。Karma は Node.js インスタンスを実行しているため、テスト マシンは Web と同じです。サーバーに接続すると、テストはそのサーバーを指すブラウザに送信されます。

基本テスト

テストするファイルがすでにあることを前提としています。使用する home.js ファイルは次のとおりです:

home.js

'use strict';
 
var app = angular.module('Application', ['ngResource']);
 
app.factory('UserFactory', function($resource){
 return $resource('Users/users.json')
});
 
app.controller('MainCtrl', function($scope, UserFactory) {
 $scope.text = 'Hello World!';
 $scope.users = UserFactory.get();
});

home.test.js ファイルでテスト ケースを作成できます。簡単なテストから始めましょう: $scope.text は「Hello World!」と等しい必要があります。 このテストを完了するには、アプリケーション モジュールと $scope 変数をモックする必要があります。これを Jasmine の beforeEach メソッドで実行して、各テスト ケースの開始時に新しい (クリーンな) コントローラーとスコープ オブジェクトを用意します。

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope;
//我们会在测试中使用这个scope
 
 
//模拟我们的Application模块并注入我们自己的依赖
 beforeEach(angular.mock.module('Application'));
 
//模拟Controller，并且包含 $rootScope 和 $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller){
  
//创建一个空的 scope
  scope = $rootScope.$new();
  
//声明 Controller并且注入已创建的空的 scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// 测试从这里开始
});

コードから、独自のスコープを挿入して、スコープの外側でその情報を検証できることがわかります。また、モジュール自体をモックすることを忘れないでください (7 行目)。これでテストの準備が整いました:

home.tests.js

// 测试从这里开始
it('should have variable text = "Hello World!"', function(){
 expect(scope.text).toBe('Hello World!);
});

如果你运行这个测试，它可以在任何指向Karma的浏览器中执行，并且测试通过。

发送$resource请求

现在我们已经准备好测试 $resource 请求。要完成这个请求，我们需要使用到 $httpBackend， 它一个模拟版本的Angular $http。我们会创建另一个叫做 $httpBackend 的变量，在第二个 beforEach块中，注入 _$httpBackend_ 并将新创建的变量指向 _$httpBackend_。接下来我们会告诉 $httpBackend 如何对请求做出响应。

$httpBackend = _$httpBackend_; 
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);

我们的测试： home.tests.js

it('should fetch list of users', function(){
   $httpBackend.flush();
   expect(scope.users.length).toBe(2);
   expect(scope.users[0].name).toBe('Bob');
  });

都放到一起

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope, $httpBackend;
//we'll use these in our tests
 
 
//mock Application to allow us to inject our own dependencies
 beforeEach(angular.mock.module('Application'));
 
//mock the controller for the same reason and include $rootScope and $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
  $httpBackend = _$httpBackend_;
  $httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
 
  
//create an empty scope
  scope = $rootScope.$new();
  
//declare the controller and inject our empty scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// tests start here
 it('should have variable text = "Hello World!"', function(){
  expect(scope.text).toBe('Hello World!');
 });
 it('should fetch list of users', function(){
  $httpBackend.flush();
  expect(scope.users.length).toBe(2);
  expect(scope.users[0].name).toBe('Bob');
 });
});

技巧

Karma会运行所有文件中的所有测试用例，如果你只想运行所有测试的一个子集，修改 describe 或 it 为 ddescribe 或 iit 来运行个别的一些测试。如果有些测试你不想运行他们，那么修改 describe 或 it 为 xdescribe 或 xit 来忽略这些代码。

你也可以在html文件的页面上运行你的测试。举例的代码如下：
home.runner.html

<!DOCTYPE html>
<html>
<head>
 <title>Partner Settings Test Suite</title>
 
<!-- include your script files (notice that the jasmine source files have been added to the project) -->
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"></script>
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"></script>
 <script type="text/javascript" src="../angular-mocks.js"></script>
 <script type="text/javascript" src="home.tests.js"></script>
 <link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/>
</head>
<body>
 
<!-- use Jasmine to run and display test results -->
 <script type="text/javascript">
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.addReporter(new jasmine.HtmlReporter());
  jasmineEnv.execute();
 </script>
</body>
</html>