jQuery assertion support / defensive programming?

Question

Is there any built in support in jQuery for basic assertion checking, primarily of things like 'expected number of returned elements'.

For instance I may have a simple statement like this :

 $("#btnSignup").click(function() {
     return validateForm();
 );

Now theres plenty of reasons why $("#btnSignup") may not return exactly 1 item :

• You mistyped the button id name
• Somebody renamed it by mistake
• It doesnt exist on the page
• There are TWO elements with that id by mistake
• You are using ASP.NET MVC and you accidentally generated the HTML for the button with HtmlHelper.Button(...) instead of HtmlHelper.Submit(). The Button(...) method does NOT create an ID for the button element.

Now in this instance (and many instances) my application simply won't work unless EXACTLY one item is returned from the selector. So i ALWAYS want to be told if $("@#btnSignup") doesn't return exactly 1 item. So how can I do this?! I'm fine if this is an exception or preferably an alert box - so if I'm not running in a debugger then I can be told.

I'm looking for syntax somthing like this - which is similar in functionality to .NET's Single() extension method.

 $("#btnSignup").assertSingle().click(function() {
     return validateForm();
 );

 or 

 $("#btnSignup").assertSize(1).click(function() {
     return validateForm();
 );

I'd personally be fine for this code to ALWAYS run and tell whoever is there that there is a problem. its obviously not a performance issue to be running this extra code for all eternity. In this instance my code is broken if #btnSignup doesn't exist.

I'm sure this issue has been beaten to death and there are many solutions - but can somebody point me to some of them?

I dont see anything built into jQuery and would wonder what the best plugin is. I'd much rather just have something on the page that can keep 'watching' over me and tell me if theres an issue. I wouldn't even be opposed to an AJAX call being made to an error reporting service.

Answer 1

It doesn't look like there is anything built-in. But writing an extension isn't too hard:

$.fn.assertSize = function(size) { 
  if (this.length != size) { 
    alert("Expected " + size + " elements, but got " + this.length + ".");
    // or whatever, maybe use console.log to be more unobtrusive
  }
  return this;
};

Usage is exactly as you propose in your question.

$("#btnSignup").assertSize(1).click(function() {
  return validateForm();
);

Note that in its current form the function returns successfully even if the assertion fails. Anything you have chained will still be executed. Use return false; instead of return this; to stop further execution of the chain.

Answer 2

Enhancements to Tomalak’s answer: throw the error to halt execution, include the offending selector and add the assertSingle variant.

$.fn.assertSize = function(size) {
    if (this.length != size) { 
        throw "Expected " + size + " elements, but selector '" + this.selector + "' found " + this.length + ".";
    }
    return this;
};
$.fn.assertSingle = function() { return this.assertSize(1); };