使用茉莉花測試複雜的排序功能

我在學習Jasmine，我試圖測試複雜的排序功能。本質上，當點擊（'.overview_table_header'）類時，$（this）將填充列的名稱，從列列表中：喜歡，檢入，狀態等。使用茉莉花測試複雜的排序功能

說「喜歡」是選擇。然後，它會對喜歡列進行排序，並向服務器發送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>

來源

2011-07-19 JZ.

首先，雅斯米ne是DOM不可知的。您可以編寫訪問Jasmine中的jQuery元素的腳本，但使用jasmine-jquery會更容易。

jasmine-jquery通過一組強大的方法來處理HTML裝置，從而擴展了Jasmine框架。

這使得更容易編寫訪問jQuery的，例如腳本：

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的頁面是https://github.com/velesin/jasmine-jquery

只需從下載頁面下載茉莉的jquery.js和將它包含在你的Jasmine的測試運行器文件中。您還必須包含jQuery庫。

在GitHub頁面上有文檔。一旦你安裝了庫，只需寫一個事件間諜：

spyOnEvent（$（'＃some_element'），'click'）; $（ '＃some_element'）點擊（）。（'click'）。toHaveBeenTriggeredOn（$（'＃some_element'））;

來源

2011-07-20 15:36:28

使用茉莉花測試複雜的排序功能

回答

相關問題