IntelliJIDEAでKarmaでJasmineのテスト走らせました。


前提

1.nodebrewにてnode&npmインストール済みです。
↓こちらを参考にさせていただきました。
node.jsのversionを管理するためにnodebrewを利用する

2.npmでYeoman&generator-angularインストール済みです。
↓こちらを参考にさせていただきました。
AngularJS 入門

プロジェクト作成

mkdir angularYeoman
cd angularYeoman
yo angular

でAngularプロジェクトを作成。

File > OpenからangularYeomanを開く

こんな感じです。

オープン

karma.conf.jsもyo angularコマンドによって生成されています。

Karmaの実行環境設定

Run/Debug Configurationから以下の様に設定

オープン

Run/Debug ConfigurationにKarmaが登場しない場合はPluginが入っていませんのでPluginを入れてください。

実行する

落ちる

Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)

karma-jasmineインストール

angularYeomanディレクトリに移動してnpmでインストールします。

さっきの実行環境設定でangularYeomanプロジェクトにインストールされたkarmaを指定しているので、ここにkarma-jasmineをインストールしています。もしグローバル環境にkarmaをインストールしていて、そちらを実行環境設定でも使っているのであれば、グローバルでインストールしてあげればいいのではないかと思います。

npm install karma-jasmine
npm http GET https://registry.npmjs.org/karma-jasmine
npm http 200 https://registry.npmjs.org/karma-jasmine
[email protected] node_modules/karma-jasmine

karma-jasmineがangularYeoman/node_modules配下にインストールできました。

再実行

オープン

To capture a browser open http://localhost:8080/

とか言ってます。

karma.conf.js
browsers: ['Chrome'],

となっているので、とりあえずChromeひらいてみます。
↓ちなみに8080もこのファイルに指定してありますね。

karma.conf.js
// web server port
port: 8080,

Chromeでlocalhost:8080にアクセス

オープン

connectedしましたです。

これで、IntelliJに戻ってみて、もう一度Runしたりするのだけれど、一向にうまく動きません。

To capture a browser open http://localhost:8080/

が出たまま。いろいろ迷いました。あっちいったりこっちいったり。

よくわからない解決策(腑に落ちない)

karma.conf.js
//browsers: ['Chrome'],

ブラウザのところをコメントにして、再実行したら動きました。よくわかりません。
ブラウザはFireFoxとかSafariとかをConnectした状態であれば、すべてテストできました。

実行されたところ
オープン

実行されたmain.js(Yeomanが自動生成したやつ)

main.js
'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('angularYeomanApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(scope.awesomeThings.length).toBe(3);
  });
});

結論

解決策が腑に落ちませんが動きましたので、とりあえずよいです。分かる方おりましたらご教授いただければ幸いです。