step by stepで始めるKarma

[Karma](https://karma-runner.github.io/0.13/index.html)を使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。
ステップを通して少しづつ理解できるように執筆しました。
また、最後に重要だろうと思われる補足内容を記載しました。
Karmaの導入に一役買えれば幸いです。


テスト全体の流れについては以前書いた記事[フロントエンドにテストを導入](http://qiita.com/howdy39/items/cdd5b252096f5a2fa438)を参照してください。



## Karmaとは
ブラウザ上で **単体テスト**を実行するためのテストランナーです。
テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。
特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。


## 前提
Nodejs,npm,chromeが導入済みであること



## 流れ
Karmaは4つの大きな機能（プラグイン）が存在します。
Step 3 〜 Step 6でそれぞれ解説していきます。

- Framework
- Launcher
- Preprocessor
- Reporter




※Stepのリンク先はソースです。

|Step  |表題  |目的|
|------|---|---|
|[Step 1](https://github.com/howdy39/study-karma/tree/step-1)|準備|プロジェクトの作成/karmaのインストール|
|[Step 2](https://github.com/howdy39/study-karma/tree/step-2)|ログレベルを変更|Karmaの設定方法の学習|
|[Step 3](https://github.com/howdy39/study-karma/tree/step-3)|Framework, ファイルの登録 |テストライブラリやテスト対象ファイルやテストファイルの登録|
|[Step 4](https://github.com/howdy39/study-karma/tree/step-4)|Launcherを登録|テストを実行するブラウザを登録|
|[Step 5](https://github.com/howdy39/study-karma/tree/step-5)|Preprocessorを登録|ファイル読み込みの前に処理を割りこませる|
|[Step 6](https://github.com/howdy39/study-karma/tree/step-6)|Reporterを登録|テスト結果に対して処理を行う|



## ゴール
Karmaの全体の流れと設定ファイルの書き方を理解する

![ステップバイステップで始めるKarma ゴール.png](https://qiita-image-store.s3.amazonaws.com/0/35595/f65b4930-7df1-c8e8-2e7c-ea6d19a223d0.png "ステップバイステップで始めるKarma ゴール.png")


## Step 1 準備

### package.jsonの作成
以下のコマンドから作成します。返答はエンターでOKです。

```console:package.jsonの作成
npm init
```


### karmaとkarma-cliのインストール
karma-cliをインストールすることで``karma``とうつだけでプロジェクト内のkarmaを実行してくれます。

```console:karmaのインストール
npm install --save-dev karma
npm install -g karma-cli
```

### Karmaが動作しているか確認
この時点でkarma自体は実行できます。起動してみましょう。

```console:karmaの起動
karma start

09 05 2016 12:23:14.712:WARN [karma]: No captured browser, open http://localhost:9876/
09 05 2016 12:23:14.721:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
```

補足されたブラウザがないよ。と怒られてますね。
ですがブラウザで記載されたURLにアクセスすることは可能です。
以下の様な画面が表示されます。

![Screen Shot 2016-05-12 at 9.43.36 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/ef24581e-6bfb-de69-51dc-30836b43b27d.png "Screen Shot 2016-05-12 at 9.43.36 PM.png")


``karma start``はWebサーバを立てることと言ってもいいかもしれません。
そのWebサーバーにプラグインで機能を追加していくイメージです。

またStep6で出てきますがKarmaがコンソールに結果を出力する際にreportersにデフォルトの`progress`が使われています。


![ステップバイステップで始めるKarma Step1.png](https://qiita-image-store.s3.amazonaws.com/0/35595/a14a22f1-2e56-d948-de24-a6a8093e3137.png)



## Step 2 ログレベルを変更
KarmaのデフォルトのログレベルはINFOです。
学習時はDEBUGのほうが何かと都合がいいのでDEBUGに変更しましょう。
方法は2通りあります。


### その1 実行時のオプションで指定
``--log-level``で指定可能です。

```console:debugレベルを指定
karma start --log-level debug

09 05 2016 12:31:49.435:DEBUG [plugin]: Loading karma-* from /Users/howdy/VscodeProjects/study-karma/node_modules
09 05 2016 12:31:49.464:DEBUG [karma]: List of files has changed, trying to execute
09 05 2016 12:31:49.465:WARN [karma]: No captured browser, open http://localhost:9876/
09 05 2016 12:31:49.470:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
```

DEBUG行が追加されていますね。


### その2 設定ファイル(karma.conf.js)で指定
Karmaの設定は``karma.conf.js``がデフォルトで読みこまれます。

``karma init ``を実行して上記ファイルを簡単に作れますが、学習のため手動で作っていきましょう。

```console:karmaの設定ファイルを作成
touch karma.conf.js
```

```javascript:karma.conf.js
module.exports = function(config) {
    config.set({
        logLevel: config.LOG_DEBUG
    })
}
```

```console
karma start

09 05 2016 12:38:32.036:DEBUG [plugin]: Loading karma-* from /Users/howdy/VscodeProjects/study-karma/node_modules
09 05 2016 12:38:32.068:DEBUG [karma]: List of files has changed, trying to execute
09 05 2016 12:38:32.069:WARN [karma]: No captured browser, open http://localhost:9876/
09 05 2016 12:38:32.074:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
```


### どっちを使うべき？
特に理由がなければ設定ファイルを使いましょう。
設定ファイルで指定が可能でコマンドで指定できない項目がありますし、そもそも打つのが大変です。

コマンドオプションで使うケースとしては一時的に設定を変更したい時とかでしょうか。（コマンドオプションの方が設定ファイルより優先度が高いです）
以降は全て設定ファイルで記載していきます。


### Tips 設定ファイルについて
設定ファイルはKarmaによってrequireされます。
※require('./karma.conf.js')が内部的に呼ばれている形です。
そのため``module.exports``という形になっているわけですね。

また引数のconfigにはデフォルトの設定が入っています。
``config.set(...)``でデフォルト設定を上書きしていくイメージです。


![ステップバイステップで始めるKarma Step2.png](https://qiita-image-store.s3.amazonaws.com/0/35595/b9b13280-a747-23ae-55f5-bb9d8491311a.png)



## Step 3 Framework, ファイルの登録
Karmaにファイルを登録する方法について記載します。
登録することでKarma起動時に読み込まれます。
htmlでいう`<script>`で読み込むのと同じイメージです。

### テスト対象ファイルの作成と登録

```console:テスト対象ファイルを作成
mkdir app && touch app/app.js
```

中身はコンソールへのログ出力と、add,subtract関数を定義しておきます。

```javascript:app.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}
```


設定ファイルの`files `に上記ファイルを追加します

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
+       files: [
+           'app/app.js'
+       ],
        logLevel: config.LOG_DEBUG
    })
}
```

```console:karmaを実行
karma start

...
09 05 2016 21:46:52.236:DEBUG [watcher]: Watching "/Users/howdy/VscodeProjects/study-karma/app/app.js"
...
```

[watcher]行が増えていることが確認できます。



### Jasmineのインストール
テストフレームワークであるJasmineをkarmaで使うためにkarma-jasmineをインストールします。

```console:karma-jasmineのインストール
npm install --save-dev karma-jasmine
```

設定ファイルの``frameworks``にjasmineを追加します

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
+       frameworks: ['jasmine'],
        files: [
            'app/app.js'
        ],
        logLevel: config.LOG_DEBUG
    })
}
```

### テストファイルの作成と登録

```console:テストファイルを作成
mkdir test && touch test/appSpec.js
```


```javascript:appSpec.js
describe('add関数のテスト', function() {
    it('1 + 2 は 3', function() {
        expect(add(1, 2)).toBe(3);
    });
});
```

設定ファイルの`files`に追加します。
``*``をつかってパターンマッチで指定することが可能です。
※正確にはglobスタイルです。

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
+           'test/*Spec.js'
        ],
        logLevel: config.LOG_DEBUG
    })
}
```

#### Tips パターンマッチの読み込まれる順番
パターンマッチで複数登録が可能ですが、その場合に読み込まれるのはアルファベット順になります。


### Karmaを実行してブラウザでアクセス

```console:karmaを実行
karma start
```


ブラウザでアクセスしてみましょう。

```console:ブラウザでアクセスした後のコンソール
Chrome 50.0.2661 (Mac OS X 10.11.2): Executed 1 of 1 SUCCESS (0.006 secs / 0.001 secs)
```

アクセスした瞬間に処理が流れます。
以下の様な流れです。
ブラウザでアクセス→登録したjsファイルが読み込まれる→テストが実行される


### Tips 外部ライブラリを使っている場合
アプリケーションのjs内で[Moment.js](http://momentjs.com/)などの外部ライブラリを使っているケースもあるかと思います。
この場合もfilesに登録してあげればOKです。
※filesに記載した順番に読み込まれるので必要になるjsより先に書く形になります。
（つまりアプリケーションのhtmlで記載しているscriptタグと同じ順です)


![ステップバイステップで始めるKarma Step3.png](https://qiita-image-store.s3.amazonaws.com/0/35595/4d2e6d9a-c1f6-ff04-3e28-e96172bd1af3.png)




## Step 4 Launcherを登録
ブラウザから手動でアクセスするのは面倒です。
これを自動化するための仕組みがランチャーです。
ランチャーを使うことで``karma start``時に自動でテストを実行するURLを開いたブラウザが立ち上がります。

```console:chromeランチャーをインストール
npm install --save-dev karma-chrome-launcher
```

設定ファイルの``browsers ``にChromeを追加します

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
            'test/*Spec.js'
        ],
+       browsers: ['Chrome'],
        logLevel: config.LOG_DEBUG
    })
}
```

```console:karmaを実行
karma start
```

ブラウザが自動で起動しましたね。
browsersとなっているように複数指定することが可能です。
つまり複数ブラウザを同時にテストすることもできます。


### Tips ファイル監視による再実行
テスト対象ファイルでもテストファイルでもいいので書き換えてみましょう。
設定ファイルには記載していませんが``autoWatch``の設定がデフォルトでtrueになっており、ファイルの変更を監視しています。
そのため自動でテストが再実行されます。


![ステップバイステップで始めるKarma Step4.png](https://qiita-image-store.s3.amazonaws.com/0/35595/c056e8ee-4753-3fd0-e308-152d040e8eb5.png)




## Step 5 Preprocessorを登録
今まではブラウザでそのまま動作する素のJavascriptファイルを登録していました。
CoffeeScriptやTypeScriptやBabelを使用している場合は当然そのままでは動きません。
そのため **Karmaに読み込ませる前に変換**する必要があります。
このファイルの読み込みの前に処理を行うのが **プリプロセッサ**です。
ここではテストファイルをCoffeeScriptにしてみます。


### karma-coffee-preprocesserのインストール
CoffeeScriptをKarmaで使うために[karma-coffee-preprocessor](https://github.com/karma-runner/karma-coffee-preprocessor)をインストールします

```console
npm install --save-dev karma-coffee-preprocessor
```

### テストファイルをCoffeeScriptで作成する

```console:コピー
cp test/appSpec.js test/appSpec.coffee
```

```CofeeScript:appSpec.coffee
describe('add関数のテスト', () ->
    it('1 + 2 は 3', () ->
        expect(add(1, 2)).toBe(3);
    );
);
```

設定ファイルの``preprocessors ``にcoffeeを追加します。
また.jsから.coffeeの方を読み込むようにします。

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
-           'test/*Spec.js'
+           'test/*Spec.coffee'
        ],
+       preprocessors: {
+           'test/*Spec.coffee': ['coffee']
+       },
        browsers: ['Chrome'],
        logLevel: config.LOG_DEBUG
    })
}
```

```console:karmaを実行
karma start
```

テストファイルをCoffeeScriptで書くことができました。


### karma-coffee-preprocessorのオプションを設定
この状態だとjsファイルに変換した後の状態になっているためエラーが起きた時にCoffeeScriptのどこで起きたのかわかりません。

coffee-scriptモジュールにはソースマップを出力する機能があるためそれを利用するように教えてあげる必要があります。

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
            'test/*Spec.coffee'
        ],
        preprocessors: {
            'test/*Spec.coffee': ['coffee']
        },
+       coffeePreprocessor: {
+           options: {
+               sourceMap: true
+           }
+       },
        browsers: ['Chrome'],
        logLevel: config.LOG_DEBUG
    })
}
```

試しにこの状態でテストをわざと間違えてエラーにしてあげましょう。
すると以下の様にcoffeeのどこでエラーになったかが正確にわかります。

```console:エラー
Chrome 50.0.2661 (Mac OS X 10.11.2) add関数のテスト 1 + 2 は 3 FAILED
	Expected 3 to be 111111.
	    at Object.<anonymous> (/Users/howdy/VscodeProjects/study-karma/test/appSpec.js:3:30 <- appSpec.coffee:3:26)
```


### Tips CoffeeScript以外はどうする？
TypeScriptやBabelも同様に``karma-xxx-preprocessor``が提供されているのでそれらを使えばOKです。
WebpackやBrowserifyは目的は違いますが **事前に変換する**という意味では同じため同様にpreprocessorを使用します。
それぞれ使うプリプロセッサによってオプションが違いますので各々のサイトで確認しましょう。


![ステップバイステップで始めるKarma Step5.png](https://qiita-image-store.s3.amazonaws.com/0/35595/4e4eafc2-5b09-392c-5a5d-118ce6c05574.png)





## Step 6 Reporterを登録
レポーターを利用することでテスト結果をカスタマイズすることができます。
ここでは代表的な3つを紹介します。

### karma-mocha-reporter
[karma-mocha-reporter](https://github.com/litixsoft/karma-mocha-reporter)はテスト結果を見やすく表示してくれます。

```console:karma-mocha-reporterをインストール
npm install --save-dev karma-mocha-reporter
```

設定ファイルの``reporters ``にmochaを追加します

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
            'test/*Spec.coffee'
        ],
        preprocessors: {
            'test/*Spec.coffee': ['coffee']
        },
        coffeePreprocessor: {
            options: {
                sourceMap: true
            }
        },
        browsers: ['Chrome'],
+       reporters: ['mocha'],
        logLevel: config.LOG_DEBUG
    })
}
```

```console:karmaを実行
karma start
```

こっちのほうが私は好きですね。
![Screen Shot 2016-05-12 at 10.26.53 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/716a133b-1757-4752-03d0-b5bab1c74ba8.png "Screen Shot 2016-05-12 at 10.26.53 PM.png")

比較用に標準（変更前）も貼っときます。
![Screen Shot 2016-05-12 at 10.28.05 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/dcb96c8c-6134-6cac-619c-234f11b493c6.png "Screen Shot 2016-05-12 at 10.28.05 PM.png")



### karma-coverage
[karma-coverage](https://github.com/karma-runner/karma-coverage)はテストのカバレッジをhtmlで出力することができます。


```console:karma-coverageをインストール
npm install --save-dev karma-coverage
```

設定ファイルの``reporters ``にcoverageを追加します。
coverage対象を定めるために``preprocessors ``に対象のjsファイルを追加します。

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
            'test/*Spec.coffee'
        ],
        preprocessors: {
+           'app/app.js': ['coverage'],
            'test/*Spec.coffee': ['coffee']
        },
        coffeePreprocessor: {
            options: {
                sourceMap: true
            }
        },
        browsers: ['Chrome'],
-       reporters: ['mocha'],
+       reporters: ['mocha', 'coverage'],
        logLevel: config.LOG_DEBUG
    })
}
```


