Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@kijitoraneko

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
karma-jasmine@0.1.5 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);
  });
});

結論

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What is going on with this article?