0

問題/質問

ビューからレンダリングされた HTML を、CI ビルドで実行される Jasmine テスト スイートに含めて、Knockout バインディングが壊れていないこと、およびビュー モデルとの相互作用が期待どおりに機能することを確認できるようにします。これを行うための確立された方法はありますか？

私の現在の設定：

Razor ビューで MVC、Web-API、および MVVM パターンで Knockout.js を使用しているアプリケーションがあります。プロジェクトで増え続ける JavaScript のテストを追加したいと考えています。Jasmine を使用してテストを追加することから始めました。私のテストでは、JSON オブジェクトを作成して、通常は Web-API 呼び出しによって提供されるデータを模倣しました。CIビルドによるテストの実行を追加しました。

これは良い統合テストではないと感じたことを除いて、これまでのところとても良いです。だれかが Web-API 呼び出しのデータ構造を変更した場合、コードは運用環境で失敗する可能性があります。ただし、静的モック データを使用しているため、テストは引き続きパスします。ビューが変更された場合も同様でした。ノックアウト バインディングは壊れる可能性が非常に高く、テストではそれがまったく示されません。

静的データの問題を解決できました。もっと良い解決策があるかもしれませんが、私が行ったのは、Web-API メソッドが返すデータと同じデータをシリアル化する実行可能ファイルを作成することでした。そのデータを .js ファイルに保存します。ビルドステップとして実行可能ファイルを追加しました。その後、これらの .js ファイルをテストにロードして、そのデータを使用できます。Web-API/実行可能ファイルによってシリアル化されているオブジェクトが変更されると、テストが失敗し、CI ビルドが赤くなります。

私の問題に戻る：

私の質問のポイントは、ビューの Knockout バインディングがビューモデルと同期していることを CI に保証する方法の問題に対する適切な解決策が見つからないということです。私の考えは、どうにかしてかみそりのビューを HTML ファイルにレンダリングすることです。次に、Knockout バインディングのテストでそれを使用します。私はこれを行うための良い方法を見つけていません。

私のテストが現在どのように設定されているかのサンプルをいくつか含めました。この単純な例の Knockout バインディングをテストする必要はおそらくありません。私の現実世界のビューモデルには、データとバインディングに依存するより多くのロジックがあります。私はそれをテストできるようにしたいと思います。

また、私のアプローチ全体に欠陥があり、すべての部分が確実に連携するためのより良い方法があるという証拠を受け入れます。

.js ファイルに書き込まれるデータ (通常、JSON は Web-API 呼び出しから取得されます)

var customerData = { "ID": "123", "FirstName": "John", ... more data... }

ジャスミンテスト:

describe("domain.myViewModel.test", function () {

    var vm;

    beforeEach(function () {
        vm = new myViewModel(customerData);
    });

    it("should should have some data", function () {
        //assert something
    });
}

テストをロードする HTML ファイル

<!DOCTYPE html>
<html>
    <head>
        <title>Jasmine Test Runner</title>
        <!-- include jasmine files here... -->
        <link href="/TestRunner/jasmine-1.3.1/jasmine.css" rel="stylesheet" type="text/css">
        <script src="/TestRunner/jasmine-1.3.1/jasmine.js" type="text/javascript"></script>
        <script src="/TestRunner/jasmine-1.3.1/jasmine-html.js" type="text/javascript"></script>
        <script src="/TestRunner/jasmine.junit_reporter.js" type="text/javascript"></script>

        <!-- include source files here... -->
        <script src="/jsscripts/views/productclass/domain.myViewModel.js" type="text/javascript"></script>       

        <!-- include test js files here... -->
        <script src="/DataScripts/customerData.js" type="text/javascript"></script>
        <script src="/Tests/domain.myViewModel.test.js" type="text/javascript"></script>

        <!-- include jasmine.js files here... -->
        <script src="/TestRunner/executeJasmine.js" type="text/javascript"></script>
    </head>
    <body>            
          // I want the HTML from by views here
          // So I can test the bindings and interactions work as expected
    </body>
</html>
4

0 に答える 0