web-dev-qa-db-ja.com

Mochaを使用してAngularJSコードをテストするにはどうすればよいですか？

基本的に、私はMocha（数千の単体テストを作成）でかなり経験があり、AngularJS（初めてのプロジェクトのみを作成）はまったくの初心者です。

今私は、Mochaを使用してすべてのAngularJSのものを単体テストする方法を考えています。

Mochaはブラウザーで実行されることを知っています。これはすでに実行済みです。しかし、どうやって構造化してセットアップするのですか？

私はする必要があると思います：

  • AngularJSを読み込む
  • ロードモカ
  • テストを読み込む

各テスト内で、コントローラー、サービスなどをロードしてテストする必要があります。それ、どうやったら出来るの？ require.jsなどを使用していません。ファイルは基本的に次の内容の単なるスクリプトファイルです。

angular.controller('fooController', [ '$scope', function ($scope) {
  // ...
}]);

テスト内でそのコントローラーを参照してインスタンス化するにはどうすればよいですか？同じことがサービス、ディレクティブなどにも当てはまります...

$scope、$http＆coのモックを作成する必要がありますか？私自身のため、またはいくつかの助けがありますか？

Karmaテストランナー（旧称Testacular）があることは承知していますが、テストランナーを完全に切り替えたくありません。

unit-testingangularjsmocha
28
Golo Roden

これを行う1つの方法は、Angular$injector テスト：

myModule_test.js

suite('myModule', function(){
  setup(function(){
    var app = angular.module('myModule', []);
    var injector = angular.injector(['myModule', 'ng']);
    var service = injector.get('myService');
  });

  suite('myService', function(){
    test('should return correct value', function(){
       // perform test with an instance of service here
    });
  });
});

htmlは次のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>myModule tests</title>
  <link rel="stylesheet" media="all" href="vendor/mocha.css">
</head>
<body>
  <div id="mocha"><p><a href=".">Index</a></p></div>
  <div id="messages"></div>
  <div id="fixtures"></div>
  <script src="vendor/mocha.js"></script>
  <script src="vendor/chai.js"></script>
  <script src="angular.min.js"></script>
  <script src="myModule.js"></script>
  <script>mocha.setup('tdd')</script>
  <script src="myModule_test.js"></script>
  <script>mocha.run();</script>
</body>
</html>
14
dark_ruby

angular依存関係がなく、必ずしもangular特定ではない）サービスを作成している場合は、モジュールをangular-不可知論的な方法では、別の小さなangularラッパーを作成するか、angularの存在をテストして、条件付きでそのサービスを作成します。

以下は、モカテストを含む、angular、browser、およびnodeモジュールの両方で使用できるモジュールを作成するために使用するアプローチの例です。

(function(global) {
    //define your reusable component
    var Cheeseburger = {};

    if (typeof angular != 'undefined') {
        angular.module('Cheeseburger', [])
            .value('Cheeseburger', Cheeseburger);
    }
    //node module
    else if (typeof module != 'undefined' && module.exports) {
        module.exports = Cheeseburger
    }
    //perhaps you'd like to use this with a namespace in the browser
    else if (global.YourAppNamespace) {
        global.YourAppNamespace.Cheeseburger = Cheeseburger
    }
    //or maybe you just want it to be global
    else {
        global.Cheeseburger = Cheeseburger
    }
})(this);
3
undefined