Learning to Code

プログラミング勉強記録

【JavaScript】TDDをするためにNode.jsとJasmineを導入する(Ubuntu 16.04)

・Test Driven Development(テスト駆動開発

実際にコードを書く前に、動作を自動で確認するテストコードを書いて、
そのテストが合格するように開発を進める方法。

テストがないと一回一回手動で機能の確認をしないといけないので、ミスを見逃しがちだし、
時間もかかる。テストを書いてから機能開発というと二度手間っぽいというか、
効率は悪そうだが実際はこっちのほうがスピーディと言われている。

JavaScriptをテストするには

テストをするには言語ごとに異なる環境を整える必要がある。 RubyRspecは聞いたことがあったが、JavaScriptでテストをするにはNode.jsを使えるようにする必要がある。

JavaScriptはブラウザ上で動く言語だが、 Node.jsはサーバー上でも動くJavaScriptとのこと。
普及した理由は、クライアントサイドもサーバーサイドも同じ言語(JavaScript)で書けて楽だから、
ということらしい。

参考: 

eng-entrance.com

Node.jsをインストールすると、Jasmineというテスト用のフレームワークが使えるようになる。
まずはこれらの環境を整えることから始める。

実際はこのあたりのことも散々調べてからようやく分かった。
最初はJasimineをapt-getしたらすぐ使えるようになるだろくらいにしか考えていなかった。
一応GithubのREADMEは見たものの、内容がさっぱり分からない(今でもいまいち分からない)。

github.com

・Node.jsとnpmをインストール

Node.jsを使うに当たってnpmという言葉にも遭遇。 これはNodeのパッケージ管理ツールで、ここにNode.jsで使える便利なツールが次々と開発されては追加されているらしい。
つまりここにJasimineも出てくるわけだが、まずはNodeのインストールから。

色々ググったがまずはこのサイトを参考にNodeをインストール。

jp.godaddy.com

いつも通りapt-getを使ってインストール。
Node.jsをインストールすると自動的にnpmもインストールされるらしいというのはこの時は知らず、
両方インストールした。

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

※ここで注意書きが。Ubuntuでは他のプログラムとの干渉を避けるため
 Node.jsはnodeではなくnodejsというコマンドが割り当てられているとのこと。
 これを見落としたために後に混乱する原因に・・・

このサイトを見ると、「インストールされたか確認するにはnodejs -vを実行するように」
とあるのだが、なぜかnode -vを実行しては"No such file or directory"のエラーで慌てるということを繰り返してしまった。

www.digitalocean.com

実はインストールされたか確認する前に、適当なディレクトリ上にインストールをしてしまったため、
ルートディレクトリに移動させようとGUI上で色々動かしていた。 node -vがエラーになるのはそれが原因だと勝手に思い込み、ドツボにはまったのであった。
注意書きをちゃんと見ていればそんな目には合わなかったのに・・・
npmのサイトにはUbuntuのことに言及がなく、node -vで確認してねと書いてあることも余計に混乱する要因になった。

www.npmjs.com

その後もpackage.jsonのファイルを書き換えてみたり、設定を色々いじってみたのだが、
何かしらのエラーが出続け、場当たり的に対処したものの...
最終的にはこのエラーが解決しない状態となった。"/usr/bin/env: node: No such file or directory"

結果的にはnodejsにnodeへの仮想リンクを貼る("ln -s /usr/bin/nodejs /usr/bin/node")という方法でこのエラーは解消することが出来た。 node -vnodejs -vも正しく動作する。

・Jasmineをインストール

JasmineのGithubに、npmを利用したインストール方法が書かれているのでこれを参考に実行。 グローバルインストールとローカルインストールの違いがいまいち分からず、 かつこれに関してはどこででも使えたほうが良いのかなと思ったため、 グローバルを実行(その後うまく動かなかったのでローカルインストールも実行した。コンフリクトがあれば削除する気だったが今のところ正常)。

# Local installation:
npm install --save-dev jasmine

# Global installation
npm install -g jasmine

Jasmineでテストをするには、まずテスト対象のjsファイルと、テスト自身を書き込むspec.jsファイルが必要。 jsファイルには以下のように書き込む。var以下の関数部分は普段通り。 最後の行のmodule.exports=の部分にはファイル名を入力し、テスト用のspec.jsファイルが読み込めるようにする。

// ファイル名: helloWorld.js  

var helloWorld = function() {
  return 'Hello, World!'
}

module.exports = helloWorld

テスト用のファイルはこんな感じ。あくまで実行環境を整えるところまでしかやっていないので、 記法はまだ分からない。ぱっと見でだいぶイメージは湧きやすいが。 helloWorldの関数を実行した時に、"Hello, World!"という文字列が実行されればパスするというテスト。

var helloWorld = require('./helloWorld');

describe('Hello World', function() {
  it('says hello world', function() {
    expect(helloWorld()).toEqual('Hello, World!');
  });
});

ファイル構成は以下の通り。jsファイルとspec.jsファイルは同じディレクトリ内に置く必要がありそう。

hello_world/
 ├ node_modules/
 ├ spec/
  │   └ helloWorld.js
  │   └ helloWorld_test.spec.js
  ├ package.json
  │ 
・テストを実行するには コマンド

以下のどれでも実行できる。

1 npm test

2jasmine-node helloWorld_test.spec.js

3jasmine helloWorld_test.spec.js

ただし3番目のコマンドだとメッセージ内容が簡略化されたものになる。
1か2のほうが使いやすそうな印象。