View Full Version : testing sencha touch with mocha and chai.js using BDD

16 Jan 2013, 11:28 AM
Hi Folks,

I've being looking for some samples regarding best practices to write test code for sencha touch without much success. So I'd like to share my setup with others.

I would love to hear comments, tips and even how you people are testing your apps. Also if you foresee any problem with the structure I used, please let me know.

Since I'm using Mocha (http://visionmedia.github.com/mocha/) as test framework and Chai.JS (http://chaijs.com/) as assertion libraries, I will be referring to them in here but the idea presented would apply to other frameworks, including jasmine, easily with some minor adaptations.

In order to have it working first a folder named test under my Sencha Touch project directory. Inside of it create a lib and specs directory, to hold the framework libs and spec files. Mocha and Chai both have libraries targeted to either browser or node.js environments. We want the Browser ones.


To use mocha, you need to download two files: a js lib (https://raw.github.com/visionmedia/mocha/master/mocha.js) and a css (https://raw.github.com/visionmedia/mocha/master/mocha.css) file. For Chai you need only one js lib (http://chaijs.com/chai.js).
Save them all in the test/lib directory.

Now create a new file named specRunner.html in the root folder (the same place where you have your index.html file) and paste the code below.

<html manifest="" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<link rel="stylesheet" href="test/lib/mocha.css" />
<script src="test/lib/chai.js" type="text/javascript"></script>
<script src="test/lib/mocha.js"></script>
window.runner = mocha.setup('bdd');
window.expect = chai.expect;
window.should = chai.should();
<!-- Specs -->
<script type="text/javascript" src="test/specs/smoking.spec.js"></script>

<div id="mocha"></div>

This specRunner already references one spec file that validates if everything is wired correctly and "have no smoke when we turn it on". ;)

So paste the following code in a file named smokingTest.spec.js inside the test/specs/ directory, adjusting the MyApp value to your currently app name.

describe("Smoking Tests", function() {

it("has Sencha Touch 2 loaded", function() {

it("has loaded MyApp code",function(){

Finally you need to tweak you app.js to identify if it's loading the specRunner file or not. In case of the spec runner, we start mocha runner so it can run it's tests. Change the launch function of app.js as following:
launch: function() {
if (window.location.pathname.lastIndexOf('specRunner.html') !== -1){
// execute your framework spec runner code here.
// Default ST launch code.
// Destroy the #appLoadingIndicator element
// Initialize the main view

Now all you have to do to run your tests is load the specRunner.html file instead of index.html. As you write new specs just add them after the smoking tests in the specRunner.html file.

The reason I prefer to have a separate file for the spec runner, is because I don't want to deploy it or the test directory in production.

If you wish to load new libraries (like sinon.js, for example) all you have to do is save them inside the lib directory and declare them in the specRunner.

Hope this helps,



16 Jan 2013, 10:00 PM
I've being looking for some samples regarding best practices to write test code for sencha touch without much success.

have you seen these?

17 Jan 2013, 5:09 AM
Not really. Thanks for sharing!