PDA

View Full Version : Jasmine testing, how to set it up correctly



zwikske
3 Jan 2013, 2:53 AM
Hello all,

Recently we've been building some unit tests with Jasmine but we ran in a couple of problems, namely with namespaces. http://dl.dropbox.com/u/11134069/jasminetest.7z

For example we've a list in the app namespace:

Ext.define('jasminetest.view.Main',
{
extend: 'Ext.dataview.List',
xtype: 'main',


requires: ['shared.view.template.ItemTPL', 'Ext.data.Store'],


config:
{
fullscreen: true,
itemTpl: Ext.create('shared.view.template.ItemTPL'),
data: [
{
title: 'Item 1'
},
{
title: 'Item 2'
},
{
title: 'Item 3'
},
{
title: 'Item 4'
} ]
}
});


As you can see we include a template in another namespace. The template looks like this:

Ext.define('shared.view.template.ItemTPL',
{
extend: 'Ext.XTemplate',


constructor: function(config)
{
this.callParent([ '{title}', ]);
}
});


Then I've modified the specrunner.html in Jasmine to include the sencha touch library like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<!-- Adding the Sencha Touch libs... -->
<script type="text/javascript" src="../touch/sencha-touch-debug.js"></script>


<link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>


<!-- include source files here... -->
<script type="text/javascript" src="../app/view/Main.js"></script>


<!-- include spec files here... -->
<script type="text/javascript" src="spec/specMain.js"></script>


<script type="text/javascript">


... more unrelated jasmine code goes here


The spec itself looks pretty clean as well:

describe('jasmine test functions', function()
{
describe('jasminetest default values', function()
{
it('should if true is true', function()
{
expect(true).toBeTruthy();
});


it('should test if the list is fullscreen', function()
{
main = Ext.create('jasminetest.view.Main', {});
expect(main.getFullscreen()).toBeTruthy();
});
});
});


When I run the tests it can't find (404's) the template. How should we solve this? We're using ST2.1 with Jasmine 1.1. I've also uploaded a complete demo with the above code here: http://dl.dropbox.com/u/11134069/jasminetest.7z. It's a 2MB archived, archived with 7zip.org.

zwikske
7 Jan 2013, 12:30 AM
I solved the problem with the 404's. I've included the following code in the test:

Ext.Loader.setPath(
{
'shared': 'path to shared',
'Ext.ux': 'path to UX',
'Ext': 'path to touch'
});

This makes the tests run, and succeed, but it still tries to load the files from the wrong location as well. Namely relative to the Jasmine path. How do you guys solve this? Or you just live with the 404 since the test seem to run just fine?