32

私はjavascriptテストスイートを調べていましたが、QUnitが非常に興味深いことがわかりました。計算コードをテストする方法は理解していますが...

主にDOM操作用に作成されたJavaScriptアプリケーションをどのようにテストしますか？

DOM要素の位置/色などをテストすることは、次のようなことを行うことになるため、重要なポイントになるようです。

$("li.my_element").css("background-color", "#f00");

そしてあなたのテストで...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

基本的にこれを行うだけなので、これは正しく感じられません。

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

私はナッツですか？これはどのように行われることになっていますか？

編集：質問の核心：

私が得ているのは、デプロイする前にコードが壊れていないことを確認する必要があることだと思いますが、その大部分はUIヘルパーとajaxです。物事が正しく表示されていることをテストするにはどうすればよいですか？

いくつかの例：

  • JQueryUIダイアログが他のすべての要素の上に表示されていることをテストします
  • ドラッグアンドドロップが正しく機能していることをテストします
  • ドロップ可能な要素がドロップされると、ドロップ可能な色が変化することをテストします
  • ajaxがすべて正しく機能していることをテストします
  • IEを壊すような無関係なコンマがないことをテストします
4

5 に答える 5

16

特にあなたが説明している単純な相互作用については、Javascript/DOMテストはそれほど有用ではないことがわかりました。物事が正しく設定されていることをテストします。jQueryは非常に宣言型であるため、テストはコードによく似ています。

私の現在の考えでは、より大きなJSコンポーネントを作成している場合は、相互に関連する一連の動作をjQueryプラグインとそのテストのセットの両方に引き出すことが理にかなっています。

しかし、あなたが言及した例から、あなたは本当にあなたの統合されたウェブサイト内の保護のレベルを探しているように思えます。Seleniumのようなツールは、おそらくより強力で適切です。特に、

  • 自動化できます
  • IEを含む複数のブラウザに対して実行できます
  • Webアプリとページのコンテキスト内で実行されるため、ドラッグアンドドロップは、一部のテスト環境ではなく、実際に発生する場所でテストできます。
  • AJAXをテストできます
于 2009-09-19T03:58:47.043 に答える
12

JQueryのcss関数をテストする代わりに。テストでは、css関数をモックし、正しい色で1回だけ呼び出されることを確認する必要があります。テストされるコードは、フレームワークではなく、あなたのものでなければなりません。

于 2009-09-17T14:00:18.447 に答える
3

Jason Harwigが言っていることに加えて、単体テストは、コードが期待どおりに実行されていることを確認するためのテストであると言えます。あなたがそれをテストしたいのなら、ジェイソンはあなたがそれをどのようにすべきかについて絶対に正しいです。テストを実行してDOM操作が行われていることを確認する場合（UIテスト）、DOM操作を実行している実際のコード（単体テスト）ではない場合は、Selenium、WatiN、Watirなどを確認することをお勧めします。

于 2009-09-17T14:09:47.933 に答える
1

多くの人が視覚的にテストしていると思います。つまり、ブラウザの出力をモニターで見て、DOMが期待どおりに操作されたかどうかを確認します。

自動化されたテストケース（回帰テストなど）が必要な場合は、出力を記録し（画面キャプチャなど）、2つのスクリーンショットを比較して、結果が同じかどうかを確認します。

スクリーンショットをキャプチャする代わりに、DOM全体をキャプチャし、キャプチャしたDOMツリーを並べて比較することができます（ピクセルを比較するよりもエラーが発生しにくい場合があります）。

于 2009-09-16T20:02:42.020 に答える
0

私は次のようなAJAXのものをテストします：

  1. AJAX呼び出しを行う
  2. JavaScriptタイマーを設定する
  3. DOMをチェックして、予想される変更が行われたかどうかを確認します

さて、チェックを行う前にAJAX呼び出しが返されていない可能性がありますが、これは有用なテスト情報でもあります。AJAX呼び出しでは、（通常は）しばらくしてから失敗と呼びます。たとえば、提案ポップアップを実行していて、戻ってくるまでに30秒かかる場合、それは失敗です。

于 2010-12-18T12:45:26.267 に答える