読者です 読者をやめる 読者になる 読者になる

Debuginfo

思考とアウトプット

AngularJSのテスト。Karmaの設定まわり。

npmとかgruntとかあまり理解せず、いきなりYeomon(Yo+Grunt+Bower)を使い始めたのでテスト環境がどうなっているのかわかりません。

GruntはGruntfile.jsを読み込んで各モジュールを実行しています。grunt build とか grunt server:dist等で各モジュールを起動させてます。(JSの縮小化とかやってくれてすごい!)

  • concat : ファイル連結
  • uglify: jsの縮小化
  • cssmin: cssの縮小化
  • clean: 不要なファイルの削除
  • watch: ファイルの更新を監視して、タスク実行
  • jshint: 構文チェック

今回見ているのはKarmaです。Gruntfile.jsの中身を見るとどうやって起動しているかわかります。

# in Gruntfile.js
267     karma: {
268       unit: {
269         configFile: 'karma.conf.js',
270         singleRun: true
271       }
... 
313   grunt.registerTask('test', [
314     'clean:server',
315     'concurrent:test',
316     'autoprefixer',
317     'connect:test',
318     'karma'
319   ]);

これを見ると、karmaは下記のように起動することがわかります。

$ grunt karma:unit  # or 
$ grunt test # at the last of sequence of tests

で、karmaの設定はkarama.conf.jsに記述されています。具体的なフォーマットは公式HPのConfigセクションに書いてあります。yo angularで作られたfileで見ておくのは下記でしょうか。

  • frameworks : テストフレームワークの指定
  • files: テストするファイルの指定
  • autoWatch: 自動読み込みの設定
  • singleRun: trueのときはテスト後exit

gruntでautoWatchを使うためにkarma:autoをGruntfile.jsに追加しました。

    karma: {
        unit: {
        configFile: 'karma.conf.js',
        singleRun: true
        },
    auto: {
        configFile: 'karma.conf.js',
        singleRun: false,
        autoWatch: true
        }
    },

で、

$ grunt karma:auto # automatic load

でテストファイルの更新を見て自動ロードしてます。

これで後はjasmineのテストを書くだけですね!