検索
リンク
タグ
Plone
SQL Server
Azure
Fizz-Buzz
jQuery
ASP.NET MVC
ライトニングトーク
JavaScript
Selenium
Visual Studio
ASP.NET Core
AngularJS
F#
C#
AJAX
WebMatrix
LINQ
ADO.NET Entity Framework
.NET
ASP.NET
カテゴリ
最新の記事
最新のコメント
記事ランキング
最新のトラックバック
以前の記事
2019年 11月 2019年 10月 2019年 09月 2019年 08月 2019年 07月 2019年 06月 2019年 05月 2019年 04月 2019年 03月 2019年 02月 2019年 01月 2018年 12月 2018年 11月 2018年 10月 2018年 09月 2018年 08月 2018年 07月 2018年 06月 2018年 05月 2018年 04月 2018年 03月 2018年 02月 2018年 01月 2017年 12月 2017年 11月 2017年 10月 2017年 09月 2017年 08月 2017年 07月 2017年 06月 2017年 05月 2017年 04月 2017年 02月 2017年 01月 2016年 12月 2016年 11月 2016年 10月 2016年 09月 2016年 08月 2016年 07月 2016年 06月 2016年 05月 2016年 04月 2016年 03月 2016年 02月 2016年 01月 2015年 12月 2015年 11月 2015年 10月 2015年 09月 2015年 08月 2015年 07月 2015年 05月 2015年 04月 2015年 03月 2015年 02月 2015年 01月 2014年 12月 2014年 11月 2014年 10月 2014年 09月 2014年 08月 2014年 06月 2014年 04月 2014年 03月 2014年 02月 2014年 01月 2013年 12月 2013年 10月 2013年 09月 2013年 08月 2013年 07月 2013年 06月 2013年 05月 2013年 04月 2013年 03月 2013年 02月 2013年 01月 2012年 12月 2012年 11月 2012年 10月 2012年 09月 2012年 08月 2012年 07月 2012年 06月 2012年 05月 2012年 04月 2012年 03月 2012年 02月 2012年 01月 2011年 12月 2011年 11月 2011年 10月 2011年 09月 2011年 08月 2011年 07月 2011年 06月 2011年 05月 2011年 04月 2011年 03月 2011年 02月 2011年 01月 2010年 12月 2010年 11月 2010年 10月 2010年 09月 2010年 08月 2010年 07月 2010年 06月 2010年 05月 2010年 04月 2010年 03月 2010年 02月 2010年 01月 2009年 12月 2009年 10月 2009年 09月 2009年 07月 2009年 06月 2009年 05月 2009年 04月 2009年 03月 2009年 02月 2009年 01月 2008年 12月 2008年 11月 2008年 10月 2008年 09月 2008年 08月 2008年 07月 2008年 06月 2008年 05月 2008年 04月 2008年 03月 2008年 02月 2008年 01月 2007年 12月 2007年 11月 2007年 04月 2007年 03月 2007年 02月 2007年 01月 2006年 11月 2006年 10月 2006年 09月 2006年 08月 2006年 07月 ファン
ブログジャンル
画像一覧
|
1 2016年 10月 27日
Web アプリケーション開発における、クライアント側スクリプト実装の話。
AngularJS を使った Web アプリクライアント側実装について、以前の投稿にて、Gulp の採用によって TypeScript ソースに対応するソースマップ付きでの Bundle & Minify を達成した。 さらに前回の投稿にて AngularJS における依存性注釈の自動生成を達成した。 このように、今更感あるものの、Gulp 採用に伴う開発環境改善を加速中の今日この頃なのだが、さて、単体テストの話。 過去の投稿にて紹介したとおり、クライアント側スクリプトの単体テストを実現するにあたって、テストランナー環境として Grunt とそのプラグイン ( grunt-contrib-jasmine ) を使用していた。 しかしここへ来て、前述のとおり、Bundle & Minify, 依存性注釈の自動生成のために Gulp とそのプラグインを使用するようになった。 となると、すでに Gulp でいろいろタスク実装してるのに、単体テストのためだけに Grunt を併用するのもなんだかなぁ、と思うようになってきた。 お前は Gulp 派なのか Grunt 派なのか、どっちかはっきりしろよ、みたいな。 ということで、その程度の理由・動機ではあったのだけれども、とにかく、Gulp に乗り換えに伴う Grunt 脱却を図ることにした。 Gulp で JavaScript 単体テスト実行を実現するプラグインは?乗り換えということで、grunt-contrib-jasmine で実現していたのと同じ環境を Gulp 上で再構築するには、どんな Gulp プラグインを採用するのがいいのかな、とネットでいろいろ検索。そうやって情報収集しているうちに、Gulp のプラグインじゃなくて、 "karma" を使えばいいじゃん ということがわかってきた。 "karma" とは、コマンドラインツールの名前。 実は "karma" の存在も以前から知っていた。 AngularJS を学習しはじめたときに、某書籍で「AngularJS 界隈では karma 使ってる事例あるよ」的なことが書かれてて、そこで "karma" なるものの存在を知った。 しかしその書籍からは "karma" とはなんなのかその本質がよく掴めなかった。 結果、自分の中では 「karma とは E2E テストの自動化に使う何からしい」という誤った認識で留まってしまっていた。 ところがこうして改めて、JavaScript 単体テストの実行環境を求めているうちに、ようやく見えてきたのだが、 karma って要するにテストランナーだったのですね。 ※ほんっと、今更ですみません。 つまり、GUI 操作を伴う E2E テストに限らず、単体テストの実行にも普通に karma 使えるのだということがわかった。 ということで、karma を使った JavaScript 単体テストの実行環境を整えてみた。 karmaによるテスト実行環境の構築npm パッケージのインストールまずは必要となる下記 npm パッケージをプロジェクトにインストール。
> npm install --save-dev karmaなお、ヘッドレスブラウザ PhantomJS も、karma-phantomjs-launcher の依存関係解決により、プロジェクトにインストールされる。 ここでちょっと嬉しかったのは、Grunt のプラグイン (grunt-contrib-jasmine) では PhantomJS v.1.x でしか動作しなかったのだが、上記 karma-phantomjs-launcher では PhantomJS v.2.0 がインストールされること。 karma の構成ファイル「karma.conf.js」の作成さて必要な npm パッケージのインストールが済んだら、karma に対し、どのようにテストを実行したらよいのかを示す設定ファイル「karma.conf.js」を新規作成して記述する。下記のとおり karma コマンドを実行することで、コンソール上の対話形式で「karma.conf.js」を初期作成することができる。 > .\node_modules\.bin\karma init上記を実行すると、karma コマンドから、どのような構成にするかコンソール上での対話が始まる。 下図の要領でこれに応えて、karma.conf.js の初回生成を完遂させる。 ![]() こうして karma.conf.js ができたら、続けて下記要領で内容を編集して完成させる。 karma.conf.js は設定項目が多く見た目で怯みがちだが、特記すべき点に絞ると下記の要領となる。 module.exports = function(config) { karma によるテストの実行以上でお膳立てが整ったら、いよいよ実行である。コマンドプロンプトにて > .\node_modules\.bin\karma start karma.conf.jsというように、start コマンドと構成ファイル名 (= karma.conf.js) を引数に指定して karma コマンドを実行する。 すると
バッチリである。 これで grunt-contrib-jasmine による単体テスト実行環境から karma ベースの環境に完全移行できた。 もう grunt は使っていないので、「npm uninstall grunt --save-dev」して大丈夫である。 なお、単体テストフレームワークは jasmine のまま変更しなかったので、既存の単体テストコードは一切変更せずに済んでいる。 さらにソースマップ読み込みも!さらに、これは予想・期待していたものではなかったのだが、karma であれば、テスト失敗時のレポートなどで、コンパイル元の TypeScript ソース行で該当箇所をレポートする ように構成できることがわかった。 まず必要となるのは "karma-sourcemap-loader" という npm パッケージ。 これをプロジェクト構成に追加。 > npm install --save-dev karma-sourcemap-loader次に、karma.conf.js 中にて、"プリプロセッサ" の指定に karma-sourcemap-loader を追加する。 ...こうすることで、TypeScript のコンパイル時に同時生成したソースマップファイルが読み込まれ、テスト実行後のレポート表示において、TypeScript ソースコード上でのファイル名と行番号とで表示されるようになった。 テスト失敗が報告された JavaScript の該当行から、コンパイル元の TypeScript ソースコード上での該当行を人力作業で特定するのは、不可能ではないとはいえまずまずの労力を要する。 そんな非生産的な、機械で解決できるはずの課題が、実際のところ今日まで grunt-contrib-jasmine 環境では解決できていなかったのだから、こうしてこの課題が解決され、大変晴れ晴れしい気分になった。 改めて、karma をはじめ各種ソフトウェアプロダクトに貢献されている方々に感謝である。 おまけこうして構築した karma による単体テスト実行環境だが、この単体テストを実行するにあたり、自分の場合、コマンドプロンプトから直接の karma コマンド実行をしていない。代わりに、npm を一段階挟んでいる。 つまり、packages.json 内に、karma 実行コマンドを記載しておいてある (下記)。 ...こうしておくことで、「npm test」を実行することで単体テストが実行されるようになっている。 直接 karma を実行すればよいものを、わざわざ npm を経由しているのなぜか? それは、自分の主たる開発環境が Visual Studio であることに由来している。 Visual Studio 上の設定で、Ctrl+R, Ctrl+J のキーコンビネーションが打鍵されると、「npm test」を実行して、結果を Visual Studio 内のウィンドウ (出力ウィンドウ) に表示するようにしてあるのだ。 そのため、npm 側で実際のテスト実行コマンドを隠蔽しておくと、
すなわち、どのプロジェクトを Visual Studio で開いても、共通のキーボード操作 Ctrl+R, Ctrl+J でテストが実行される、という仕掛けである。 なお補足として、上記 package.json に記述した karma コマンドに記載のオプションスイッチだが、
Gist にサンプルコードありますこれまでの内容と、実際に動作している構成フィル類とを、下記 Gist に置いてある。Jasmine による TypeScript/JavaScript 単体テストを実行する環境を作る - karma 編 https://gist.github.com/jsakamoto/e4a957821216c38cdb7e9e20ba17e569 こちらも適宜参照されるとよいかもしれない。 以上、ご参考までに。 ▲
by developer-adjust
| 2016-10-27 23:03
| Web系一般
|
Comments(0)
1 |
ファン申請 |
||