4

私はしばらくの間、単体テストを JavaScript 開発に統合するつもりでしたが、デバッグとテストに firebug を使用することにすでに慣れているため、当然ながら JS 単体テストを行うには fireunit を選択しました。

fireunit の使用方法は理解していますが、実用的かつ効果的に使用する方法についてはまだ混乱しています。私の主な懸念は、DOM を実際に操作する機能をテストできないことです。

たとえば、次のような関数があるとします。

function() {
    var el = document.getElementById('el');
    if(el) {
        el.parentNode.removeChild(el); //Removes the child from the DOM
    }
}

これは基本的な例ですが、関数を使用するには DOM と対話する必要があります。要素を含む HTML がロードされていないときに、これを単体テストするにはどうすればよいですか?!

私は jsTestDriver にあまり詳しくありませんが、私の理解では、コメントを使用して単体テストに HTML を追加することができます (または、とにかくコードがどのように見えるか)。fireunit テストでこのようなことを行う方法はありますか? それとも、test.html をあらゆる場所からのコードのスニペットで雑然とさせて、それらが競合しないことを願っているのでしょうか。関数の開始時にロードされ、テスト関数が完了するとそれ自体を削除して次の関数に移動する HTML の小さな断片を定義するとよいでしょう。

innerHTML を使用してスニペットをテスト DIV にロードおよびアンロードするなど、いくつかのアイデアがありますが、私のアプローチはすべて不潔に見え、テスト関数ごとに大量のボイラープレートを作成する必要があります。より効率的な解決策をすでに思いついたかもしれない数人の人の意見を聞きたいです。

4

1 に答える 1

0

テストを実際に実行する前に、次のことができます。

var old = document.getElementById;
document.getElementById = function(foo) {
    console.log(foo);
    return {
        parentNode: {
            removeChild: function(bar) {
                console.log(bar);
            }
        }
    };
};

テストを実行する

document.getElementById("test"); // console output "test"

元の方法をリセットします。

document.getElementById = old;

これがクロスブラウザで機能するかどうかはわかりません。私の Chrome コンソールでは現在動作していたので、これでうまくいくと思います。やってみて ：）

モックを使用しない別のより良いアプローチは、テストが必要な DOM を含む要素を動的に作成することです。

var container = document.createElement("div");
container.innerHTML = 'your content <span id="el">foobar</span>';
document.body.appendChild(container);

モック化されたオブジェクトなしでテストを実行します

その後チェック

console.log(document.getElementById("el"), document.getElementById("el").parentNode);

もちろんクリーンアップ:)

container.parentNode.removeChild(container);

私は Fireunit に興味がないので、そこにあるテンプレートの非同期ロードの可能性については知りません。

于 2012-04-21T18:00:35.447 に答える