Testing ExtJS 4 with Jasmine and Sinon

testExtjs2Jasmine and Sinon are two JavaScript testing frameworks, while the first offers a clear syntax and a great collection of matchers the latter excels when faking xhr operations. In this article I will explain the setup needed to make use of these libraries to test our ExtJS 4 applications.

First download Jasmine, I’m using the 1.3.1 version. For Sinon I’m going to use Sinon-server 1.7.3, note that this version is not the full Sinon library, it only has the xhr faking functionality.

For my folder structure I decide to organize my test files/libraries under a test folder, like:

testExtjs1

To fire up an Ext JS ready testing environment we need to add the following JavaScript references inside the SpecRunner.html file:

  • Ext JS library
  • Sinon-server library

Also we need to create and include in SpecRunner.html a JavaScript with the necessary code to set up the Ext application namespace, load the MVC elements and initialize the Jasmine reporter.

Here is the code:

Change the paths and namespace configurations to match your Ext JS application and include your Models, Views and Controllers.

Right now you should be able to get valid references to your MVC components inside your specs to create components and query managers.

Also if you want some ExtJS specific matchers take a look at Ext Spec.

For me, the way to test and mock AJAX procedures wasn’t very clear, so ill share some working examples of my current findings.

Mocking Ext.Ajax with Jasmine spies

 Mocking Ext.Ajax with Sinon xhr fakes

 Using Sinon fake server to mock Ext.data.Store operations

 

Acerca de

Ver todas las entradas de