JavaScriptMVC

From JavaScriptMVC

Jump to: navigation, search

Automated testing has well-known advantages, but JavaScript developers rarely write test code. In fact, JavaScript developers cite testing as their second biggest pain point in making web sites.

Clearly, JavaScript testing sucks. It sucks because most applications are event driven, and although libraries exist that simulate some events, none are complete. Also, existing test libraries are complicated to set up and use. The Test plugin solves these problems.

JavaScriptMVC's Test plugin finally makes JavaScript testing achievable by being the most comprehensive and easy to use testing suite.


Most comprehensive event simulation

More than just unit tests, Test lets you simulate user interactions with your page:

  • Cross browser support for typical DOM events, like keypress, click, submit, blur, and focus
  • Simulate writing text or dragging an element
  • Easily simulate AJAX functionality with sample data in fixture files
// simulate writing in an input
this.Write($('username_input'), {text: 'Elmo'});
// simulate submit event
this.Submit('#myform');

Easy to use

Test is optimized for easy use. But, every library says that. Here's why we mean it:

1. JavaScriptMVC's Console provides helpful messages to guide you through setup

Test runner
Test runner

2. Asynchronous event tests avoid using nested functions to keep your code easier to understand

test_open: function(){
   // a controller action helper doubleclicks the second directory
   this.next(this.DirectoryDblclick(2));
   // call the next function when the open animation is complete
},
assert_open: function(params){
   // check there are 5 files in the directory
   this.assertEqual(5, params.element.childNodes.length);
}

3. If you use Controller, helper methods are automatically created that simulate each controller action's event, such as TodoClick

4. Event simulation syntax so simple your grandma could understand it2

this.Keypress(element, 'h'); // Test syntax
YAHOO.util.UserAction.keypress(element, { charCode: 72 }); // Yahoo syntax

Related Learning

See a demo

Check out the api