Mockjax没有拦截异步表单提交

Question

I'm using qUnit and mockjax to try and handle a simple async form submission but for some reason, the async POST seems to pass through mockjax.

test 'RuleModal closes the modal on a successful form submission event', ->
  $.mockjax
    dataType: 'json'
    url: '/url'
    type: 'post'
    responseText:
      status: 'success'

  $dom = $('<div class="show-modal"><form action="/url" method="post"></form></div>')
  $form = $dom.find('form')
  modal = new RuleModal($dom)

  $form.submit()

  equal $($dom).hasClass('show-modal'), false, 'closes the modal after form submission'

and the implementation

_bindSubmit: ->
  modal = this

  @$modal.find('form').on 'submit', (event) ->
    event.preventDefault()

    $.ajax
      dataType: 'json'
      url: @action
      type: @method
      data: $(this).serialize()
      success: (data, status, xhr) ->
        modal.close()
      error: (xhr, status, error) ->
        alert 'Something went wrong: ' + error

I tried hardcoding the implementation to match the test exactly but that still didn't work. What am I doing wrong?

Answer 1

My guess is that because you do the form submit and then immediately do your assertion that you are running into a race condition. The $form.submit() call is going to execute and still be running when your equal ... line runs. Even though you have mocked out the ajax call, it is still asynchronous. Unfortunately, the browser native events (like submit ) do not have any kind of callback when they finish, so you may just need a setTimeout() around the assertion:

$form.submit();

setTimeout(function() {
    equal($($dom).hasClass('show-modal'), false, 'closes the modal after form submission');
}, 100);  // I think the default in Mockjax is 50ms

That or you could try doing this in an event handler, but that could produce a race condition as well, I think.