如何检查jQuery方法(fadeOut, hide等)是否已经被Jasmine调用

Question

我试图通过使用在Ruby中为我工作的相同TDD方法来清理我的Javascript，但是跳到Jasmine已经让我陷入了困境。

对于一个简单的例子，我想指定一个给定的元素在点击时淡出:

$('.position-details').live 'click', ->
  $this = $(this)
  $this.fadeOut 'fast', ->
    $this.closest('.fields').find('.position-search').fadeIn('fast').focus()

我的规格:

describe "Position picker", ->
  beforeEach ->
    loadFixtures("position_picker.html")
    @details = $('.position-details')
    @picker = $('.position-picker')
    jasmine.Clock.useMock()
  it "the position details are initially shown", ->
    expect(@details).toBeVisible()
  describe "when the position details are clicked", ->
    it "fades out the position details", ->
      @details.trigger('click')
      jasmine.Clock.tick(1000)
      expect(@details).not.toBeVisible()

我的夹具:

<div id='position-data' data-positions="[{&quot;value&quot;:35,&quot;label&quot;:&quot;Accountant&quot;,&quot;division&quot;:&quot;North&quot;,&quot;job_class&quot;:&quot;Headquarters&quot;}]"></div>
<div class='position-details'>
  <div class='position-name'></div>
  <br />
</div>
<div class='position-picker'>
  <label>Position<abbr title="required">*</abbr></label>
  <span class="error" />
  <input class="position-search" type="text" />
  <div>
    <input class="position_id" type="text" />
  </div>
</div>

第一个规范通过了，我不确定为什么第二个没有。一旦我掌握了这些，我相信它会成为我的第二天性。谢谢你的帮助和建议!

Answer 1

您可以使用spyOn

检查:

it("fades out the element", function() {
  spyOn($.fn, 'fadeOut');
  fadeOutElem();
  expect($.fn.fadeOut).toHaveBeenCalled();
});

你也可以像这样使用超时:

it("fades out the element", function(done) {
  fadeOutElem();
  setTimeout(300, function() {
    expect($(".position-details").css('display').toEqual('none');
    done();
  });
});

Answer 2

看看这篇SO和这篇博文