Typescriptでモバイルアプリを作ってみる その3 ユニットテスト Karma

前回webpackについて書くと言いましたが、色々な方がwebpackについて書かれているので、webpackについては気が向いたら書きます。

というわけでテストです。Ionicのデフォルトでは自動テストについては書かれておらず、実機で確認するのがテストだといった感じとなっているためよろしくありません。
それではテストを書きましょう。

https://github.com/takeo-asai/ionic-begin3
今回もレポジトリを用意してあります。できるだけコピペだけで動かせるようにしていますがそれすら面倒な方は是非ご利用ください。

Karma: ユニットテスト

モバイルアプリをSwiftやJavaで開発している方には馴染みがないかと思いますが、Ionicのテストを行う環境はHTML5+Javascriptなので結局のところフロントエンドのテストを行うのと変わりません。ですのでより深く理解したい方は
フロントエンドにテストを導入：http://qiita.com/howdy39/items/cdd5b252096f5a2fa438
などを御覧ください。

ではまずはKarmaをインストールします。前回設定したwebpackの設定がそのまま利用できるようにもします。

$ typings install --global -S dt~mocha
$ npm install -D karma-webpack karma mocha karma-mocha karma-phantomjs-launcher

karma.config.js

// Karma configuration
var webpackConfig = require('./webpack.config.js');

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: './',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],

    // list of files / patterns to load in the browser
    files: [
      'www/lib/ionic/js/ionic.bundle.min.js',
      'www/lib/ngCordova/dist/ng-cordova.js',
      'www/lib/angular-mocks/angular-mocks.js',
      'src/**/*.spec.ts'
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/**/*.spec.ts': ['webpack']
    },
    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'], // PhantomJS, Chrome

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

src/app.spec.ts

describe("This is", () => {
  it("always true", () => {
  });
});

このkarma.config.jsをwebpack.config.jsと同じフォルダに置いてください。別フォルダならrequireを正しく指定してください。

filesに色々指定してありますが、src/*/.spec.tsとionic.bundle.js以外はMockを使いはじめない限り不要な部分ですのでなくても構いません。

続けてkarmaを起動し、正しく動作していることを確認します。

$ ./node_modules/karma/bin/karma start --single-run

結果ログに、

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.005 secs / 0.001 secs)

のようにすべて（といっても一つだけですが）Successしていれば成功です。

今回はとりあえず何もしないユニットテストを一つ作りました。コレでモデルのテストは可能ですが、これだけでは十分ではありません。Viewのテストが残っています。次回はそのViewのテストをProtractorというツールを使っていくところを紹介したいと思います。