検索
リンク
タグ
ASP.NET
.NET
ASP.NET MVC
F#
Visual Studio
Azure
ASP.NET Core
ライトニングトーク
Plone
AJAX
Selenium
C#
jQuery
ADO.NET Entity Framework
SQL Server
JavaScript
LINQ
WebMatrix
EFCore
Fizz-Buzz
カテゴリ
最新の記事
最新のコメント
記事ランキング
最新のトラックバック
以前の記事
2022年 12月 2022年 11月 2022年 10月 2022年 09月 2022年 08月 2022年 07月 2022年 06月 2022年 05月 2022年 04月 2022年 03月 2022年 02月 2022年 01月 2021年 12月 2021年 11月 2021年 10月 2021年 09月 2021年 08月 2021年 07月 2021年 06月 2021年 05月 2021年 04月 2021年 03月 2021年 02月 2021年 01月 2020年 12月 2020年 11月 2020年 10月 2020年 09月 2020年 08月 2020年 07月 2020年 06月 2020年 05月 2020年 04月 2020年 03月 2020年 02月 2020年 01月 2019年 12月 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月 ファン
ブログジャンル
画像一覧
|
2015年 08月 27日
注意 - 本記事の内容は古いです。後日の記事 「せっかく Gulp に乗り換えたので、Grunt でやってた単体テスト実行も乗り換えちゃう」の参照をお勧めします。CommonJS モジュール構成では Web で使いにくい...以前、CLR/H カフェ #2 を主催し、TypeScript によるコードを単体テストフレームワーク「jasmine」を使って単体テストする環境作成と実践にチャレンジした顛末をブログ記事に投稿した。しかし前回投稿の内容、すなわち Node.js の jasmine パッケージによる jasmine コマンドでのテスト実行環境だと、ひとつ、最大の難点があった。 すなわち、テスト対象の TypeScript/JavaScript コードが CommonJS に基づくモジュール構成となっている必要があるのだ。 Node.js 上などでコンソールやサーバー側で実行されるような JavaScript コードであれば、当然のごとく CommonJS に基づくモジュール構成で実装することだろうから、このことが問題にはならない。 しかし、Web ブラウザ上で実行する JavaScript コードは (Browserify などを用いる場合を除き) 通常は CommonJS のようなモジュール構成は書かけない。 これが問題である。 例えばである。 Web ブラウザ上で実行する JavaScript コードとして app.js を書いていて、その app.js の中で myLib.js の中で定義されている関数を呼び出しているとするだろう。 このような場合で、前回投稿の環境で app.js を単体テスト対象にするためには、app.js の中で、 var myLib = require('myLib');と記述して、依存先である myLib.js もテスト実行環境に読み込む必要がある。 しかしクラシカルな Web ブラウザ上で実行するコードとしては、require などという関数やキーワード、仕組みはない。 このような app.js ファイルを Web ブラウザに読み込ませる HTML 中の script タグで読み込んだとしても、当然 「require ってナニ?」 というエラーになってしまうのである。 ここで Browserify やその他同類のツールを使って、CommonJS モジュール機構に基づいて書かれた .js ファイル群を "コンパイル" し、Web ブラウザ上で読み込み・実行可能な単一 .js ファイルを生成する、というやり方もできるだろう。 しかしさらなる問題もある。 さらなる問題 - DOM がないので AngulaJS とか使えないjasmine コマンドは Node.js を JavaScript 実行環境として動作するため、Web ブラウザ上で動作するのとは違い、AngularJS のような "window" とか "document" などの HTML DOM 要素にアクセスする JavaScript コード (に依存したコード) を実行できないのだ。これは jasmine コマンドが悪いわけではなく、テスト対象が違う(自分は Web ブラウザ用のコードを書いているのに、jasmine コマンドは Node.js で動くコードを対象としてる)のに、無理くり使おうとしてることによる問題である。 Grunt による環境構築に方針変更以上を勘案して、このたびは、前回投稿の jasmine コマンドによる環境はいったん捨てて、CommonJS も AMD もなんのモジュール機構も使わない、クラシカルな、Web ブラウザ上で実行するコードをテストする環境を構築し直すことにした。ということで、ここは JavaScript によるタスクランナーの大御所、Grunt ならば、Jasmine による単体テスト実行タスクも存在するのではないかと予想を立てた。 「grunt jasmine」で検索してみたところ、予想は的中。 ズバリ「grunt-contrib-jasmine」を導入すれば Grunt で "jasmine" というタスクが使えるようになり、望みのテスト実行環境が作れるとのこと。 ありがたいことにわかりやすい記事も多数見つかった。 Google 検索結果「grunt jasmine」 https://www.google.co.jp/search?q=grunt+jasmine テストは非表示なブラウザ上で実行される「grunt-contrib-jasmine」のもうひとつの利点は、"ヘッドレス" ブラウザ ( GUI を持たず、表示デバイスに描画することのない特殊なブラウザ ) である PhantomJS が依存パッケージとして同時に自動インストールされ、この PhantomJS 上で Jasmine によるテストを実行する、ということ。ヘッドレスとはいえ、JavaScript コードからしてみたら、普通の Web ブラウザとなんら違いはわからない PhantgomJS 上で実行されるわけで、当然、jQuery やら AngularJS やら、DOM を参照する JavaScript コードも読み込み実行できる。 詳しい説明は「grunt-contrib-jasmine」の GitHub プロジェクトサイトに掲載の公式ドキュメントに譲るが、テスト対象やテストコード(スペック) の .js ファイル、その他各種依存先の .js ファイルは、Grunt への指示書である Gruntfile.js に、それら .js ファイルのパスをワイルドカードなど交えながら記載する仕組みである(なので、モジュール機構に依らない)。 既存のネット上の解説記事と重複することもあり、ここでは詳細は割愛する。 代わりに、自分なりに gist (下記) に環境構築手順をまとめたので参照されたい。 https://gist.github.com/jsakamoto/5536cc58edd2902fb618 Visual Studio 環境との統合上記 gist にはさらに、Visual Studio で開発作業を行ってる場合に、さらなる統合を行う環境構築についても記述してある。自分は上記 gist に掲載の環境構築を果たしたことで、今では、 Visual Studio 上でテスト対象やテストコードの TypeScript ファイルを編集して Ctrl + S で保存(※) したら、 続けて Ctrl + R, Ctrl + J を打鍵するだけで即座にテストが実行され、 結果は Visual Studio の出力ウィンドウに表示される ようになった。 ※ Visual Studio の既定の構成であれば、.ts の保存時に .js へのコンパイルも同時実行される まとめ紆余曲折あったが、最終的にはこうして、 Visual Studio 上での快適な単体テスト実践環境を作ることができた。ただし、 「テスト失敗時、Visual Studio 出力ウィンドウに表示されるスタックトレースをダブルクリックしたら、該当行を Visual Stuio で開く」 仕組みがまだない、など、改善の余地はまだ残されている。
by developer-adjust
| 2015-08-27 22:48
| Web系一般
|
Comments(0)
|
ファン申請 |
||