LoginSignup
398

More than 5 years have passed since last update.

【javascriptを使う人に知って貰いたい(エンジニア、デザイナ問わず)】karmaを使ったテスト駆動開発入門(ついでにJasmineも)

Last updated at Posted at 2013-06-13

Karmaって何?

簡単に言うとnode.jsで作成された、テスト実行環境
間違ってたら(m´・ω・`)m ゴメン…

Jasmineって何?

Karmaはあくまでの実行環境なので
テストの実処理を行うライブラリが必要
それがこれ
他にもmocha + (chai or expect)とかあるけど
とりあえず、今回はJasmine

能書きはいいから、実際の作業をはよ

以下の2つは、インストール済みである事。
* node
* npm

ではでは

作業用ディレクトリ作成&移動

$ mkdir -p karma/spec
$ mkdir -p karma/src
$ cd karma

グローバル領域にkarmaをインストール
※- gがないと動かない事が多いため、修正しました。

$ npm install -g karma

karma初期化

$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js adapter into files.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> 

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> 

Any files you want to exclude ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Testacular to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

karma.conf.jsってファイルが出来ました。

修正します。

$ vim karma.conf.js
karma.conf.js
files: [
  'spec/*.js'
],

簡単なテストケースを作成します。

$ vim spec/HelloSpec.js
spec/HelloSpec.js
/**
 * http://pivotal.github.io/jasmine/
 */
describe("Hello Test", function() {

  it("test", function() {
    var a = 'test1';//actual テストする値
    var e = 'test';//expect 期待値
    expect(a).toEqual(e);
  });
});

別ターミナルで次のコマンドを実行

$ cd work/karma
$ karma start karma.conf.js

するとbrowserが立ち上がり、ターミナルにテスト結果が!!

$ karma start karma.conf.js 
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Mac)]: Connected on socket id FqwLPzInsYRW6baEegdg
Chrome 27.0 (Mac) Hello Test test FAILED
    Expected 'test1' to equal 'test'.
    Error: Expected 'test1' to equal 'test'.
        at null.<anonymous> (work/karma/spec/HelloSpec.js:9:15)
Chrome 27.0 (Mac): Executed 1 of 1 (1 FAILED) (0.107 secs / 0.02 secs)

テスト駆動開発は、まずはerrorを起こすことから始まります。
では、次はテストを成功させてみましょう。
karmaのいいところは、テストファイルを修正して、保存すれば
テストが実行されることです。

監視最高!!!

では、修正

spec/HelloSpec.js
/**
 * http://pivotal.github.io/jasmine/
 */
describe("Hello Test", function() {

  it("test", function() {
    var a = 'test';//actual テストする値
    var e = 'test';//expect 期待値
    expect(a).toEqual(e);
  });
});

今回は、var aの値を変更しました。
これで、a = eとなります。
そして、karmaを実行したターミナルを見ると

INFO [watcher]: Changed file "/work/karma/spec/HelloSpec.js".
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.293 secs / 0.011 secs)

SUCCESS

Javascriptでのテストをもっと流行らせたいです。J

参考

Karma 公式ページ
http://karma-runner.github.io/0.8/index.html

Jasmine コマンド一覧
http://pivotal.github.io/jasmine/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
398