帰ってきたネコブログ

唯一、自分だけMacBook Airっていうね。
別にWinノート持ってない訳じゃないけど、タイピングすると指が痛くなるので、
ギリギリまではこのスタイルで参加しようと思います。

という訳で、Visual Studio Code（以降、VS Code）を使って、
JavaScriptの単体テストに挑戦してみようと思います。

1. フォルダを作成して、VS Codeで開く

プロジェクトフォルダを作る感じですね。
今試したら、フォルダのドラッグ＆ドロップでも良さそう。

2. jasmineの初期化

ターミナルでプロジェクトフォルダに移動して、
jasmineの初期化を行います。

$ jasmine init
$ tree
.
└── spec
    └── support
        └── jasmine.json

2 directories, 1 file

すると、こんな感じでファイルが生成されます。

この時点で、テストを実行するとこんな感じ。
$ jasmine
Started

No specs found
Finished in 0.001 seconds

3. テストを追加する

“spec”フォルダに適当なファイルを追加して、テストコードを追加する。
“jasmine.json”に、
こんな感じのルールでテストコードが記述されたファイルを識別すると書かれているので、
"**/*[sS]pec.js"
今回は、”fooSpec.js”を追加して、

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });
});

このタイミングでターミナルからテストを実行するとこんな感じ。
$ tree
.
└── spec
    ├── fooSpec.js
    └── support
        └── jasmine.json
$ jasmine
Started
.

1 spec, 0 failures
Finished in 0.005 seconds

4. VS Codeからテストを実行する

Macだと、
Command + Shift + Pキーを押すとCommand Palletなるものが出るので、
“>tasks: Configure Task Runner”を入力する。
実際は、”>task”まで打てば候補に出てくるので選ぶだけ。

すると、”.settings”フォルダが作成されて、”tasks.json”が追加される。
.
├── .settings
│   └── tasks.json
└── spec
    ├── fooSpec.js
    └── support
        └── jasmine.json

jasmineコマンドを実行するだけなら、
“tasks.json”に元々存在する記述、こんな感じに書き換える。

{
	"version": "0.1.0",
	
	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
	"command": "jasmine",
	
	// The command is a shell script
	"isShellCommand": true
}

すると、Command + Shift + Bキーでテストが実行できるようになる。

5. タイプヒントを追加する

IntelliSenseのこと。

必要なファイルは、ここに集約されている。
https://github.com/borisyankov/DefinitelyTyped

最新版を取ってくるだけならこんな感じ。
$ git clone --depth 1 https://github.com/borisyankov/DefinitelyTyped

いわゆるコミット履歴は不要だったので、
“–depth 1″を付けて最新のファイルだけ落としてくる。

次に、jasmineのタイプヒントをフォルダに格納する。

(1) フォルダを作成する
.
├── spec
└── typings <-- 追加したフォルダ
    └── jasmine <-- 追加したフォルダ

(2) “jasmine”フォルダにタイプヒントをコピー

“DefinitelyTyped/jasmine/jasmine.d.ts”をコピーして、
“typings/jasmine”フォルダにコピー

(3) タイプヒントを一括で読み込むファイルを追加する

“typings”フォルダに、”tsd.d.ts”を追加して、以下のように記述。

/// <reference path="jasmine/jasmine.d.ts" />

(4) テストコードから”tsd.d.ts”を参照する

“fooSpec.js”先頭行に以下を追加。

/// <reference path="../typings/tsd.d.ts" />

これで、テストコードの関数にカーソルを合わせるといろいろ表示される。
そして、IntelliSenseも有効になる。

ちなみに、現在のフォルダ構成はこんな感じ。
.
├── .settings
│   └── tasks.json
├── spec
│   ├── fooSpec.js
│   └── support
│       └── jasmine.json
└── typings
    ├── jasmine
    │   └── jasmine.d.ts
    └── tsd.d.ts

6. テスト対象を追加する

ちょっと順番が逆になっちゃったけど、
実際は、”app”だの”lib”だのいろいろ存在してて、
それをテストすることになるんだと思う。(*1)

という訳で、”app”フォルダを追加して、
適当なファイルを追加して、そこにコードを追加する。

.
├── .settings
├── app <-- 追加したフォルダ
│   └── foo.js <-- 追加したファイル
├── spec
└── typings

“foo.js”の中身は、こんな感じ。

module.exports = function my_calc(a, b) {
	return a + b;
}

“fooSpec.js”も変更。

/// <reference path="../typings/tsd.d.ts" />

'use strict';
var target = require("../app/foo.js");

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(target(1, 2) === 3).toBe(true);
  });
});

これで”foo.js”のコードをテストできる。
実際は、モジュールを定義して、requireでモジュールを取得するんだろうけど、
ここからは今後の課題ということで。

まとめ

Visual Studio CodeではTypeScriptが優遇されているようで、
“tasks.json”に記述されているサンプルを見れば、それが一目瞭然ですね。
あと、タイプヒントが本当にすごいですね！

それと、CommonJSは、そういうライブラリがあるのかと勘違いしてました。
終始ちんぷんかんぷんなこと言ってゴメンなさい。

おしまい。

(*1) Webアプリ書いたことなくてゴメンなさい。。。

カテゴリー: JavaScript, コンピューター by ネコ on 2015年07月18日 | タグ: メモ