Search jQuery

jQuery Forum

QUnit and Testing

westen30

Testing Submit Event

Answered

Need more info
Working on it
Answered

in QUnit and Testing • 13 years ago

Hi, I'm very new to jquery and have just started looking at qunit for testing and I have a bit of existing code that I would like to add a test to but I can't figure out how to write the test from the qunit examples. Can someone help, below is the code I would like to write a test for:

$(document).ready(function(){

$("#ajax-contact-form").submit(function(){

var str = $(this).serialize();

$.ajax({

type: "POST",

url: "sendmail.php",

data: str,

success: function(msg){

$("#note").ajaxComplete(function(event, request, settings){

if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form

{

result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';

$("#contactform").hide();

}

else

{

result = msg;

}

$(this).html(result);

});

}

});

return false;

});

Many thanks

Martin

Replies(3)

joern.zae..

Re: Testing Submit Event

13 years ago

You'd have to start refactoring your code a bit to make it testable. For example, try to put the code into a jQuery plugin, and test that. Though in this case, there is barely enough code to test in the first place.

Jörn Zaefferer

westen30

Re: Re: Testing Submit Event

13 years ago

Thanks for the response, but doesn't seem very helpful. Firstly the code may need refactoring but is functional as is, and is using jQuery's syntax, so are you saying that QUnit can't be used to test code written in jQuery using this type of syntax? Secondly this one small bit of code for a site that I am writing, surely all functions should be testable regardless of how much code there is. A function with only 2 lines of code should still be testable.

Regards

Martin

westen30

Re: Testing Submit Event

13 years ago

Never mind I worked it out for myself. I didn't need to refactor it either.

For anybody who might be interested to get write the test I had to add some dummy DIV elements to the test page, one to hold some test form data that would be used to send the email and test that the form hiding worked and one to hold the message result. Then I just called the submit function and tested to see if the form is hidden like its supposed to be and if the confirmation message appears. Its probably not the best way of doing it but it works, hopefully as I learn more about jQuery and QUnit I will be able to improve it. The code is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

$(document).ready(function(){

test('my test', function() {

$("#ajax-contact-form").submit();

stop();

setTimeout(function() {

equals($("#contactform").css("display"), "none", "Hide Contact Form");

ok($("#note div").hasClass("notification_ok") , "Message sent note");

start();

}, 500);

})

});

</script>

</head>

<body>

<h1 id="qunit-header">QUnit example</h1>

</form>

test

</div>

</body>

</html>

Top Reply

Response title

Attachments

jQuery Forum

Testing Submit Event

Answered

Replies(3)

Re: Testing Submit Event

Re: Re: Testing Submit Event

Re: Testing Submit Event

Statistics

Tags

Actions