3

SVG や Canvas などの HTML5 テクノロジを使用するグラフィカルな JavaScript アプリケーションの将来の作業を評価しています。1 つの大きな問題 (すべての UI 中心のアプリケーションと同様) は、すべての機能のテストを作成する方法です。JavaScript ロジックをテストするだけでは十分ではありませんが、インターフェイスが機能しているかどうかも知る必要があります。

したがって、少なくとも SVG/Canvas と対話できる Selenium のようなものが必要です。また、もちろん、描画の背後にあるロジックの通常の単体テストを作成するための何らかのフレームワークが必要です。しかも無料で使えるはずです。

そのようなものはありますか？また、この種のソフトウェアをテストした経験がまったくないため、問題を解決する方法と、これが通常どのように行われるかについてのヒントをいただければ幸いです。私はそれについて考えているのは私たちが最初ではないことを信じています.

前もって感謝します！

4

1 に答える 1

4

これがあなたの質問に完全に答えるわけではないことは承知していますが、単体テストに関しては、JavaScript の緩やかな型付けにより、モック オブジェクトを非常に簡単に作成して、アプリケーション ロジックが (たとえば) Canvas 要素と正しく対話していることを確認できます。たとえば、大静脈に何かを描画する関数がある場合:

function drawSomething(canvas){
    var ctx = canvas.getContext('2d');
    ctx.fillRect(10, 10, 55, 50);
}

次に、次のようにテストできます。

function testdrawSomething(){
    var mockCanvas = {};
    var mockCtx = {};
    mockCanvas.getContext = function(){
        return mockCtx;
    };
    mockCtx.fillRect = function(a,b,c,d){
        // test values here
    }
    drawSomething(mockCanvas);
}

私はこのアプローチと一緒にRhinoUnitを使用して、UI を集中的に使用する HTML5 サイトの非常に包括的な単体テストを作成しました。コードを慎重に記述すれば (DOM 要素へのすべての参照を引数としてテストする関数に渡します)、すべての単体テストをブラウザーの外部で実行できるため、それらを CI パイプラインの一部にすることができます。

明らかに、Selenium の出番となるブラウザー内テストもいくつか実行したいと思うでしょう。

于 2012-07-24T11:52:25.717 に答える