ジャスミンで複雑なソート機能をテストする

Question

私はJasmineを学習しています。複雑なソート機能をテストしようとしています。基本的に、（ '.overview_table_header'）クラスがクリックされると、列の名前（列、列、列）から$（this）に、Likes、Checkins、Stateなどが設定されます。

選択された。それから、likes列をソートし、GET要求をサーバーに送信します。私はジャスミンでこのプロセスをテストしたいと思いますし、どこから始めるべきかわかりません。どのようにテストを書くのですか？私はこれまでのことをお見せしましょう。

Javascriptをテストするために：

$('.overview_table_header').click(function() { 
    header = $(this); 
    var col2 = $.trim($(this).text()); 
    var sort2 = header.data('sort'); 
    $.get("/search", { promotion_id: $("input[name=promotion_id]").val(), chag_col: $.trim($(this).text()), chag_sort: header.data('sort'), page: 1, q:$("input[name=q]").val(), etime: $("input[name=etime]").val(), stime: $("input[name=stime]").val() }, 
    function(data) { 
     $('#pages').html(data.html); 
     $('#pagelink').html(data.page_links); 
     header.data('sort', data.sort); 
     if (data.sort == 'ASC') { 
     arrow = '<'; 
     } 
     else { 
     arrow = '>'; 
     } 
     $('span.arrow').html(''); 
     header.siblings('.arrow').html(arrow); 
     $("input[name=chag_sort]").val(sort2); 
     $("input[name=chag_col]").val(col2); 
     console.log(data.sort); 
    } 
); 
}); 

マイジャスミンテスト：

describe("Sort Feature", function() { 
    it("sorts columns of data based on user clicks", funciton(){ 
    loadFixtures("home.html"); 

    $(".overview_table_header") 
    }); 
}); 

マイフィクス

<table> 
     <thead> 

     <tr> 
      <th class='col_1'> 
      <span class='overview_table_header'>Total Checkins</span> 
      </th> 
      <th class='col_2'> 
      <span class='overview_table_header'>Trending Place</span> 
      </th> 
      <th class='col_3'> 

      <span class='overview_table_header'>Top Place</span> 
      </th> 
      <th class='col_4'> 
      <span class='overview_table_header'>Top State</span> 
      </th> 
     </tr> 
     </thead> 

Answer 1

まず、Jasmi neはDOMにとらわれません。 JasmineではjQuery要素にアクセスするスクリプトを書くことができますが、jasmine-jqueryを使う方が簡単です。

jasmine-jqueryは、HTMLフィクスチャを処理するための堅牢なメソッドセットを使用してJasmineフレームワークを拡張します。

これは、それが簡単に、たとえば、jQueryのにアクセスするスクリプトを書くことができます：ジャスミン-jqueryのためのGitHubページはhttps://github.com/velesin/jasmine-jquery

あるだけダウンロードページから、ジャスミン、jquery.jsをダウンロード

describe('test with jasmine-jquery', function() { 
    it('should load many fixtures into DOM', function() { 
    loadFixtures('my_fixture_1.html', 'my_fixture_2.html'); 
    expect($('#jasmine-fixtures')).toSomething(); 
    }); 

    it('should only return fixture', function() { 
    var fixture = readFixtures('my_fixture_3.html'); 
    expect(fixture).toSomethingElse(); 
    }); 
}); 

とあなたのジャスミンのテストランナーファイルにそれを含めてください。また、jQueryライブラリも含める必要があります。

GitHubページのドキュメントがあります。ライブラリをインストールしたら、イベントスパイを作成してください：

spyOnEvent（$（ '＃some_element'）、 'クリック'）; $（ '＃some_element'）。クリック（）; expect（ 'クリック'）。toHaveBeenTriggeredOn（$（ '＃some_element'））;