Тестирование сложной функции сортировки с жасмином

Question

Я изучаю Жасмин , и я пытаюсь проверить сложную функцию сортировки.По сути, при нажатии на класс ('.overview_table_header') $ (this) заполняется именем столбца из списка столбцов: Likes, Checkins, State и т. Д.

Say "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")
  });
});

My Fixture

<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

Во-первых, Жасмин независима от DOM. Вы можете написать сценарии, которые обращаются к элементам jQuery в Jasmine, но было бы проще использовать 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();
  });
});

Страница GitHub для jasmine-jquery: https://github.com/velesin/jasmine-jquery

Просто загрузите jasmine-jquery.js со страницы загрузок и включите его в файл тестового запуска вашего Jasmine. Вы также должны включить библиотеку jQuery.

На странице GitHub есть документация. После того, как вы установите библиотеку, просто напишите шпион события:

spyOnEvent ($ ('# some_element'), 'click'); $ ( '# Some_element') нажмите (). ожидать ( 'щелчок') toHaveBeenTriggeredOn ($ ( '# some_element'));.