7

.js私が Jasmine で読んだ資料のうち、彼らはファイルだけをテストしました。しかし、テストが Web ページ上にある場合、たとえば次のコードを使用するとどうなるでしょうか。

try.html:

<input id="the-input"></input>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    $("#the-input").focus(function() {
        $(this).css("background", "#ff9");
    });

    $("#the-input").blur(function() {
        $(this).css("background", "#cff");
    });  

</script>

つまり、ユーザーが入力ボックスをクリック (またはタブで移動) すると、ボックスの背景が黄色になり、フォーカスが外れると水色になります。このような場合、.html ファイルで上記の動作をどのようにテストしますか? (この html ファイルはどこにあるべきですか? Jasmine lib ファイルと SpecRunner.html 以外の場所にある可能性がありますか? また、ページをテストするために SpecRunner.html にそれを含めるにはどうすればよいでしょうか?

jsfiddle は http://jsfiddle.net/MspUF/にあります。

更新: HTML コンテンツと JavaScript コードを分離することは問題ありませんが、それでも、それをテストできるようにするための仕様は何ですか。

4

2 に答える 2

2

js一般に、 Web ブラウザでもスクリプトを外部ファイルに移動することがベスト プラクティスです。

次のようにして、コードを.jsファイルに移動し、HTML に含めることができます。

<script src='myfile.js'>

それが含まれます。これにより、Jasmine を使用してファイルを簡単にテストできます。DOM の外部で単体テスト用に DOM をモックできます。

単体テストではなく一般的なテストが必要な場合は、PhantomJS実際にブラウザーをシミュレートして、完全なユーザー エクスペリエンスをテストできるようにすることをお勧めします。（他の良い選択肢には、私が成功したSeleniumが含まれます）

また、QUnit を使用した jQuery のテストに関する素晴らしい記事もここにあります。

于 2013-03-31T12:39:56.530 に答える