テストワークベンチの最終ツールは、ユニットテストの開発環(huán)境です。この例では、test’emを使用します。 Test’emは、連続テスト環(huán)境を設(shè)定および実行するための便利なスクリプトのコレクションです。選択した場合、スクリプトを自分で書いて、環(huán)境を手動で管理することができます。しかし、Toby Ho（Test’emの作成者）は、私たちにトラブルを救うことができる素晴らしいパッケージをまとめました。

TODOSデータベース

アプリケーションは、TODOの情報を保持するデータベーステーブルから始まります。このテーブルを作成するために使用できるSQLは次のとおりです。

そして、テーブルがテストデータを入れた後のテーブルがどのように見えるかを次に示します。

<span>var sum = 2 + 2;</span>

id

當(dāng)社のWebアプリケーションにはこのデータベースへのアクセスが必要なため、標(biāo)準(zhǔn)のRESTインターフェイスを提供します。 APIはRubyコンベンションに従いますが、サーバーテクノロジーによって簡単に実裝できます。特に：

get api/todos/nnnは、nnnに等しいIDを持つtodoのJSON表現(xiàn)を返します。

put api/todos/nnnは、リクエストでjsonエンコードされた情報を使用して、nnnに等しいIDでtodoを更新します。
delete api/todos/nnnデータベースからnnnに等しいIDでtodoを削除します。
Rubyが特に好きではない場合、ソースコードにはこのAPIの完全なPHP実裝が含まれています。
• javascriptライブラリ
• 控えめなアプリケーションは、ライブラリなしで純粋なJavaScriptに実裝するのに十分なほど簡単ですが、はるかに大きな計畫があります。小さいかもしれませんが、最終的にはアプリは驚くべき機能と楽しいユーザーインターフェイスを備えています。その日に備えて、究極のキラーアプリをサポートできるフレームワークの上に構(gòu)築します：
• jquery dom操作、イベント処理、サーバー通信のための。
• underscore.js多くの不可解なユーティリティを使用してコア言語を強化します。
• backbone.jsモデルとビューの観點からアプリケーションの構(gòu)造を定義する。
htmlスケルトン
アプリケーションを構(gòu)成するコンポーネントがわかったので、それをサポートするHTMLスケルトンを定義できます。 （まだ）派手なものはありません（まだ）、最小限のHTML5ドキュメント、いくつかのJavaScriptファイル、そして物事を開始するための小さなコード。

開発中のテスト

<span>var sum = 2 + 2;</span>

ツールを選択し、アプリケーションを指定したので、開発を開始する時が來ました。最初のタスクはツールのインストールです

assert<span>.equal(sum, 4, "sum should equal 4");</span>

• todos.html：アプリケーション用のスケルトンHTMLファイル、上に完全に示されています。
testem.json：test’emの構(gòu)成ファイル。これについてはまもなく詳細に説明します。
API/：REST API実裝のフォルダー。
• API/HTACCESS：REST APIをサポートするApache Webサーバーのサンプル構(gòu)成。
  • API/TODOS.PHP：PHPコードREST APIを?qū)g裝します。
  lib/：アプリ自體とテストフレームワークで使用されるJavaScriptライブラリのフォルダー。
• lib/backbone-min.js：backbone.js
  lib/chai.js：chai assertion briveral。
  lib/jquery-1.9.0.min.js：jqueryの削除バージョン。
  lib/sinon-1.5.2.js：sinon.jsライブラリ。
  lib/sinon-chai.js：sinon.js chaiのアサーション。
  lib/underscore-min.js：underscore.js
  • mysql/：アプリケーション用のmysqlコードのフォルダー。
  mysql/todos.sql：mysqlコマンドでアプリケーションデータベースを作成します
• PHP-LIB/：PHPライブラリのフォルダーと、アプリケーションのREST API用の構(gòu)成。
  PHP-LIB/DBCONFIG.INC.PHP：REST APIのPHPデータベース構(gòu)成
• src/：クライアント側(cè)のアプリケーションコードのフォルダー。
  • src/app-todos.js：アプリケーション。
• テスト/：テストコードのフォルダー。
  • test/app-todos-test.js：アプリケーションのテストコード。
  test/mocha.opts：mochaの構(gòu)成オプション。これについては、次のセクションで説明します
• • 開発中、これらのファイルのうち3つのファイルのみに関心があります。TESM.JSON、SRC/APP-TODOS.JS、およびTEST/APP-TODOSTEST.JS。
  • test’em
  の構(gòu)成
  実際の開発前の最後のステップは、Test’em構(gòu)成の定義です。その構(gòu)成はJSON形式のtestem.jsonにあり、あらゆるテキストエディターで作成するのに十分なシンプルです。 Mochaを使用していることを指定し（Test’emはいくつかのフレームワークをサポートしています）、JavaScriptファイルをアプリケーションとテストコードが必要とします。

の開発を開始します

最初のテストケース

真のテスト駆動型開発の精神では、テスト/App-todos-test.jsファイルに最初のテストケースを記述することから始めます。他の優(yōu)れたWebアプリと同様に、グローバルネームスペース汚染を最小限に抑えたいと考えています。そのためには、すべてのコードを含むために、単一のグローバル変數(shù)TODOAPPに依存します。最初のテストケースでは、グローバル名スペース変數(shù)が存在することを確認(rèn)します。

<span>var sum = 2 + 2;</span>

テストブロック內(nèi)で、各テストケースをテストするもので文書化します。それがIT（）関數(shù)の目的です。テストケースを読む方法は、describe（）とit（）文字列を単一のステートメントに結(jié)合することです。したがって、最初のテストケースは

テストコード自體はIT（）ブロック內(nèi)にあります。私たちのテストケースは

assert<span>.equal(sum, 4, "sum should equal 4");</span>

端子ウィンドウも自動的に更新されます

