javascript - マークアップを再作成せずにJavaScriptコードをテストしますか？

Question

WebアプリでJavaScriptコードをテストしたいと思います。jQueryライブラリと.NetMVCを使用しています。これらの回答を確認しましたが、jqUnitは見栄えが良かったので、テストしたいすべてのページのすべてのマークアップをほぼ再作成する必要があることを理解するために、試してみました。

私は何かが足りないのですか？JS / jQueryコードをテストするための代替アプローチはありますか？マークアップは複雑な場合があり、AJAX呼び出しの結果として大幅に変更されます。

私が考えることができる最善の方法は、テストページのiframeにアプリを貼り付けようとすることです。まだ試していません。

score 4 · Accepted Answer

JavaScript 関数/オブジェクトをテストする場合は、YUI のテストコンポーネントをお勧めします。

http://developer.yahoo.com/yui/yutest/

JUnit と非常によく似た設定ですが、いくつかのテスト JavaScript ファイルを含める必要があるだけです。テストモードのみでこれをページに含めるのは非常に簡単です。

score 3 · Accepted Answer

ドキュメントに追加せずに、メモリ内にテストする構造を作成することができます。これはすべてのテストで機能するわけではありません（たとえば、CSSプロパティはドキュメントに挿入されていないアイテムには影響しませんが、場合によっては試してみる価値があるかもしれません）。

まず、非常に高速です。次に、テストの完了後に削除する必要のあるテスト項目でドキュメントを台無しにすることはありません。

これが非常に簡単な例のアイデアです。

test('My tests', function () {
    var testSubj = $('<div>This <b>is</b> my <span>test subject</span></div>');

    ok(testSubj.children('span') == 'test subject', 'Span is correct');
});

score 3 · Accepted Answer

コードによっては、次の 2 つの方法が必要になる場合があります。

単体テスト可能なコード。JSUnit を使用して最小限の HTML マークアップでテストできるほど独立した Javascript がいくつかあります。ある意味で、このマークアップはテストフィクスチャデータです。

この方法でテストできるように、コードを再構築する方法を理解したいと思うかもしれません。JS をよりモジュール化したり、特定のマークアップへの依存度を下げたりすることはできますか? （残念ながら、できない場合もあります。）

統合テストが必要なコード。あなたが言ったように、そのマークアップをすべて再作成するのは面倒です。他の誰かがセレン（ページをフレームで実行する）を提案しました。これは、実際の環境で Javascript コードをテストするための優れたアプローチです。

これらの欠点は、実行が遅くなる傾向があり、維持するのが少し難しいか、もろいことです。保守性の面で役立つ「ページオブジェクト」パターンを調べてください。

最終的には、selenium を使用して JS 単体テストを自動化し、それを駆動します。

score 2 · Accepted Answer

Selenium を検討し、ブラウザーレベルでいくつかの自動テストを実行することを検討する価値があるかもしれません。

もちろん、理想的な世界では、コードレベルで単体テストフレームワークを使用することになりますが、事前に多くの再作業が必要になる可能性があることを考えると、JavaScript が実際に必要なことを実行することをテストすることは、確実な妥協点になる可能性があります。 Selenium または同様のフレームワークを使用することです。

score 1 · Accepted Answer

Windmillは、優れた Python ベースの JavaScript テストフレームワークです。活発に開発されているため、常に改善されています。見てみることをお勧めします。テストのセットアップにも使用できる優れた GUI を備えた自動テストを作成できます。他にもたくさんの機能がありますが、ここにすべてをリストする理由はありません。

score 1 · Accepted Answer

したがって、あなたが尋ねているように見える2種類のテストがあります。1 つは、jquery を使用する記述したコードの単体テストです。これに対する答えは、誰もが通常考えているよりもはるかに簡単です。単体テストで jquery をモックするだけです。これは非常に簡単で、他のプログラミング言語でモックを作成するのとほとんど同じように機能します。ただし、javascript のフレームワークがなくても簡単に実行できます。私は実際に、自分のプロジェクトでTest.TAPと rhino を使用して、自動化されたテストスイートでこれらの種類のテストを実行しています。ブラウザは必要ありません。

もう 1 つの種類のテストは、統合テストまたは回帰テストです。ここで、selenium のようなツールの出番です。これらのテストは実際のアプリケーションで行われ、すべての部分が期待どおりに連携することを確認するように設計されています。ブラウザー、JQuery、JavaScript、および Web サーバー。この 2 種類のテストを頭の中で区別しておくことが、JavaScript コードのテストスイートをまとめる鍵となります。これらのテストを複数のブラウザーで実行するのが理想的です (場合によっては、ブラウザーの複数の構成でも可能です)。

score 1 · Accepted Answer

テンプレートエンジンを使用できます。さまざまな http サーバーのセットアップ用にさまざまなテンプレートエンジンが存在するため、ニーズに合った、選択した (サーバー側の) プログラミング言語で実装されたテンプレートエンジンが見つかるはずです。

テンプレートエンジンをインストールしたら、元のレイアウトを使用して小さなマーカーを追加できます。ここには、テスト時に <script> タグを挿入でき、テストしていないときは何も挿入できません。

このアプローチの利点は、本番ページとテストページの間にまったく違いがないことです。テスト以外に必要のない iframe の追加を避けることができます。

score 0 · Accepted Answer

visiboneブラウザリファレンスは、彼らが「アサーティブネス」と呼ぶものを示唆しています。基本的に、JavaScriptの単体テストを実装する方法についての提案を提供します。その本当に非常に簡単です。

次の画像リンクの右下を参照してください。

http://www.visibone.com/products/ebk8-9_850.jpg

ここに要約すると：

関数assert（）を作成します。

function assert(fact, details){
    if (!fact) alert("Assert failure: " + details);
}

そして、あなたはそれをこのようなものと呼ぶことができます：

assert((parseInt("1") == 1), "Check string '1' is equal to integer 1");

または、おそらくより良い===比較で：

assert((parseInt("1") === 1), "Check string '1' is equal to integer 1");

リンクされた画像にはさらに多くのものがあり、assert関数はより洗練されたものになる可能性があります。

「JavaScriptassert」でグーグル検索をしたところ、かなりの数のリンクが戻ってきたので、自分でチェックする価値があるかもしれません。

javascript - マークアップを再作成せずにJavaScriptコードをテストしますか？

9 に答える 9

Related

Reference