gulp.js + Karma + Jasmine + PhantomJS で AngularJS をテストしてみた

調べるのに少し時間がかかったので、メモがてら、書いておきます。(これが良いやり方なのかはわかりませんm(_ _)m)

gulpとkarmaをグローバルでインストールします。

$ sudo npm install -g gulp karma

どうもkarmaにパスが通っていないようなので、パスを通しておきます。

$ sudo ln -s /usr/lib/node_modules/karma/bin/karma /usr/local/bin/karma

(2014/05/23 追記: 上記、Ubuntu13.10上です。Macだと "/usr/local/lib/node_modules/karma/bin/karma" でした。)

必要なパッケージをローカルにインストールします。

$ mkdir xxx && cd xxx
$ npm install --save-dev gulp gulp-util gulp-karma karma-jasmine karma-phantomjs-launcher

package.json を自前で用意するなら、以下の様な感じになります。

{
    "name": "gulp-karma",
    "version": "0.1.0",
    "devDependencies": {
        "gulp": "~3.*",
        "gulp-util": "~2.*",
        "gulp-karma": "~0.*",
        "karma-jasmine": "~0.*",
        "karma-phantomjs-launcher": "~0.*"
    }
}

angular.js本体と、angular-mocks.js をダウンロードしておきます。
https://github.com/angular/angular.js/blob/master/src/ngMock/angular-mocks.js

今回は

• ./vendor/angular.min.js
• ./vendor/angular-mocks.js

として保存しました。

karmaの設定ファイルを作成します。以下、ブラウザを"Chrome"から"PhantomJS"に変えただけ(カーソルキーの上下で変えられました。)で、他はそのままです。

$ 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 plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

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


Config file generated at "xxx/gulp-karma/karma.conf.js".

gulpfile.js を作成します。

var gulp = require('gulp');
var karma = require('gulp-karma');

gulp.task('karma', function () {
    var files = [
        'vendor/angular.min.js',
        'vendor/angular-mocks.js',
        'js/app.js',
        'spec/appSpec.js',
    ];

    gulp.src(files).pipe(karma({configFile: 'karma.conf.js'}));
});

テスト対象のjsファイルと、そのテスト(spec)のjsファイルを作成します。

$ mkdir js && mkdir spec

js/app.js

var myApp = angular.module('myApp', []);

myApp.filter('truncate', [function () {
    return function (text, length, end) {
        if (isNaN(length)) {
            length = 10;
        }

        if (end === void 0) {
            end = '...';
        }

        if (text.length <= length) {
            return text;
        }

        return text.substring(0, length - end.length) + end;
    };
}]);

spec/appSpec.js

describe('spec for popup.js', function() {
    beforeEach(function () {
        module('myApp');
    });

    it('should be truncated.', inject(function(truncateFilter) {
        expect(truncateFilter('1234567890')).toBe('1234567890');
        expect(truncateFilter('12345678901')).toBe('1234567...');
        expect(truncateFilter('1234567890', 4, '---')).toBe('1---');
        expect(truncateFilter('1234567890', 2, '---')).toBe('---');
    }));
});

テストを実行してみます。

$ gulp karma
[gulp] Using gulpfile /share/gulp-karma/gulpfile.js
[gulp] Starting 'karma'...
[gulp] Finished 'karma' after 7.23 ms
[gulp] Starting Karma server...
INFO [karma]: Karma v0.12.1 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket 6KRg3iwj9PAR6jMwlCqC with id 13100382
PhantomJS 1.9.7 (Linux): Executed 1 of 1 SUCCESS (0.041 secs / 0.009 secs)

試しに、テストを適当に書き換えて失敗させてみます。

$ gulp karma
[gulp] Using gulpfile /share/gulp-karma/gulpfile.js
[gulp] Starting 'karma'...
[gulp] Finished 'karma' after 8.24 ms
[gulp] Starting Karma server...
INFO [karma]: Karma v0.12.1 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket pjHN4RaPeEbzGFrtlZ35 with id 28598103
PhantomJS 1.9.7 (Linux) spec for popup.js should be truncated. FAILED
    Expected '---' to be '1--'.
PhantomJS 1.9.7 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.042 secs / 0.01 secs)

とりあえず、これでテストできるかなー。という感じにはなった気がします。