Rails + Jasmine-Ajax: what is the correct way to test code triggered by `ajax:success` (jquery-ujs)

Question

I am trying to test a certain internal library that has some JS behavior triggered on the ajax:success event.

The library creates a link that looks like this:

<%= link_to 'click here', '/some_path', class: 'special-link', remote: true %>

And in the JS part of the library there is event binding code, which is the part I want to black-box test through its effect on the DOM:

$(document).on 'ajax:success', '.special-link', (e, data, status, xhr) ->
  # Code that has some effect on the DOM as a function of the server response

The library works as expected in the browser. However, when I try to test the library in Jasmine by calling $('.special-link').click(), the desirable effect on the DOM cannot be observed.

The issue, it seems, is that the ajax:success event does not get triggered:

describe 'my library', ->
  beforeEach ->
    MagicLamp.load('fixture') # Fixture library that injects the link above to the DOM
    jasmine.Ajax.install()
    jasmine.Ajax.stubRequest('/some_path').andReturn({
      responseText: 'response that is supposed to trigger some effect on the DOM'})

  afterEach ->
    jasmine.Ajax.uninstall()

  # Works. The fixtures are loading properly
  it '[sanity] loads fixtures correctly', ->
    expect($('.special-link').length).toEqual(1)

  # Works. The jquery-ujs correctly triggers an ajax request on click
  it '[sanity] triggers the ajax call', ->
    $('.special-link').click() 
    expect(jasmine.Ajax.requests.mostRecent().url).toContain('/some_path')

  # Works. Code that tests a click event-triggering seems to be supported by Jasmine
  it '[sanity] knows how to handle click events', ->
    spy = jasmine.createSpy('my spy')
    $('.special-link').on 'click', spy
    $('.special-link').click()
    expect(spy).toHaveBeenCalled()

  # Does not work. Same code from above on the desired `ajax:success` event does not work
  it 'knows how to handle ajax:success events', ->
    spy = jasmine.createSpy('my spy')
    $('.special-link').on 'ajax:success', spy
    $('.special-link').click()
    expect(spy).toHaveBeenCalled()

What is the right way to test the effect on the DOM of code that runs in ajax:success events?

Answer 1

Have you tried simply spying on the ajax function? For that, you need to use spyOn and force it to call the success event handler. That will let you test what you expect to happen when it's called.

it 'knows how to handle ajax:success events', ->
  spyOn($, "ajax").and.callFake( (e) ->
    e.success({});
  )

  $('.special-link').click()

  # expect some method to be called or something to be changed in the DOM