16

The introduction to QUnit over at netTuts.com spawns an interesting exchange (never resolved) over how to apply unit tests against actions that manipulate the DOM. The following quote (Alex York) gets to the crux:

What would be nice is that if you had a function like this:

function add(a, b) { var result = a + b; $(“input#ResultTestBox”).val(result);

In the above test, I would love to test two things: the addition of a and b, and the result correctly being put into a DOM element. I would love to test the second thing by providing some mock HTML. Possible?

But, like I said...unresolved. Resolvable?

4

3 に答える 3

21

QUnit の最新バージョンは#qunit-fixture、QUnit Web ページに HTML を追加できる要素をサポートしています。

たとえば、HTML では次のようになります。

<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

そしてあなたのJavaScriptで：

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture');
var result = add(a, b);

equals(result, $('input#ResultTestBox').val(), "testing result box value");
于 2010-11-14T15:34:58.973 に答える
2

確かに、実際に気にかけているのは、valメソッドが戻り値で呼び出されるということです$(“input#ResultTestBox”)。jQuery メソッド自体の機能をテストする必要はありません。jQuery オブジェクトのモック実装を挿入して、それに対してテストしてみませんか?

于 2010-11-15T10:04:02.110 に答える
0

すべてのテスト用に html ページ サンドボックスを作成する手間をかけたくない場合は、それらをenv.jsで実行できます。

于 2010-11-14T15:58:11.547 に答える