2

簡単な質問です...現在、セレクターを含む次のjQueryコードがあります。

var ID = "idControl"
function doesTreeViewExist()
{
    if($('#' + ID).length == 0)
    {
        return false;
    }
    else
    {
        return true;
    }
}

QUnit を使用してセレクターをテストするためのテストをどのように作成すればよいのでしょうか? より具体的には、構文/コードを思いつくのに問題があります。

編集：

さて、実際の Web サイトにアクセスできないため、代わりにセレクター呼び出しをモックしたいとします。テスト ツールとして JsTestDriver を使用しています。つまり、テストを実行しているブラウザーに触れることができません (そうしないと、テストの実行が停止します)。そのような状況ではどうですか？どうすればコードをテストできますか?

ありがとう。

4

3 に答える 3

9

投稿する関数は、大幅に簡略化できます。

var ID = "idControl";
function doesTreeViewExist() {
  return !!$('#' + ID).length;
}

!!コンストラクト ( double bitwise NOT ) を使用してlengthプロパティをブール値に変換するとfalse、長さがゼロの場合にのみ返されます。

qUnit について言えば、次のような単純なテストを簡単にセットアップできます。

test("Your selector test", function() {
  ok($('#idControl').length > 0, "idControl exists");
  // or simply
  ok($('#idControl').length, "idControl exists");
});

このok関数は、JUnit の assertTrue に相当するboolean assertionを実行します。

于 2009-10-30T01:12:45.810 に答える
4

セレクターを手動でテストしてから、それらを使用するコードに渡します。次に、それらを使用するコードを単体テストできます。セレクターをテストするだけの場合は、影響を受ける HTML にアクセスする必要があります。テストには、次のようなターゲットにする HTML を含めることができます。

test("selector works", function() {
    var html = $('<input type="select"><option value=0/></input');

    var result = $('option', html);

    ok(result.count() == 1);
});

しかし、私はそうしません... セレクターをコードの端に配置して、デバッガーの下ですばやくアクセスしてステップスルーできるようにします。プロパティがそれらのセレクターである単純なクラスを作成します。次に、その単純なクラスをモック/スタブ化して、それらのセレクターに依存するすべてのコードを記述できるようにします。セレクターをテストしない理由は、対象となる HTML が ASP.NET コードによって生成され、javascript テストから取得するのが難しいためです。しかし、それらを謙虚なオブジェクト (" http://xunitpatterns.com/Humble Object.html") でラップしてから、その謙虚なオブジェクトに依存するコードをテストできます。以下は、テスト double に置き換えることができる単純なラッパー クラスです。

var createSelectWidget = function(rootSelector)
{
    return {
        userText : $('span', rootSelector),
        inputList : $('option', rootSelector),
    };
}

使用する依存性注入パターンが何であれ、以下のようにスタブできます。私のウィジェットには、値を読み取る選択入力と、いくつかの結果を書き込みたいスパンがあるとします。

var createSelectWidgetStub = function()
{
    return {
        userText : { text = function() {}},
        inputList : { val = function() {}},
    };
}

次に、依存関係を分離したいが、その依存関係との相互作用を気にしないテストで、このスタブを渡すことができます。依存関係との相互作用を検証したい場合は、JSMock でモックできます。入力リストとの相互作用を検証したい場合、モック化された 1 つの要素を含むスタブを準備します。

var selectMock = createSelectWidgetStub();
selectMock.inputList = mc.createMock(selectMock.inputList);
于 2009-10-30T01:14:50.070 に答える
3

Jackを使用して、jquery呼び出しを正常にモックし、カスタムの長さと期待される結果を返しました。

何かのようなもの： 

jack (function() {
    jack.expect("$").exactly("1").withArguments("#" + ID).returnValue( {length:0} );
    doesTreeViewExist()
    assertEquals(false, result);
});

また、JsTestDriverの組み込み関数HtmlDocの1つを使用しているため、jquery呼び出しを満たすためのDOM構造を提供することもできました。何かのようなもの：

/*:DOC += <span id="idControl"></span> */

または、指定されたIDなしでDOM構造を作成して、falseステートメントを取得します。

HTH。

于 2009-11-19T03:27:12.597 に答える