1

私はジャスミンを学んでいて、複雑なソート機能をテストしようとしています。基本的に、（'。overview_table_header'）クラスをクリックすると、$（this）に、列のリストから列の名前（いいね、チェックイン、状態など）が入力されます。

「いいね」が選択されていると言います。次に、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>
4

1 に答える 1

0

まず、Jasmine は 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();
  });
});

jasmine-jquery の GitHub ページはhttps://github.com/velesin/jasmine-jqueryです。

ダウンロード ページから jasmine-jquery.js をダウンロードし、Jasmine のテスト ランナー ファイルに含めるだけです。jQuery ライブラリも含める必要があります。

GitHub ページにドキュメントがあります。ライブラリをインストールしたら、イベント スパイを作成します。

spyOnEvent($('#some_element'), 'クリック'); $('#some_element').click(); expect('click').toHaveBeenTriggeredOn($('#some_element'));

于 2011-07-20T15:36:28.077 に答える