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

【问题标题】：Testing a Complicated sort feature with Jasmine使用 Jasmine 测试复杂的排序功能
【发布时间】：2011-07-19 20:14:28
【问题描述】：

我正在学习Jasmine，我正在尝试测试一个复杂的排序功能。本质上，当单击 ('.overview_table_header') 类时，$(this) 会填充列的名称，来自列列表：Likes、Checkins、State 等。

说“喜欢”被选中。然后它会对喜欢的列进行排序，向服务器发送一个 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>

【问题讨论】：

标签： javascript jquery ruby-on-rails testing jasmine

【解决方案1】：

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

jasmine-jquery 使用一组强大的方法扩展了 Jasmine 框架来处理 HTML 固定装置。

这使得编写访问 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').click(); expect('click').toHaveBeenTriggeredOn($('#some_element'));

【讨论】：