しばらく後退して、何が起こっているのかを考えてください！テストコードまたはアプリケーションのいずれかに変更を加えるたびに、Test`EMはすぐにテストスイート全體を再実行します。私たちがしなければならないのは、畫面の隅にTest’emのブラウザまたは端子ウィンドウを表示できるようにすることです。リアルタイムでコードの健康狀態(tài)を見ることができます。バグが作業(yè)している場所とは異なるコードの一部に現(xiàn)れても、バグを?qū)毪工毪趣工挨摔铯辘蓼埂％啸挨驅(qū)毪筏繒r期を把握するために、時間、數(shù)日、または數(shù)週間の新しいコードを掘り下げることはもうありません。

モデルのテスト

開発環(huán)境が完全に確立されたため、アプリケーションの開発を開始できます。私たちのアプリはTODOのリストを表示しているので、それらのTODOのモデルを作成することは良いかもしれません。モデルは、TODOのタイトルとそのステータスの両方を追跡する必要があります。合理的なデフォルトでTODOを作成できる検証を検証するユニットテストを追加しましょう。

<span>var sum = 2 + 2;</span>

テストブロック內(nèi)で、すべてのテスト前に実行する機能を定義できます。それが、Beforeeach（）ブロックの目的です。上記の例では、すべてのテストの前にTODOの新しいインスタンスを作成しています。
• Mochaフレームワークは、JavaScriptコンテキスト（つまり、これの値）がすべてのテストケースで一貫していることを自動的に確認(rèn)します。そのため、This.todoを1つの関數(shù)（beforeeach（）パラメーター）で定義し、他の関數(shù)（IT（）パラメーターなど）で安全に參照できます。 Mochaがこの一貫性を提供するために舞臺裏で作業(yè)しなければ、JavaScriptは各関數(shù)の異なるコンテキストを定義します。
• もちろん、モデルコードをまだ作成していないため、すべてのテストが失敗します。 （そして、私たちはそれをすぐに知るでしょう。）しかし、モデルのコードを追加したら、テストが合格し、途中です。
サードパーティの機能にスタブを使用する

assert<span>.equal(sum, 4, "sum should equal 4");</span>

スタブを所定の位置に配置すると、テストケースを使用してモデルの動作を検証できます。最初のテストケースでは、すぐにTODOのタイトルを新しい価値に設(shè)定しました。タイトルプロパティが変更されているため、モデルにバッキングストアを更新してもらいたいと考えています。スタブが呼び出されたことを単純に確認(rèn)するために確認(rèn)します。モデルをこれらのテストに合格させるために、変更イベントを探して適切に対応できます。

<span>var sum = 2 + 2;</span>

もちろん、私たちのアプリは、実際にTODOをユーザーに表示せず、HTMLを作成する必要がある場合、誰も何の役にも立たないでしょう。その機能にはバックボーンビューを使用します。些細なアプリでは、各TODOをリスト項目としてレンダリングしたいだけです。これが私たちを始めさせるテストケースです。

）であることを確認(rèn)します。これらのテストに合格するために必要なコードは、簡単なバックボーンビューです。

assert<span>.equal(sum, 4, "sum should equal 4");</span>

次に、そのリスト項目ビューの詳細なコンテンツを開発できます。例として、完全なリスト項目が次のように見えるようにしたい。

<span>expect(sum).to.equal(4);</span>

テストケースでは、jqueryを利用して、ビューの主な要素から個々の要素を抽出できます。

最後のテストケースでは、モデルのsave（）メソッドをスタブしたことに注意してください。プロパティをデフォルト値から変更しているため、モデルはその変更をバッキングストアに維持しようとします。ただし、ユニットテスト環(huán)境では、データベースやサーバーAPIはありません。スタブは、欠落しているコンポーネントの代わりになり、エラーなしでテストを続行できます。これらのテストを渡すには、ビューに追加のコードを追加する必要があります。

sum<span>.should.equal(4);</span>

テストモデル/表示相互作用を表示

CREATE TABLE `todos` (
  `id`       int(11)      NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.',
  `title`    varchar(256) NOT NULL DEFAULT ''     COMMENT 'The text for the todo item.',
  `complete` bit(1)       NOT NULL DEFAULT b'0'   COMMENT 'Boolean indicating whether or not the item is complete.',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'

ビューの実裝が適切なHTMLマークアップを作成することを確認(rèn)したため、モデルとの相互作用をテストできます。特に、チェックボックスをクリックして、ユーザーがTODOのステータスを切り替えることができるようにします。私たちのテスト環(huán)境は実際の人間のユーザーを必要としないため、jQueryを使用してクリックイベントを生成します。ただし、そのためには、実際のライブDOMにコンテンツを追加する必要があります。そのコンテンツは、テスト

フィクスチャ

として知られています。これがユニットテストコードです。

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title</span>></span><span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>List of Todos<span><span></h1</span>></span>
</span>
    <span><span><span><script</span> src<span>="lib/jquery-1.9.0.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="lib/underscore-min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="lib/backbone-min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="src/app-todos.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>$(function () {
</span></span></span><span><span>        <span>var todos = new todoApp<span>.Todos</span>();
</span></span></span><span><span>        todos<span>.fetch();
</span></span></span><span><span>        <span>var list = new todoApp<span>.TodosList</span>({collection: todos});
</span></span></span><span><span>        <span>$("body").append(list.el);
</span></span></span><span><span>      <span>})
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

再びTODOのSave（）メソッドを突き刺していることに注意してください。それ以外の場合、バックボーンは、シミュレートされたクリックでTODOステータスを変更するときに、存在しないバッキングストアを更新しようとします。

テストケース自體については、フィクスチャのIDを使用して

要素を作成することから始め、ライブドキュメントにその要素を追加します。この場合、ライブドキュメントは、テストの結(jié)果を表示するWebページです。テストケースを確認(rèn)した直後に要素を削除しますが、モカのテスト結(jié)果の表示に干渉しないように、表示プロパティを表示しないように設(shè)定します。この機能を?qū)g裝するコードには、TODOモデルへの小さな追加が含まれます。追加は、新しいTogglestatus（）メソッドです

<span>var sum = 2 + 2;</span>

ビューでは、要素のクリックイベントをキャッチし、このメソッドをモデルに呼び出します。

コレクションのテスト

assert<span>.equal(sum, 4, "sum should equal 4");</span>

この時點で、アプリケーションはほぼ完了しています。殘りの唯一の機能は、すべてのTODOを一緒に収集することです。當(dāng)然、バックボーンコレクションを使用します。私たちは実際にコレクションで特別なことをするつもりはないので、ユニットテストは本當(dāng)に必要ありません。

ただし、コレクションの見解の実裝が適切であることを確認(rèn)できます。そのビューは、順序付けられていないリスト（

）としてレンダリングされたいと考えています。テストケースは、これまで見たことのない機能を必要としません。
ビューの実裝も簡単です。コレクションへの追加を追跡し、ビューを更新します。最初のrender（）の場合、コレクション內(nèi)のすべてのモデルを一度に1つずつ追加するだけです。

<span>expect(sum).to.equal(4);</span>

ボーナステスト：APIの検証

sum<span>.should.equal(4);</span>

REST APIは、Backboneが期待するAPIと完全に一致するため、APIインタラクションを管理するためにカスタムコードは必要ありませんでした。その結(jié)果、ユニットテストのケースは必要ありません?，F(xiàn)実の世界では、あなたはそれほど幸運ではないかもしれません。 APIがバックボーンコンベンションに準(zhǔn)拠していない場合は、非標(biāo)準(zhǔn)のAPIに対処するためにバックボーンコードの一部をオーバーライドまたは拡張する必要がある場合があります。その余分なコードには、単體テストも必要です。幸いなことに、ユニットテスト環(huán)境であっても、APIの相互作用をテストするのは比較的簡単です。

API相互作用をテストする最も簡単な方法は、sinon.jsの偽のサーバー機能に依存しています。殘念ながら、その機能は、Sinonのブラウザの実裝でのみ（現(xiàn)在）利用可能です。 node.jsの実裝から明示的に除外されています。 node.jsで実行するためのハックがいくつかありますが、これらのハッキングは非常に脆く、內(nèi)部実裝の詳細に依存しています?？赡埭扦ⅳ欷斜埭堡毪韦钌皮扦?。幸いなことに、Sinonの偽サーバーなしではうまくいくことができます

秘密は、バックボーンがjqueryの$ .ajax（）関數(shù)に依存して、rest apisを?qū)g裝することを知っていることです。その関數(shù)をスタブすることにより、API相互作用を傍受できます。関數(shù)をスタブするときは、獨自の応答を置き換えたいと思うでしょう。 スタブのevelowsto（）メソッドは、その機會をまったく與えてくれます。それは、スタブが呼び出されたときにどのような追加のアクションをとるべきかをシノンに伝えます。これは、REST APIを使用してコレクションが正しく初期化されていることを確認(rèn)するための完全なテストケースです。

<span>var sum = 2 + 2;</span>

終了！

次のスクリーンショットからわかるように、すべてのユニットテストケースに渡すコードを作成しました。少なくとも當(dāng)面は、開発が完了しました。

統(tǒng)合中のテスト

アプリのクライアント側(cè)の開発が完了したため（そしてそれを証明するためのテストがあります）、JavaScriptをソースコード管理システムに安全に押し込むことができます。その後、アプリケーション全體のビルドプロセスに統(tǒng)合できます。そのプロセスの一環(huán)として、開発したすべてのテストケースを?qū)g行したいと考えています。これにより、最終展開を構(gòu)成するコードが定義したすべてのテストに合格することが保証されます。また、新しいバグを誤って導(dǎo)入するコードの「マイナーな調(diào)整」から保護します。

ビルドプロセス中に、Webブラウザーではなくコマンドラインからテストを?qū)g行することをお勧めします。個々のテストケースの詳細は必要ありません。すべてが合格するという保証だけです。 node.jsは、この要件に対応するのに十分簡単に??なります。ソースコードおよびユニットテストコードファイルにいくつかの小さな追加を行う必要があります。 Node.jsは、Webブラウザーとは異なる方法でグローバル変數(shù)を処理するため、

コードがこれらの変更が必要です。 Webブラウザでは、JavaScript変數(shù)はデフォルトでグローバルな範(fàn)囲です。一方、node.jsは、デフォルトで変數(shù)をローカルモジュールに限定します。その環(huán)境では、私たちのコードは必要なサードパーティのライブラリを見つけることができません（jquery、underscore、およびbackbone。最初に次の記述を追加すると、node.jsはこれらのライブラリへの參照を適切に解決します。

また、テストコードを調(diào)整する必要があります。テストスクリプトでは、獨自のライブラリ（jquery、chai、sinon.js、およびsinon-chai）にアクセスする必要があります。さらに、Webブラウザーのドキュメントオブジェクトモデル（DOM）をシミュレートするために、少し追加を追加する必要があります。クリック処理のためのテストでは、Webページに「フィクスチャ」

を一時的に追加する必要があることを思い出してください。もちろん、node.jsは通常、Webページを持っていません。ただし、JSDOMノードパッケージを使用すると、エミュレートできます。以下のコードは、テスト用に最小限のシミュレートされたWebページを作成します。

<span>var sum = 2 + 2;</span>

これらのステートメントテストをラップして、Webブラウザーの代わりにnode.js環(huán)境で実行されているかどうかを確認(rèn)する條件付き。ブラウザでは、追加のステートメントは必要ありませんので、安全にスキップできます。

これらの変更を使用すると、コマンドラインから完全なテストスイートを?qū)g行できます。プロジェクトのルートフォルダーに移動し、コマンドMochaを?qū)g行するだけです。結(jié)果は非常によく知られているように見えます。

もちろん、モカは出口レベルを返して、すべてのテストが合格したかどうかを示します。これにより、継続的な統(tǒng)合プロセスの一部として、または単に獨自の正気を維持するためのローカルプリコミットスクリプトとしてテストを自動化できます。

結(jié)論

この時點で、私たちは目標(biāo)を達成しました。開発中にバックグラウンドで実行されるユニットテスト環(huán)境があり、テストが失敗したときにすぐに通知します。テストはWebブラウザで実行され、コーディング中にブラウザの開発ツールに完全にアクセスできます。同じテストもコマンドラインスクリプトから等しく実行されるため、ビルドまたは統(tǒng)合プロセス中に実行を自動化できます。

リソース

これが記事で使用されている主要なテストリソースです。

コマンドラインjavaScript実行環(huán)境：node.js

javaScript単體テストフレームワーク：mocha

テスト開発環(huán)境：test’em
JavaScript Assertion Library：Chai Assertion Library
スパイ、スタブ、および模擬：sinon.js
追加のアサーション：sinon.js chai
• のアサーション
• backbone.jsアプリケーションの単體テストに関するよくある質(zhì)問（FAQ）
• backbone.jsアプリケーションでの単體テストの重要性は何ですか？

単位テストは、特にBackbone.jsアプリケーションでは、ソフトウェア開発の重要な側(cè)面です。ソフトウェアの個々のコンポーネントをテストして、予想どおりに機能するようにすることが含まれます。これにより、開発プロセスの早い段階でバグを特定して修正するのに役立ち、時間とリソースを節(jié)約できます。さらに、開発者はコードに変更を加え、変更が既存の機能が壊れているかどうかを迅速に確認(rèn)できるため、単體テストによりコードリファクタリングが容易になります。また、テストを書くことは、モジュール化の改善とコードの高い結(jié)束につながることが多いため、コードの設(shè)計も改善します。

backbone.jsのユニットテストは、他のjavascriptフレームワークと比較してどのように比較されますか？

backbone.jsは、他のJavaScriptフレームワークと同様に、アプリケーションの品質(zhì)を確保するための単體テストをサポートします。ただし、Backbone.jsは、柔軟性とシンプルさのために際立っています。アプリケーションをどのように構(gòu)成すべきかを決定することはなく、開発者は適切と思われるアプリケーションを自由に設(shè)計することができます。この柔軟性は単體テストにまで及び、開発者が好みのテストツールと方法論を選択できるようになります。さらに、Backbone.jsは他のフレームワークと比較してフットプリントが小さく、単體テストのために高速かつ効率的になります。 Backbone.jsでの単體テストに利用できるいくつかのツールです。人気のあるものには、Mocha、Jasmine、Jestが含まれます。 Mochaは、開発者にアプリケーションをテストする簡単な方法を開発者に提供する機能が豊富なJavaScriptテストフレームワークです。 Jasmineは、JavaScriptコードをテストするための行動主導(dǎo)の開発フレームワークです。ブラウザ、DOM、またはJavaScriptフレームワークに依存していないため、BackBone.jsアプリケーションのテストに最適です。一方、Jestは、大規(guī)模なWebアプリケーションのシンプルさとサポートに焦點を當(dāng)てた包括的なテストソリューションです。 Backbone.jsアプリケーションのテストには、アプリケーションの各コンポーネントのテストケースの作成が含まれます。これには、モデル、ビュー、コレクションが含まれます。各テストケースは、コンポーネントの特定の機能をカバーし、他のテストケースとは無関係である必要があります。 MochaやJasmineなどのテストフレームワークを使用して、テストを作成できます。これらのフレームワークは、テストケースを定義し、テスト環(huán)境をセットアップおよび解體し、アサーションを作成する機能を提供します。 JSは、使用しているテストフレームワークに依存します。たとえば、Mochaを使用している場合は、Mochaコマンドラインツールを使用してテストを?qū)g行できます。ジャスミンを使用している場合は、ジャスミンコマンドラインツールを使用してテストを?qū)g行できます。これらのツールは、個々のテストケース、テストスイート全體、またはアプリケーション內(nèi)のすべてのテストを?qū)g行するオプションを提供します。また、渡され、失敗し、スキップされたテストの數(shù)など、テストの結(jié)果に関する詳細なレポートを提供します。 Backbone.jsでユニットテストを自動化します。自動化には、コードが変更されるたびにテストを自動的に実行する継続的な統(tǒng)合（CI）システムのセットアップが含まれます。これにより、変更によって導(dǎo)入されたバグがすぐにキャッチされます。 JavaScriptをサポートし、Backbone.jsの単體テストを自動化するために使用できるJenkins、Travis CI、Circleciなど、いくつかのCIツールが利用可能です。バックボーンでの単體テストのいくつかのベストプラクティスには、単一の機能をカバーする小さな焦點テストの作成、テストを互いに獨立させるためのいくつかのベストプラクティスが含まれます。 、および可能なすべてのエッジケースをテストします。また、テスト駆動型開発（TDD）として知られる実際のコードを作成する前に、テストを作成することも重要です。これにより、コードがテスト可能であり、より良いソフトウェアの設(shè)計に役立ちます。

バックボーンで失敗した単位テストをデバッグするにはどうすればよいですか？障害の原因を特定するためのレポート。ほとんどのテストフレームワークは、問題を特定するのに役立つ詳細なエラーメッセージを提供します。また、Chrome Devtoolsやnode.jsデバッガーなどのデバッグツールを使用して、コードを介して変數(shù)と関數(shù)呼び出しを検査することもできます。 >はい、backbone.jsで単體テストでモックとスタブを使用できます。モックとスタブは、実際のオブジェクトの動作をシミュレートする偽のオブジェクトです。これらは、システムの殘りの部分からテストされているコンポーネントを分離するために使用されます。これにより、テストがより信頼性が高く、書きやすくなります。 sinon.jsなどのいくつかのライブラリがあります。これは、モックとスタブを作成および管理する機能を提供します。 Backbone.jsでのユニットテストのパフォーマンスには、テストとテスト環(huán)境の最適化が含まれます。これには、迅速に実行される効率的なテストの作成、並行してテストを?qū)g行し、高速テストフレームワークを使用することが含まれます。プロファイリングツールを使用して、テストプロセスで遅いテストとボトルネックを識別することもできます。