クライアントJavaScriptのテストにはmocha-phantomjsを使え

mocha-phantomjsは、その名前の通りmochaとphantomjsを使ってクライアントJSのテストができるヘッドレステストランナー。長く使ってるけど特に不満はないので使えばいいと思う。

metaskills/mocha-phantomjs https://github.com/metaskills/mocha-phantomjs

スケルトンを作った

クライアントJSのテスト書かれない理由として、環境構築の難しさがあると思う。そこで怠惰な人たちの為にGruntでプロジェクト用スケルトンを作った。ごじゆうにおつかいください

使い方

git clone git@github.com:mizchi/client-app-skeleton.git
cd client-app-skeleton
npm install
bower install
grunt test

結果

Running "mocha_phantomjs:all" (mocha_phantomjs) task
2014-02-11 15:24:31.105 phantomjs[61680:507] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead. 


  foo
    ✓ should return 


  1 passing (4ms)

二種類ある

mizchi/client-plugin-skeleton mizchi/client-app-skeleton

Client App Skeleton

自分がエンドポイントの、普通のアプリを書く用のスケルトン

Client Plugin Skeleton

クライアントで組み込まれる用のスケルトン。たとえばjQueryやBackboneみたいなプラグインを提供する用。テストと、サンプルプロジェクトをかけるようにした。

構成要素

browserify
bower
mocha-phantomjs

はやりの要素でつくりました

gruntfile.coffeeのサンプル

これは clinet app skeleton の gruntfile.coffee

module.exports = (grunt) ->
  grunt.loadNpmTasks 'grunt-bower-concat'
  grunt.loadNpmTasks 'grunt-mocha-phantomjs'
  grunt.loadNpmTasks 'grunt-browserify'
  grunt.loadNpmTasks 'grunt-este-watch'
  grunt.loadNpmTasks 'grunt-contrib-connect'
  grunt.initConfig
    bower_concat:
      all:
        dest: 'public/vendor.js'
        dependencies:
          'chai-jquery': ['jquery','chai']
        bowerOptions:
          relative: false

    browserify:
      app:
        files:
          'public/all.js': [
            'app/**/*.coffee'
          ]
        options:
          transform: ['coffeeify']

      test:
        files:
          'test/assets/test.js': [
            'test/**/*.coffee'
          ]
        options:

          transform: ['coffeeify']

    mocha_phantomjs:
      options:
        reporter: 'spec'
      all: ['test/assets/test.html']

    esteWatch:
      options:
        dirs: ['app/**/', 'test/**/']
      coffee: (filepath) ->
        console.log filepath
        ['build', 'test']

    connect:
      app:
        options:
          port: 8888
          base: 'public'

  grunt.registerTask "build", ["bower_concat", "browserify"]
  grunt.registerTask "default", ["build"]
  grunt.registerTask "test", ["build", "mocha_phantomjs"]
  grunt.registerTask "server", ["connect", "esteWatch"]

gulpを使わなかった理由

諸々のほしいものがなかった。自分で作る必要があるのでめんどい。