How do I test a form submit in Jasmine?

javascript unit-testing jasmine form-submit
gcdev picture gcdev · Sep 14, 2011 · Viewed 17.4k times · Source

I have a form that does some extensive Javascript stuff before finally POSTing to it's ACTION URL. I am writing some Jasmine unit tests and want to make sure the Javascript stuff happens when the form is submitted. However, I definitely don't want the page to go to the ACTION URL while I am unit testing.

I saw what seemed like a good suggestion here: http://groups.google.com/group/jasmine-js/browse_thread/thread/a010eced8db17c1a?pli=1

...but, as I am fairly new to Jasmine, I am unsure how to implement it and cannot find any pertinent examples on the web. Does anyone have some sample code I could look at that would accomplish what I need?

Thanks!

Answer

peekaboo picture peekaboo · Nov 7, 2011

Maybe this code snippet can help you...

it('calls ajax post on export button click', function() {
  view.render();
  var form = $('#export_images_xml_form');
  var submitCallback = jasmine.createSpy().andReturn(false);
  form.submit(submitCallback);

  $('#export_images_xml_button').click();

  expect(form.attr('action')).toEqual('/export');
  expect($('#export_images_xml_form input').attr('value')).toEqual('22,33,44');
  expect(submitCallback).toHaveBeenCalled();
});

What I do is basically stopping every submit for given form returning false in the associated callback (see submitCallback behavior).

Then I can also test callback has been called...

Hope it helps!

Related questions

jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

I have an angular service called requestNotificationChannel: app.factory("requestNotificationChannel", function($rootScope) { var _DELETE_MESSAGE_ = "_DELETE_MESSAGE_"; function deleteMessage(id, index) { $rootScope.$broadcast(_DELETE_MESSAGE_, { id: id, index: index }); }; return { deleteMessage: deleteMessage }; }); I am trying to unit test this service …

Read More
How do I mock a service that returns promise in AngularJS Jasmine unit test?

I have myService that uses myOtherService, which makes a remote call, returning promise: angular.module('app.myService', ['app.myOtherService']) .factory('myService', [ myOtherService, function(myOtherService) { function makeRemoteCall() { return myOtherService.makeRemoteCallReturningPromise(); } return { makeRemoteCall: makeRemoteCall }; } ]) To make a unit test for myService I …

Read More
How to spyOn a value property (rather than a method) with Jasmine

Jasmine's spyOn is good to change a method's behavior, but is there any way to change a value property (rather than a method) for an object? the code could be like below: spyOn(myObj, 'valueA').andReturn(1); expect(myObj.valueA).toBe(1);

Read More