JavaScriptMVCから始まるプロジェクトの完成とテストプログラムの作成方法

JavaScriptMVC はテストに非常に重点を置いています。 JavaScriptMVC フレームワークは FuncUnit モジュールを使用して、機能テストと単体テストをより簡単に作成できるようにします。テストはブラウザーで実行することも、完全に自動化することもできます。

レシピモジュールをビルドすると、テストコードが自動的に生成されます。次の記事では、次の 5 つのことを達成する方法について説明します。

1.単体テストを実行します。
2. 単体テストを理解する。
3. 機能テストを実行します。
4. 機能テストを理解する。
5. テストは良い機能です。

1. 単体テストを実行します

FuncUnit は、Jquery の QUnit ツールを使用してモジュールと基本的なプラグインをテストします。これらのテストはブラウザまたは Envjs で実行できます。

ブラウザで単体テストを実行します

Cookbook/qunit.html を開くと、次の図が表示されます:

2 番目のメソッドがどのように実行されるかを見てみましょう。まず、Envjs 環境でテストを実行します。

Envjs環境で単体テストを実行する

Envjsは基本的なスクリプトブラウザです。 FuncUnit は、このシミュレートされた環境でテストを実行できます。

Window DOC コンソールに次のコマンドを入力します:
js funcunit/run envjs Cookbook/qunit.html

これにより、シミュレートされたブラウザ環境で qunit.html が実行されます。次のように入力します:

2. 単体テストを理解します

FuncUnit は、QUnit ツールのアサーションを使用して、テスト関数をモジュールに結合します。単体テストをより深く理解したい場合は、QUnit のヘルプ ドキュメントを読むことができます。
cookbook/qunit.html は、steel モジュールをロードし、cookbook/test/qunit/qunit.js ファイルをスチールロードさせます。このファイルは、すべての単体テスト ファイルをロードします:
Cookbook/test/qunit/cookbook_test.js
Cookbook/ test/qunit/recipe_test.js

すべてのスクリプトがロードされると、テストのアサーションが実行されます。

Cookbook/test/qunit/recipe_test.js ファイルを開いて、findAll テストがどのように機能するかを見てみましょう。
//テストを作成します
test("findAll", function(){
//次のテストの実行を防ぎます
stop(2000);

//レシピをリクエストします
Cookbook.Models.Recipe.findAll({}, function(recipes){

//何かがあることを確認します
ok(recipes)

//少なくとも 1 つのレシピがあることを確認します
ok(recipes.length)

// レシピが正しく見えることを確認します
ok (recipes[0].name)
ok(recipes[0].description)

//次のテストの開始を許可します
start()
});
})

3. 機能テストを実行します

これは、インターフェイスとのユーザー対話をシミュレートすることによって生成されたマウスとキーボードのイベントをテストするために使用されます。

Chef Manual の機能テストは、レシピ作成とリスト インターフェイスの対話型アクションをテストすることです。

ブラウザ www.2cto.com で機能テストを実行します

Cookbook/funcunit.html を開くと、次の図が表示されます:

Selenium 環境で機能テストを実行します。

Selenium はブラウザを自動的にロードし、それを FuncUnit モジュールにカプセル化できます。

次のコマンドを実行します:
js funcunitrun selenium Cookbookfuncunit.html

Windows システムを使用している場合は、Firefox および IE ブラウザが開きます。このテストの結果は次のとおりです:

このテストを IE で実行するときに例外が発生した場合は、IE ブラウザーの構成を変更する必要があります。詳細については、FuncUnit のヘルプドキュメントを参照してください。

4. 機能テストを理解する

FuncUnit と QUnit は他のページ (cookbook/cookbook.html) を開くことができ、このページにはインタラクティブなアクションがあり、そこから情報を取得します。

FuncUnit モジュールが FuncUnit プラグインをロードするため、cookbook/funcunit.html ページは qunit.html のように機能します。 FuncUnit は、Jquery API と同様に、「S」エイリアスを使用して呼び出されます。

cookbookrecipecreatecreate_test.js ファイルを開くと、次のコードが表示されます:

test("create Recipe", function(){

//名前フィールドに Ice と入力します
S("[name=name]")。 type ("Ice")

//説明フィールドに「Cold Water」と入力します
S("[name=description]").type("Cold Water")

//送信ボタンをクリックします
S("[type = submit]").click()

//2 番目のレシピが存在するまで待ちます
S('.recipe:nth-child(2)').exists()

//最初の td のテキストを取得します
S ('.recipe:nth-child(2) td:first').text(function(text){

//氷があるかどうかをチェックします
ok(text.match(/Ice/), "Typed Ice" ) ;
});

})

テストから、このテスト ケースがレシピを作成し、そのレシピをリストに追加することであることが簡単にわかります。

5. テストは良い機能です。

FuncUnit を使用すると、読みやすさと線形構文の Web テストが可能になります。 JavaScriptMVC はこのテスト機能を提供し、Web 開発に大きく貢献しています。