web-dev-qa-db-ja.com

外部HTMLファイルを使用せずに、ジャスミンテストにDOM要素を追加するにはどうすればよいですか？

私がいくつかの簡単なジャスミンテストを書いていて、テストしているコードがjsファイルのみをテストするときにDOMがないために存在しないフォームを探しているため、例外が発生します：$("form")[0]テストされたjsファイルで次のようになります：

TypeError: $(...)[0] is undefined

私はjasmine-jqueryについて少し読んで、外部のhtmlファイルでhtmlフィクスチャを使用できることに気付きました。そのフローは非常に厄介なようです。私がする必要があるのは空の有効なフォームを追加することだけなので、テスト（何かに焦点を当てている）が実行され、<form></form>を追加するだけで十分だと思います。

最初はsandbox（）関数が解決策になると思いましたが、それはdivのみを作成するようで、フォームが必要です。

ジャスミン仕様ファイルのコードのみを使用していくつかの要素を追加する簡単な方法はありますか？

jasminejasmine-jquery
16
user1639431

最も簡単な解決策は、beforeブロックで自分でフォームをDOMに追加し、それをafterブロックで削除することです。

describe(function(){
  var form;

  beforeEach(function(){
    form = $('<form>');
    $(document.body).append(form);
  });

  it('your test', function(){


  })

  afterEach(function(){
   form.remove();
   form = null;
  });
});

また、サンドボックスヘルパーの作成はそれほど難しくありません。

function sandbox(html){
  var el;

  beforeEach(function(){
    el = $(html);
    $(document.body).append(el);
  });


  afterEach(function(){
   el.remove();
   el = null;
});
34
Andreas Köberle

別のアプローチは jasmineフィクスチャ を使用することです

コンセプト

これについて考える1つの方法は次のとおりです。

JQueryでは、$（）にCSSセレクターを指定すると、DOM上の要素が検索されます。

Jasmine-fixtureでは、affix（）にCSSセレクターを与え、それらの要素をDOMに追加します。

これはテストに非常に役立ちます。これは、DOMの状態を接辞で設定した後、テスト中のサブジェクトコードに、作業に必要な要素が含まれることを意味します。

最後に、jasmine-fixtureは、各仕様の実行後にDOMに添付するすべてのものを片付けて削除することで、テストによる汚染を回避するのに役立ちます。

参照： SO：ジャスミンテストでのdom操作

3
msanjay

Sandbox（）を使用してdivを作成し、フォーム要素を作成してサンドボックスに追加する必要があります。これは、DOMでこのフィクスチャを制御するための安全な方法です。

0
Alexandre Magno Teles Zimerer