JavaScriptのテスト環境を整える その3

その1 その2

モジュール単位でファイル分割する。RequireJS使う。

前々回からのbower.jsonを編集。dependenciesにrequirejsを追加する。

{
    "name": "zakuni-js-template",
    "version": "0.0.3",
    "main": "main.js",
    "ignore": [
        "**/.*",
        "node_modules",
        "components"
    ],
    "dependencies": {
        "requirejs": "latest"
    },
    "devDependencies": {
        "mocha": "latest",
        "chai": "latest"
    }
}

色々と試行錯誤した結果、こうなった。

.
├── bower.json
├── camera.coffee
├── camera.js
├── components
│   ├── chai
│   ├── jquery
│   ├── mocha
│   └── requirejs
├── index.html
├── main.coffee
├── main.js
└── test
    ├── test.camera.coffee
    ├── test.camera.js
    ├── test.coffee
    ├── test.html
    └── test.js

index.html用のメインと、テスト用のmainは別のファイルにする(main.jsとtest.js)。
あと、テストもモジュール単位で分ける(camera.jsのテストはtest.camera.jsを作るようにする)。
mocha.setupとかmocha.runはtest.jsで行う。

中身はこういう感じになっている。


https://github.com/zakuni/js-template/tree/v0.0.3
RequireJS使おうとしたら時間かかってしまって最終的にちゃんと整理しきれなかった感があるので、そのうちまたまとめ直すかもしれない(しないかもしれない)。

JavaScriptのテスト環境を整える その2

前回の続き。

あとやりたいことは、CoffeeScriptを使ってる時でも同じようにテストを書けるようにするのと、ファイル分割。
どちらを先にやるかだけど、後でわざわざ書き直すめんどくささもさることながら、それで動かなくなって悩むのは嫌なので、Coffee化を先にやることにした。
前回のmain.jsは

var a = 1;

だけだった。
これをCoffeeScriptで書くと

a = 1

となるわけだが、これをコンパイルしたmain.jsを使うようにするだけで、前回書いたテストは通らなくなる。

なぜかというと、CoffeeScriptから生成されるJavaScriptは、無名関数で囲われていて、グローバル汚染を防いでくれている。
つまり、先ほどのmain.coffeeをjsにコンパイルすると

こうなるので、変数aには外部からアクセスできず、ReferenceErrorになってしまう。

尚、コマンドラインからmochaを使ってテストする分には

% mocha --compilers coffee:main.coffee

みたいにすると中でうまいことやってくれてcoffeeでもテストを通すことができる。
(今回書いてるやつそのままでは通らない。-uオプションでtddを指定したり、chaiをrequireする必要がある)

前回は素のJavaScriptの話だったのでブラウザで実行することを重視したけど、CoffeeScript書いてるならnpmも使ってることが多いだろうし、それなら素直にコンソールでmochaを使えばいいような気がする。

そして気づいたけど、前回使ったbowerはインストールするのにnpm使ってるだろうから、ブラウザにこだわる必要はないような気もしてきた。
ただ、mochaとかchaiをファイルでダウンロードしてきて使う人とかもいるだろうと思えば、意味はあるので一応続ける。

無名関数の中で宣言されているのでアクセスできないことについては色んな解決方法があると思う。
簡単な方法の一つは、windowオブジェクトのプロパティにしてしまうこと。

window.a = 1

テストコードは変えないままグリーンになる。

というわけでこういう風に書ける

ここではやってないけど、テストもcoffeeで書けばいいと思う。

そしてひと区切り。あとはファイル分割する。

ここまでまとめたやつ。
https://github.com/zakuni/js-template/tree/v0.0.2

CoffeeScriptのREPLでUnderscore.js使おうとしてハマった

結論を先に書くと、nodeとかcoffeeのREPLでは, _(アンダースコア)に最後の式の結果が入る。

なので

> _ = require 'underscore'
~略~

> _.VERSION
'1.3.1'

> _.VERSION
undefined

> _
'1.3.1'


みたいなことになる。

余談だけど、この性質があるので最初の _ への代入はわざわざ書かなくても
require 'underscore'
だけ書けば、少なくとも次の一回はUnderscore.jsとしての_を使えるね。