8

どこにでもある backbone.js の「todo」サンプルの Coffeescript 実装のビュー テストを実装しようとしています (github.com/rsim/backbone_coffeescript_demo を参照してください)。

上記のデモのジャスミン テストは、ビュー イベントを除いて、かなりうまく機能します。次のいずれかまたは両方で行き詰まっていると思います。i) ビュー コードのイベント バインディングがわかりません。ii) ビュー コード イベントの Jasmine テストを適切に設定する方法がわかりません。

「編集」イベントの例を次に示します...

class TodoApp.TodoView extends Backbone.View
  tagName: "li"
  template: TodoApp.template '#item-template'
  events:
    "dblclick div.todo-content" : "edit"
     ...

  initialize: ->
    _.bindAll this, 'render', 'close'
    @model.bind 'change', @render
    @model.bind 'destroy', => @remove()

  render: ->
    $(@el).html @template @model.toJSON()
    @setContent()
    this

  edit: ->
    $(@el).addClass "editing"
    @input.focus()
  ...

...ここで、ダブルクリックでフォーカスが得られたかどうかをテストします:

    describe "edit state", ->
      li = null

    beforeEach ->
       setFixtures('<ul id="todo-list"></ul>')
       model = new Backbone.Model id: 1, content: todoValue, done: false
       view = new TodoApp.TodoView model: model, template: readFixtures("_item_template.html")
       $("ul#todo-list").append(view.render().el)
           li = $('ul#todo-list li:first')
       target = li.find('div.todo-content')
       expect(target).toExist()
               target.trigger('dblclick') # here's the event!

    it "input takes focus", ->
       expect(li.find('.todo-input').is(':focus')).toBe(true)

i) スパイも ii) 焦点も当てはまらない。

Jasmine で注意すべき backbone.js イベント コードのテストに特殊性はありますか?

4

4 に答える 4

2

私は coffescript が苦手なので、何かが足りないかもしれませんが、どこにスパイを設定していますか?

イベントの呼び出しをテストするには、スパイを設定したら、ビューのイベントを更新する必要がある場合があります。

spyOn(view, 'edit');
view.delegateEvents();
target.trigger('dblclick');

it("should call edit when target is double clicked", function() {
  expect(view.edit).toHaveBeenCalled()
});
于 2012-09-21T12:03:18.267 に答える
2

ビューのeditメソッドをスパイしています。これにより、メソッドがスパイ オブジェクトに置き換えられます。つまり、実際の編集メソッドは呼び出されません。したがって、あなたは@input.focus決して発砲しません。

テストで実際に編集メソッドを呼び出す必要があるため、そのスパイを削除します。

expect補足: beforeEach でメソッドを呼び出さないでください。それらに本当に期待を設定する必要がある場合は、itそれらのブロックを作成してください。

于 2011-09-29T01:35:26.800 に答える
0

私はコーヒースクリプトでテストを書きませんでしたが、同じ問題がありました。私はあなたのテストを2つの異なるテストに分解しました. まず、ビューの編集機能を呼び出して入力ボックスにフォーカスを設定するかどうかをテストしました。その後、ラベルがダブルクリックされたときに編集が呼び出されるかどうかをテストしましたが、まだそのテストに合格していません。しかし、編集機能が機能するかどうかをテストした方法は次のとおりです。

 describe ("A todo item view", function() {
    var my_model;
    var todo_view;

    beforeEach(function() {
       my_model = new Todo({content:"todo value", done:false});
       todo_view = new TodoView({model:my_model});
    });


   it("should set the focus on the input box when the edit function is called", function(){ 
        $('body').append( todo_view.$el ); //append the view to Specrunner.html
        todo_view.edit(); //call the view's edit function
        var focus= document.activeElement;  //finds what element on the page has focus
        expect(focus).toBe('.todo-input');  //jasmine-jquery matcher checks if focused element has the .todo-input class
});

問題を引き起こしている可能性があるのは、モデルとビューが beforeEach 内で宣言されていることです。それらを beforeEach 内で宣言するということは、それらが beforeEach のスコープ内にのみ存在し、それを実行するともはや存在しないことを意味します。

また、setFixtures はあなたが思っていることをしますか? DOM ツリーの一部ではない要素にフォーカスを設定することはできないため、ビューの el をジャスミン仕様自体の本文に追加しました。(私はコマンドライン版ではなく、HTML specrunner を使用しています) これにより、dom ツリーの一部になり、フォーカスを持つことができるようになり、フォーカスがあるかどうかをテストできるようになります。

于 2013-02-19T02:13:20.183 に答える
0

これに関する問題は、Backbone.Vieweventsオブジェクトがイベント委任を使用していることです。イベントを呼び出すことができるようにするには、要素が DOM の一部である必要があり$('body').append(someView.el)ますbeforeEach。個人的には、バックボーンが手動でクリックを正しく設定しeventsてトリガーしているかどうかをテストしないようにしています。単体テストでは、DOM を完全に回避してコールバック ハンドラーを直接呼び出す方が実用的です。これにより、テストが大幅に遅くなる可能性があります。

同じ問題があるため:focus、要素がフォーカスされているかどうかをjQueryが判断できるように、DOMに要素が必要です。この場合、コンポーネントの一部として何らかの状態を設定し、DOM のクエリを介して状態をチェックしない方がよいでしょうsomeView.hasFocus === true。focusまたは、要素の実装をスパイして、それが呼び出されたかどうかを確認することもできます。

于 2015-06-23T00:46:03.317 に答える