1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    35
    Vote Rating
    0
    ericchaves is on a distinguished road

      0  

    Default testing sencha touch with mocha and chai.js using BDD

    testing sencha touch with mocha and chai.js using BDD


    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 as test framework and Chai.JS 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.
    Code:
    my_app/
                /app/ 
                /resources/
                /test
                /test/lib
                /test/specs
    To use mocha, you need to download two files: a js lib and a css file. For Chai you need only one js lib.
    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.
    Code:
    <!DOCTYPE HTML>
    <html manifest="" lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mocha</title>
        <!-- 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>
        <script>
            window.runner = mocha.setup('bdd');
            window.expect = chai.expect;
            window.should = chai.should();
        </script>
        <!-- Specs -->
        <script type="text/javascript" src="test/specs/smoking.spec.js"></script>
        
    </head>
    <body>
        <div id="mocha"></div>    
      </script>
    </body>
    </html>
    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.

    [code]
    describe("Smoking Tests", function() {


    it("has Sencha Touch 2 loaded", function() {
    expect(Ext).to.exist;
    expect(Ext.getVersion()).to.exist;
    Ext.getVersion().major.should.be.equal(2);
    });




    it("has loaded MyApp code",function(){
    expect(MyApp).to.exist;
    });
    });
    [code]

    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:
    Code:
    launch: function() {
            if (window.location.pathname.lastIndexOf('specRunner.html') !== -1){
                // execute your framework spec runner code here.
                mocha.run();
            }else{
                // Default ST launch code.
                // Destroy the #appLoadingIndicator element
                Ext.fly('appLoadingIndicator').destroy();
                // Initialize the main view
                Ext.Viewport.add(Ext.create('MyApp.view.Main'));
            }
        },
    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,

    Cheers,

    Eric

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    698
    Vote Rating
    40
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by ericchaves View Post
    I've being looking for some samples regarding best practices to write test code for sencha touch without much success.
    have you seen these?
    1. http://www.sencha.com/blog/automating-unit-tests
    2. http://www.sencha.com/blog/ui-testing-a-sencha-app/

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    35
    Vote Rating
    0
    ericchaves is on a distinguished road

      0  

    Default


    Not really. Thanks for sharing!

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar