ホーム > JavaScript > WebStormでpower-assertが動くまで。

WebStormでpower-assertが動くまで。 このエントリーを含むはてなブックマーク はてなブックマーク - WebStormでpower-assertが動くまで。

2015 年 9 月 5 日

OSはWindows 7 Proの64bitです。
ランナーにKarmaを、フレームワークにMochaを、ブラウザにPhantomJSを使いました。

WebStorm: The Smartest JavaScript IDE

a lightweight yet powerful IDE,

power-assert-js/power-assert

Provides descriptive assertion messages through standard assert interface.

Karma – Spectacular Test Runner for Javascript

a test runner that fits all our needs.

Mocha – the fun, simple, flexible JavaScript test framework

a feature-rich JavaScript test framework running on Node.js and the browser,

PhantomJS | PhantomJS

a headless WebKit scriptable with a JavaScript API.

1.Node.jsをインストール

https://nodejs.org/」から「node-v0.12.7-x64.msi」をダウンロードして実行するだけですが、インストール先はユーザフォルダの下に変更します。
npmモジュールの管理をWebStormでする場合、デフォルトのフォルダだと書き込みに管理者権限が必要なためWebStormを管理者権限で起動しなければいけなくなります。
01
その他はインストーラのデフォルト通りです。

2.npmをアップデート

WebStormのnpmモジュール管理機能でnpm自身をアップデートすると失敗してしまう(※1)ので、直にアップデートしておきます。
02
※1 Mac版では成功していたのですが、原因は追っていません。(あとで調べる、かもしれない。)
※2 Node.jsをインストールしたフォルダでコンソールを開いていることに注意してください。また「-g」オプションは付けません。

3.WebStormをインストール

とくに注意すべきことはなかったので省略します。インストーラにしたがってください。

4.npmモジュールをインストール

WebStormを起動してプロジェクトを開き、メニューの「File」から「Settings…」を選択して設定画面を開きます。
設定画面が開いたら「Languages & Frameworks」→「Node.js and NPM」と辿ります。
03
「Sources are not configured.」と言われているので「Configure…」ボタンを押してダウンロードしておきます。
04

ここまできたら、次に必要なモジュールをインストールします。
「Packages」の右にある「+」ボタンを押して下記のモジュールをインストールしてください。

  • karma
  • karma-espower-preprocessor
  • karma-mocha
  • karma-phantomjs-launcher
  • power-assert

05

最後に「karma-cli」だけは「-g」オプションを付けてインストールします。

Karma – Installation

you might find it useful to install karma-cli globally.

06

すべてインストールが終わるとこのようになります。
07

5.Karmaを初期化

WebStormでターミナルを開いてイニシャライザを実行します。
フレームワークは「mocha」を、ブラウザは「PhantomJS」を選択しています。(※1)
ここで選択した内容は設定ファイルに書き出されるので、あとで変更出来ます。
08
※1 コメントにもありますが、文字を打つのではなくTabキーで選択します。

6.Karmaの設定ファイルを編集

プロジェクトのフォルダ直下に設定ファイル「karma.conf.js」が作られているので、エディタで開きます。
編集する場所は下記の2箇所です。

// list of files / patterns to load in the browser
files: [
  'node_modules/power-assert/build/power-assert.js',
  '*.js',
  'test/**/*.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  'test/**/*.js': ['espower']
},

7.Karmaを使う設定

メニューの「Run」から「Edit Configurations…」を選択して設定画面を開きます。
選択画面が開いたら「+」ボタンを押して「Karma」を選択します。
09

「Configuration file」に「6」で作ったファイルを指定します。
10
11

ここまで来たら設定は完了です。

8.テストの実行

走らせるテストはpower-assertの例からお借りして、「6」で作った設定の通り「test/mocha_node.js」に置きました。

power-assert-js/power-assert

Target test code (using Mocha in this example)

また、

var assert = require('power-assert');

の行のみ外しています。

右上のプルダウンから「7」で作った設定を選択して、実行ボタンを押します。
12

テスト結果はこのように表示されます。
13


カテゴリー: JavaScript タグ:
コメントは受け付けていません。