調べるのに少し時間がかかったので、メモがてら、書いておきます。(これが良いやり方なのかはわかりません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)
とりあえず、これでテストできるかなー。という感じにはなった気がします。
