Blackbing Playground

browserify and karma test

發表於 | 分類於 ， ， | |

[2014/07/10 update] No need to use karma-browserify

browserify

browserify 真的是個很棒的東西，可以用

輕易的把程式模組化，由於可以很輕易的拆成模組，就可以針對模組來寫 test case。之前在玩 AngularJS 時注意到 [karma](http://karma-runner.github.io/0.12/index.html)，可以真的run browser engine 來跑 unit test 甚至是 end to end test。原本我以為很簡單可以將 karma test 整進專案，但因為 project 用到 coffee，網路上找到的方式找不太到目前用到的需求（gulp + browserify + coffee + karma test)。所以研究了一下，給有需要的人做參考。
1
2
3
4
5
6
7
8
9
# package.json
會用到的 library，比較特別的是 [karma-browserify](https://github.com/xdissent/karma-browserify)，這個是 karma 的 plugin，用在 karma 的 preprocessors，將 test 的程式做 browserify。
``` 
+    "karma": "^0.12.16",
+    "karma-browserify": "^0.2.1",
+    "karma-jasmine": "^0.1.5",
+    "karma-phantomjs-launcher": "^0.1.4",

gulp test task

task 沒什麼特別的，其實只是執行

start karma.conf.js```，只是把執行的 script 用 gulp task 包起來而已。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```coffeescript
gulp = require("gulp")
exec = exec = require('child_process').exec
$ = require("gulp-load-plugins")()
gulp.task "test", (callback)->
  karmaCommand = './node_modules/karma/bin/karma'
  karmaConfig = 'karma.conf.js'
  exec("#{karmaCommand} start #{karmaConfig}", (err, stdout, stderr)->
    $.util.log stdout
    $.util.log stderr
    callback(err)
  )

karma.conf

karma 的設定主要是參考 karma-browserify，也可以直接參考我的設定 karma.conf.js。

unit-testing

都設定好之後就可以開始寫測試了，最棒的部分就是可以單獨測試某個 module。例如：

1
2
3
4
5
6
auth = require("../app/scripts/service/auth")
describe "service/auth", ->
  it "should be login", ->
    expect(auth.login()).toEqual('login')
  it "should be logout", ->
    expect(auth.logout()).toEqual('logout')

如此就可以把跟 UI 沒關係的 module 抓出來單獨做 unit-testing，而環境設定好之後我想 end to end testing 應該對 karma 來說都是可以相對簡單的事情了，然後要跑什麼 test report 應該就都可以了，喔耶！

也可以直接參考我的 repository：
https://github.com/blackbing/htccs-webapp/tree/develop