web-dev-qa-db-ja.com

JasmineテストでのDOM操作のテスト

私はjsウィジェットを作成しています。最初の部分は、次のようなスクリプト幅のJavaScriptを追加することです（Googleアナリティクスの例）：

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

ジャスミンでそれをテストする方法（フィクスチャを使用して？）？

javascriptunit-testingjasmine
24
Sławosz

私の仕様でHTMLフィクスチャを設定するために、 jasmine-fixture と書きました。これで、次のようなことができます。

var $foo, $input;
beforeEach(function(){
  $foo = affix('.foo');
    # appends to the DOM <div class="foo"></div> 
  $input = $foo.affix('input[id="name"][value="Jim"]');
    # appends <input id="name" value="Jim"/> beneath the .foo div

そして、それぞれの後で、それはあなたの後に片付けます。

DOMの状態に関する期待のために、私は jasmine-jquery を使用します。以下のような大量のマッチャーを提供します：

it('is named Jim', function(){
  expect($input).toHaveValue("Jim");
});
23
Justin Searls

私はあなたがあなたの行動を実行することができると思います、そして次のように最初のスクリプトタグのhrefをチェックしてください：

function addGA(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = 
      ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
      + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
};

ジャスミン仕様：

 var href = 'http://www.google-analytics.com/ga.js';
 expect(document.getElementsByTagName('script')[0].href).not.toEqual(href);
 addGa();
 expect(document.getElementsByTagName('script')[0].href).toEqual(href);

しかし、もっと良い方法を聞くことに興味があります。 JasmineでDOMをチェックすることは、常に少しハッキーな感じがします。

4
Doug Avery

JasmineでのDOMテストの負荷が高い場合は、 Jasmine Headless WebKit を使用できます。

3
bjornd