*

Jasmine(JavaScriptテスティングフレームワーク)実践【Webアプリ編】

公開日: : 最終更新日:2014/05/26 JavaScript , , , ,


スポンサードリンク



Titanium mobileでスマホのアプリを作成しようとしているのですが、ユニットテストの仕組みはどうする?
との疑問を持ち、 Jasmineが良さげと調べていくうちに、HTMLとJavaScriptのWebアプリのユニットテストはどんな感じになるんだろうと思い、ググって みたのですが、ああ!、そうなんだと思える粒度のサンプルが無かったので作成してみました。といっても実際のアプリの入り口はHTMLで、テストの入り口 はJavaScriptなのですが・・・、
まあユニットテストなんでこの形でもOKだと思います。カバレッジもJSCoverで取得しようと思います。

今回の作業の流れは以下のようになります。

  1. テスト対象のアプリの説明
  2. テストケースの作成
  3. JSCoverを利用したカバレッジの計測

 

1 テスト対象のアプリの説明

検索キーワードの入力欄、検索ボタンが存在し、検索ボタンをクリックするとJSONをファイルを読み込み、一覧表示するアプリです。実際には、キーワード指定の検索処理はサーバ側の責務なので本アプリでは、何を入れても同じ結果が表示されます。そのテストまでやるとなるとBackbone.jsなどを利用してサーバサイドの呼び出しをモックアップしないといけないので、今回はここまでの物となっています。またBackbone.jsを利用したテストについても書きたいと思っています。

index.htmlの初期表示時の画面は以下の通りです。
cc9809a9-s

検索ボタンクリック後の画面イメージは以下の通りです。
ed0b9d12-s

ファイル構成は最終的には、以下の通りとなります。

利用するライブラリ

利用するライブラリはJQuery、Jasmine、Jasmine-jqueryとなります。JQueryとJasmineの説明は省略いたします。
Jasmine-jqueryはhttps://github.com/velesin/jasmine-jquery
にアクセスし、少し下にスクロールし、下の画像のhereをクリックするとダウンロードできます。
jasmine-jqueryダウンロード

テスト対象アプリのソース

ソースはindex.html、Render.js、index.cssです。
data.jsonは検索ボタンクリック時に表示するデータを格納したファイルとなります。

index.htmlの内容は以下の通りです。

Render.jsの内容は以下の通りです。

index.cssは以下の通りです。

2 テストケースの作成

テストケースの作成の作業は、以下の流れで行います。

  1. SpecRunner.htmlの修正
  2. Render_spec.jsの空実装
  3. 初期表示時のテストケースの実装
  4. 検索ボタンクリック時のテストケースの実装

2.1 SpecRunner.htmlの修正

プロジェクトのディレクトリ直下にJasmineのSpecRunner.htmlをコピーします。
次に、必要なファイルの参照を追加します。
追加するファイルは以下の通りです。

  • ib/jquery-2.0.3.min.js
  • lib/jasmine-jquery.js
  • js/Render.js
  • spec/Render_spec.js

その他の変更点としては、その他のファイルをUTF-8にしているので、
ファイルのエンコーディングの追加とUTF8でのファイル保存となります。
変更後のSpecRunner.htmlは以下の通りとなります。

2.2 Render_spec.jsの空実装

Render_spec.jsの実装ですが、まずは空のファイルを作成してテストを実行します。

 

実行結果は以下の通りです。
f2adb9fc-s

2.3 初期表示時のテストケースの実装

次に初期表示時のテストを実装します。index.htmlを見ていただくとわかるのですが、
bodyの中身にはid=rootのdivが1つ存在するだけです。と言うことでJasmine-JQueryのsetFixturesを利用します。これによってHTMLを読み込んだ状態を作り出せます。
詳細はJasmine-Jqueryの公式ページを参照ください。

テストの変更内容としては
beforeEachでsetFixturesを利用して<div id=”root”></div>のHTMLを読み込む。
beforeEachでRenderのインスタンスを作成し、インスタンスのreadyActionを呼び出す。
テストケースの検証内容としては、初期表示されているノードの存在確認の処理となります。

 

実行結果は以下の通りです。
029da3a7-s

2.4 検索ボタンクリック時のテストケースの実装

次に検索ボタンクリック時のテストを実装します。
JasmineのspyOnを利用して、検索ボタンのクリックイベントに登録されているメソッドが呼び出されたかとの検証を行います。検索キーワードを指定しない時と、指定したときの2つのテストケースを追加します。

 

実行結果は以下の通りです。
7a71fc79-s

3.JSCoverを利用したカバレッジの計測

最後にカバレッジの計測を行います。利用するツールはJSCoverです。
以下の場所からダウンロードできます。
以下の画面が表示されますので、少し下にスクロールします。
d47ee084-s

赤の四角の部分をクリックするとJSCover.jarがダウンロードできます。
757ee2d6-s

JSCoverの起動方法は以下のコマンドを実行するだけです。

上記のコマンドは、ダウンロードしたJSCover-1.0.5.jarをD:\JSCover\Jに配置 テストしたいアプリが存在するディレクトリのパス(ドキュメントルート)がC:\Users\test\Documents\Titanium_Studio_Workspace\JasmineTestTarget のときの実行例となります。
実際には「2.テストケースの作成」で作成したSpecRunner.htmlが存在するパスを指定ください。

実際の利用方法は、ブラウザでhttp://localhost:8080/jscoverage.html?SpecRunner.htmlにアクセスするだけです。アクセスすると「2.テストケースの作成」で作成したテストランナーが実行されます。
以下の画像のような画面が表示されるはずです。
d4c57e35-s

Summaryタブをクリックするとカバレッジが参照できます。
138c53f2-s

テスト対象jsはRender.jsなので、Render.jsをクリックします。
すると以下の様な画面が表示されます。
色の付いている数値は実行回数で、0は赤字、1以上は緑となります。
テストで呼び出されないダミーの処理を追加(赤の下線がある部分)したのですが、赤字の0になっています。
数値の無い行は実行不可能な行です。
415a2738-s

前述の通り、サーバサイドのロジックが無いので、と言うか作ってない・・・ので
本来はBackbone.jsなどを使ってテストケースを書くべきなのですが、
とりあえず、HTMLとJavaScriptで作成されたWebアプリのユニットテストはこんな感じになるのでは、
とのエントリーでした。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Jasmine(JavaScriptテスティングフレームワーク)入門【導入編】

Titanium Mobileを使ってスマホのアプリを作成しようと考えているのですが、 テスティン

記事を読む

Jasmine(JavaScriptテスティングフレームワーク)入門【Matcher編】

Jasmineにおける実際のテストケースの作成方法をMatcherをメインに記載します。 Ja

記事を読む

お勧め本紹介[JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで]

本日は私がいつも手元に置いているJavaScript本を紹介させていただきます。 「JavaS

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