Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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/

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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