current community

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 3 down vote favorite
1

I'm trying to start unit testing (not using any testing frameworks) for my javascripts.

Here's one example of it. 

var obj = {};

obj.disableBtn = function ($btn, style) {
  $btn.attr('disabled','disabled').addClass('disabled').removeClass(style);
};

The use case is as such:

obj.disableBtn($('.submit'), 'btn-blue');

What it does is simply add the disabled attribute, add the disabled class, and remove the btn-blue style.

Please advise how would a typical test case look like in this case.

I have a little knowledge on testing using assert(), but have no idea how to go about it when it involves verifying the result on HTML elements.

share|improve this question
 
is this part of a website? couldn't you just create a mini site with the objects/elements and scripts that you need, and open it up in a browser and then open up the developer tools and click the button, then create a button that would undo it, and click away? –  Malachi Aug 27 '13 at 18:24
 
Hey @resting! You marked my answer as correct. Does that mean that you figured it out yourself? assert( willBeAnAmazingProgrammer(SE.users.resting) ) => true –  Martin Josefsson Nov 18 '13 at 21:23
 
@MartinJosefsson I figured that I could write an assert that disabled attribute was added and btn-blue class was removed. Its the same principle with what you and @Dan1701 wrote, with the only difference of using a unit testing framework. Both are correct, but I have to chose 1. I choose your's for simplicity's sake. But thanks to both :) –  resting Nov 19 '13 at 3:21
 
@resting that's awesome! I guess most the testing framework as well as normal assert()s really are glorified == or ===. So in the end pretty simple when you get it! –  Martin Josefsson Nov 19 '13 at 10:07
add comment

2 Answers

up vote 1 down vote accepted

I appreciate that you do assert()'s. They're simple and powerful, and non-magical.

You can test anything that is readable by code. Think "if I can if this, then I can assert it".

If you want to write a test for something that updates markup, then the question is 'how can I with code get the information I want to test?'.

If you're using jQuery (it seems so) then have you test get the button with the selector $('.myButton'). How would you write and if to check the property of this button? I think you can do that. Then use the same code in your assert. You're closer than you think, you can do it!

share|improve this answer
add comment
up vote 0 down vote

I recommend using a JS unit testing framework, such as qUnit. There's no need to reinvent unit testing tools from scratch, and you will be able to focus on testing your specific functionality.

You could then create a unit test that creates a button which is not disabled and has the "active" style properties attached to it. Next, run your disableBtn function and assert that the button is disabled and no longer has the style attached to it. The unit test code would then look something like:

ok(true === yourButton.prop("disabled"));
ok(false === yourButton.hasClass('btn-blue'));

(jQuery functions used here since we're mostly concerned about the unit testing code. You can of course check the attributes using vanilla JS).

share|improve this answer
 
Of course, it can be helpful to mess around writing your own unit testing api as a learning exercise. Just remember the programmer's virtues ( c2.com/cgi/wiki?LazinessImpatienceHubris ) if you start to think about using them for a project, and use a library instead. –  jzx Nov 11 '13 at 15:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.