Question

我正在学习Jasmine，我正在尝试测试一个复杂的排序功能。基本上，当单击（'。overview_table_header'）类时，$（this）将填充列的名称，列列表：Likes，Checkins，State等。

选择“喜欢”。然后它会对likes列进行排序，向服务器发送GET请求。我想在Jasmine中测试这个过程，我不知道从哪里开始。你会怎么写测试？我会告诉你到目前为止我有什么。

要测试的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

首先，Jasmine与DOM无关。您可以编写在Jasmine中访问jQuery元素的脚本，但使用jasmine-jquery会更容易。

jasmine-jquery使用一组强大的方法扩展了Jasmine框架，以处理HTML fixture。

这使得编写访问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();
  });
});

jasmine-jquery的GitHub页面是https://github.com/velesin/jasmine-jquery

只需从下载页面下载jasmine-jquery.js，并将其包含在Jasmine的测试运行器文件中。您还必须包含jQuery库。

GitHub页面上有文档。安装库后，只需编写一个spy事件：

spyOnEvent（$（'＃some_element'），'click'）; $（ '＃some_element'）点击（）。期望（ '点击'）toHaveBeenTriggeredOn（$（ '＃some_element'））;

使用Jasmine测试复杂的排序功能

1 个答案: