1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    79
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default Jasmine testing, how to set it up correctly

    Jasmine testing, how to set it up correctly


    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:
    Code:
    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:
    Code:
    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:
    Code:
    <!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:
    Code:
    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.

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    79
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default


    I solved the problem with the 404's. I've included the following code in the test:
    Code:
    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?