```console:karmaを実行
karma start
```


プロジェクトフォルダ直下に``coverage``ディレクトリが作成されます。

```text:coverageディレクトリの中身
coverage
└── Chrome\ 50.0.2661\ (Mac\ OS\ X\ 10.11.2)
    ├── app
    │   ├── app.js.html
    │   └── index.html
    ├── base.css
    ├── index.html
    ├── prettify.css
    ├── prettify.js
    ├── sort-arrow-sprite.png
    └── sorter.js

2 directories, 8 files

```

app.js.htmlをブラウザで開いてみましょう。
subtract関数のテストを行っていないため赤くなりパーセンテージが下がってます。
![Screen Shot 2016-05-12 at 10.35.32 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/209a518b-8d41-c405-ddcb-993d0495bf3a.png "Screen Shot 2016-05-12 at 10.35.32 PM.png")



### karma-junit-reporter
[karma-junit-reporter](https://github.com/karma-runner/karma-junit-reporter)はJUnitXML形式でテスト結果を出力できます。

```console:karma-junit-reporterをインストール
npm install --save-dev karma-junit-reporter
```

設定ファイルの``reporters ``にjunitを追加します。
junitReporter.outputDirに出力フォルダを指定します。（指定しない場合、プロジェクト直下にできて邪魔になります）

```diff:karma.conf.js
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'app/app.js',
            'test/*Spec.coffee'
        ],
        preprocessors: {
            'app/app.js': ['coverage'],
            'test/*Spec.coffee': ['coffee']
        },
        coffeePreprocessor: {
            options: {
                sourceMap: true
            }
        },
        browsers: ['Chrome'],
-       reporters: ['mocha', 'coverage'],
+       reporters: ['mocha', 'coverage', 'junit'],
+       junitReporter: {
+           outputDir: 'report'
+       },
        logLevel: config.LOG_DEBUG
    })
}
```

```console:karmaを実行
karma start
```

```text:reportディレクトリの中身
report
└── TESTS-Chrome_50.0.2661_(Mac_OS_X_10.11.2).xml

0 directories, 1 file
```


![Screen Shot 2016-05-12 at 10.43.10 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/e4e0db80-baea-fd04-86ca-90c6b2ea11b9.png "Screen Shot 2016-05-12 at 10.43.10 PM.png")


![ステップバイステップで始めるKarma Step6.png](https://qiita-image-store.s3.amazonaws.com/0/35595/ba9fae1c-2bc1-a638-e89a-344fa861518a.png)





## その他 Karmaの実行時オプション
前項までに扱っていた内容ですと`karma start`しか出てきませんでしたが
他にも`karma init`と`karma run`という2つのコマンドがあります。
それぞれ解説します。


### karma init
karma.conf.jsを対話形式で作るためのオプションです。
本記事では学習のために敢えて使いませんでした。
一度自分なりの設定ファイルを作ってしまったらそれをコピったほうが早いので気がします。
![Screen Shot 2016-05-15 at 8.28.37 PM.png](https://qiita-image-store.s3.amazonaws.com/0/35595/7e112008-0bbb-35b6-ce3b-92e4401dd6cc.png "Screen Shot 2016-05-15 at 8.28.37 PM.png")



### karma run
テストだけを実行するコマンドです。
`karma start`でKarmaのサーバーを立てておきます。(ブラウザもそのまま起動したままにしておく）
その状態で **別のコンソール**から`karma run`を実行することでテストを実行することが可能です。
ソースファイルを変更するとテストが再実行されますが、このときに裏で`karma run`が呼ばれているのだと思われます。



### karma start
主にやっていることは以下の3点です。

* KarmaのWebサーバーを立てる
* テスト実行用ブラウザーを起動する
* `karma run`を一度だけ呼ぶ


### Tips 設定ファイルの指定
init, start, runの全てでファイル名を指定することが可能です。
`karma start karma-dev.conf.js`のように書けます。

また本記事ではkarma.conf.jsしか扱いませんでしたが.coffeeでも記述可能です。
指定しない場合は以下の4ファイルを読みこむようになっています。
OSSのプロジェクトでkarma.conf.jsが見つからないときは.configにおいてあるかもしれません。

* ./karma.conf.js
* ./karma.conf.coffee
* ./.config/karma.conf.js
* ./.config/karma.conf.coffee

### Tips --single-run オプション
`--single-run`オプションを指定することでテストを一度だけ実行することが可能です。
karmaを動かした後にビルドする際に使用します。

`karma start --single-run`



## その他 設定ファイルの項目
Stepごとの手順では省略しましたが重要そうなものを記載しておきます。

詳細は[リファレンス](https://karma-runner.github.io/0.13/config/configuration-file.html)を参照してください。

### Tips 項目の種類は2種類ある
Karmaが用意している項目とプラグインが独自に定義した項目の2種類があるのに注意してください。
ここではKarmaが用意している項目しか扱いませんがStepの中で出てきた`coffeePreprocessor`は`karma-coffee-preprocessor`が独自に定義した項目です。
そのためKarmaのリファレンスには記載されていません。


### basepath
filesで読み込むファイルのベースを指定できます。
デフォルトは`''`です。
karma.conf.jsをプロジェクト直下から変更した場合はいじったほうが記載が楽になります。

### exclude
filesで登録したファイルから除外したいファイルを指定できます。
※files同様`*`を使った指定が可能です。


### plugins
自分で書くことはないかもしれませんが、仕組み上重要なので記載しておきます。
npmで各種プラグインをインストールした後に``karma.conf.js``に`jasmine`や`Chrome`と書くだけでなぜ使えるのかですが、このpluginsの設定のおかげです。
デフォルトで`karma-*`が指定されているため`karma-*`でマッチするnode_moduleを自動で読み込んでいるわけですね。

試しに``plugins:[]``と記載して実行すると以下のように見つからない旨のエラーになります。

```console:pluginが見つからない場合のエラー
...
Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
...
```

### autoWatch
デフォルトは`true`です。
filesで指定したファイルを監視して変更があったら再実行してくれます。


### autoWatchBatchDelay
デフォルトは`250`です。
監視対象ファイルが変更されてから何msテストを実行するまで待機するかどうかの設定です。
例えば5000を指定した場合、5秒間の間にファイル保存を何度やってもテストは5秒後に1回しか走りません。


### port
デフォルトは`9876`です。


### singleRun
デフォルトは`false`です。
CI用のモードです。
`true`を指定した場合、テスト実行後にサーバーやブラウザを落とします。


### client.args
デフォルトは`undefined`です。
karma-jasmineやkarma-mochaなどにオプションを渡すためのプロパティです。

例えばgrepを使えばテスト項目を絞ることができます。

```javascript:karma.conf.js
config.set({
    ...
    client: {
        args: ['--grep', 'add関数のテスト']
    }
})
```

`karma run`で指定することも可能です。以下のように`--`の後に指定します。

```console:部分的にテストを実行
karma run -- --grep='add関数のテスト'
```

#### Tips オプションについて
例えばjasmineは`specFilter`という機能を使ってテスト対象を絞り込むことが可能です。
grepを指定した場合、`karma-jasmine`がgrepの内容をjasmine上のspecFilterに登録してくれています。


## その他 プラグインの探し方
npmjsで検索になるのでしょうか。
良いやり方がありましたら教えて下さい。

* [Frameworkを探す](https://www.npmjs.com/browse/keyword/karma-adapter)
* [Launcherを探す](https://www.npmjs.com/browse/keyword/karma-launcher)
* [Preprocessorを探す](https://www.npmjs.com/browse/keyword/karma-preprocessor)
* [Reporterを探す](https://www.npmjs.com/browse/keyword/karma-reporter)



## あとがき
Karma自体はそんなに内容は深くないので問題はないのですがプラグインに渡すプロパティの設定はちょっと厄介かもしれません。
プラグインのドキュメントが整備されていないとソースを見ないとちょっとわからないかもです。。