Thursday, March 20, 2014

Steps to create and run jasmin testing for cordova project

1. go to page http://jasmine.github.io/2.0/introduction.html and check the latest version of jasmin. Currently it is 2.0. (Download jasmin 2.0 from https://github.com/pivotal/jasmine/tree/master/dist)

2. create a regular cordova application for ios

3. copy the content of folder jasmine-standalone-2.0.0 into cordova platform's www folder

4. update /lib/jasmine-2.0.0/boot.js with below change:
/*comment out the below code as the test should be triggered by cordova on device ready 
  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }
    htmlReporter.initialize();
    env.execute();
  };
*/

//add  the below method to start jasmin cordova test
  window.jasminetest = function(){
    htmlReporter.initialize();
    env.execute();

  }

5. edit index.html created by cordova by adding the below code in head section. yourjscode is your javascript implementation. yourjasminecode is your jasmine testing code used to test yourjscode
        
   <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">

  <script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>

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

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

  and also delete the below element to remove cordova ui element
<div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>

6. edit index.js by updating receivedEvent method as below

   // Update DOM on a Received Event
    receivedEvent: function(id) {
     /*   var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
*/
        window.jasminetest();
        console.log('Received Event: ' + id);
    }


7. run your cordova project, the test should start automatically. If later, you want to test a different jasmin test suite, just replace yourjscode.js and yourjasminecode.js.