Sencha

Simplifying Grunt Jasmine tests for Ext.js

Are you wanting to unit test you Ext.js code but not sure where to start? Do you feel frustrated that everytime you get a bug raised you don’t know how to apply TDD techniques to your JavaScript because it’s just “not the same kind of code” as your Java, Ruby, .Net?

Since I’ve worked with Ext.js and Sencha Touch, testing has long been an issue that I’ve fought with. Initially I did no testing other than opening the browser hitting refresh and retracing my steps. However last year I went to Full Frontal and attended Rebecca Murphy’s talk (video & slides) and workshop on how to write testable JavaScript. Since then I’ve been cranking out test, after test, after test, and it’s improved the quality of code and its stability drastically.

However it did take me a while to understand how to setup Jasmine for an Ext.js project, so I thought something could be done about this to make life simpler. So I created a new Grunt plugin:

grunt-sencha-jasmine

It extends the grunt-contrib-jasmine so should be compatible with all options there, but it sets up a different template which just needs to know the location of the Ext framework and also any Ext.Loader.setPath() configurations.

To help show it and other ways to use Grunt on Ext.js projects I’ve setup an example Git project for people to clone and play with:

https://github.com/mattgoldspink/grunt-extjs-example

This project comes with a nice simple Grunt file and ONE Jasmine test. If you’re going to start testing, start tiny, don’t try cover your whole code base. If you can write this one unit test, let this be it!

I hope people find this useful and please feel free to give any feedback.

Author: Matt Goldspink

I'm a web developer based in the UK. I'm currently UI Architect at Vlocity, Inc, developing UI's on the Salesforce platform using a mix of Web Components, Angular.js and Lightning.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.