Unit and Regression Test Automation of Sencha applications


Image

Overview

This article gives us the brief overview about how we can ensure software quality development and automating the quality process. There are various open source technologies and tools for unit, as part of this article we will cover Jasmine. Also covers how to get the quality metric results like code coverage % for the Sencha applications.

Problem Statement

For quality delivery of any software application involves following points

– Testing the each part of application by writing unit test scripts,
– To get the report how many unit test scripts passed and failed,
– Regression testing to ensure any new change does not to break existing functionality,
– Getting the quality metric like % of code covered as part of testing and
– Automating all this features without manual intervention

This article covers how we can achieve all above points for any Sencha application using
Jasmin,PhantomJS & JSCoverage.

Pre-requisites

Working knowledge of ExtJS

System Requirements, Tools & Technologies

  • Sample ExtJS 4 application (Download)
  • Jasmine         – behavior driven development framework for java script testing,
  • PhanotmJS    – Headless webkit browser,
  • JSCover         – For getting the code coverage report

Details

Integrating ExtJS with Jasmine

To integrate the Jasmine with ExtJS follow below instructions

Step 1 : Download the latest Jasmine library from the link https://github.com/downloads/pivotal/jasmine/jasmine-standalone-1.3.1.zip

Step 2 : In this article we will consider the ExtJS sample Registration application, which can be downloaded from link .

Step 3 : Following is the sample directory structure for the any standard Sencha ExtJS application.

Image

Step 4 : Create following directories under the application directory

<application directory>/app-test
<application directory>/app-test/specs
<application directory>/app-test/lib

Step 5 : Extract the downloaded jasmine-standalone-1.3.1.zip file into temp directory and you will see the following directory structure.

Image

Step 6 : Copy the jasmine-1.3.1 directory from the extracted jasmine directory (See above image) to <application directory>/app-test/lib directory.

Step 7 : Create following empty files

<application directory>/app-test.js

<application directory>/run-tests.html

Step 8 : Observe the below directory structure after creating all required files and directories which is required in order to setup the Jasmine test environment.

Image

To run the tests and see the results we need to change following files:

Step 9 : Change the run-test.html file as shown in below image

Note : Make necessary changes to the file paths as per the your directory structure and application specific files. Also the sequence of file is important.

<html>
<head>
<meta charset="UTF-8">
<title>Jasmine extjsExample</title>
<!-- Jasmine css file-->
<link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css">
<!-- <x-bootstrap> -->
<script src="ext/ext-all.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Jasmine js files -->
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js"></script>
<link rel="stylesheet" href="resources/theme/app.css">
<link rel="stylesheet" href="resources/css/example.css">
<!-- application source files -->
<script src="app-test.js"></script>
<!-- / application source files -->
</head>
<body></body>
</html>

Step 10: Create test app file by copying following content and save it as app-test.js

Ext.application({
controllers: ["Main"],

views: ["Main"],
autoCreateViewport: false,
name: 'extjsExample',
launch: function() {

/*Ext.create('Ext.container.Viewport', {
items: {
xtype: 'mainview'
}
});*/
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();

}
});
  • Now we are ready with our test environment for Jasmine,

Step 11: Run the run-test.html file (http://localhost/<application dir name>/run-test.html) you will see below image, as we did not wrote any test files it shows zero result.

Image

Now write some basic test scripts for sample application and  test whether controller, model and view loaded successfully.

Step 12: Create an Jasmine unit test JS file with below code, copy the below code and paste in empty text file and save it with name application.js

describe("Basic Assumptions", function() {

    it("has ExtJS4 loaded", function() {
        expect(Ext).toBeDefined();
        expect(Ext.getVersion()).toBeTruthy();
        expect(Ext.getVersion().major).toEqual(4);
    });

    it("has loaded extjsExample code",function(){
        expect(extjsExample).toBeDefined();
    });
});

Step 13: Create another Jasmine script  by copying the below code and past in text file and save as Main.js,

describe("Main", function() {
 var store = null, ctlr = null; myApp = null;
beforeEach(function(){
 myApp = extjsExample;
 console.log(myApp);
 if (!ctlr) {
 ctlr = myApp.getApplication().getMainController();
 }
if (!store) {
 store = ctlr.getStore('Server');
 store.load();
 }
 expect(store).toBeTruthy();
 waitsFor(
 function(){ return !store.isLoading(); },
 "load never completed", 4000
 );
 });
 // Main controller
 it("CONTROLLER : Main controller loaded successfully ",function(){
 expect(ctlr).toBeDefined();
 });
 // Store
 it("STORE : Store Server has loaded successfully with values ",function(){
 expect(store.getCount()).toBeGreaterThan(1);
 });
 // Model
 it("MODEL : Model Server has loaded successfully with field = name ",function(){
 expect(ctlr.getModel('Server').getFields()[0].name).toEqual('name');
 });
 // View - Test for super class
 it("View : Test to verify the view super class is container ",function(){
 expect(myApp.getApplication().getView('Main').superclass.xtype).toEqual('container');
 });
 });

Step 14: Now copy Main.js and application.js test files to <application directory>/app-test/specs directory.

Step 15: Create Main.js and application.js test file entries in run-tests.html file, as show below

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Jasmine extjsExample</title>
<!-- Jasmine css file-->
 <link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css">
<!-- <x-bootstrap> -->
<script src="ext/ext-all.js"></script>
 <script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Jasmine js files -->
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js"></script>
 <script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js"></script>
<link rel="stylesheet" href="resources/theme/app.css">
 <link rel="stylesheet" href="resources/css/example.css">
<!-- application source files -->
<script src="app-test.js"></script>
<!-- / application source files -->
<!-- Specs files -->
<script type="text/javascript" src="app-test/specs/application.js"></script>
<script type="text/javascript" src="app-test/specs/Main.js"></script>
</head>
 <body></body>
 </html>

Step 16: Now run the run-test.html file in browser (http://localhost/<application dir name>/run-test.html) , we can see the below results.

Image

Executing the Jasmine scripts in headless mode

Executing all the scripts manually consumes lot of time and an resource, so in order to avoid the effort, we can automate our Jasmine scripts with the help of PhantomJS to run without manual intervention and browser i.e. head less mode.

PhantomJS setup

Step 17: To setup the PhantomJS on linux system follow the below steps:

         Step 17.1 Download the PhantomJS library from the link                http://phantomjs.googlecode.com/files/phantomjs-1.8.2-linux-x86_64.tar.bz2

Step 17.2: Extract the file tar -xvjf phantomjs-1.8.2-linux-x86_64.tar.bz2

Step 17.3: Set the path for PhantomJS.

          Linux system :

               Open the .basrc file and setup the path as shown below

               export PATH=/<location to phantomjs>/bin:$PATH

                          To verify whether path set correctly,  check by typing the phantomjs command by opening new terminal. It will open Phantom prompt.

 Step 17.4: Copy the run-jasmine.js file from the <PhantomJS path>/examples/ directory to the <application directory>/app-test/lib directory.

Step 17.5: Execute the following command to run all your test scripts in headless mode

phantomjs /var/www/html/extjsExample/app-test/lib/run-jasmine.js           http://localhost:9095/extjsExample/run-test.html

  • You will see below result for the executed scripts file on the console

Image

  • We saw that we are able to run all our jasmine scripts in headless mode.

JSCover for the ExtJS application

Code coverage is an important quality metric to assure the product quality and completeness. To get the application code coverage report we can follow any of the following way or all :

  • Manual testing from browser by accessing the application
  • Executing all test scripts from browser manually
  • Executing the the scripts in headless mode

First two ways are straight forward when JSCover setup is in place, as part of this article we will cover getting the code coverage report for our sample application as part of executing the Jasmine scripts in headless mode, so that we can avoid manual intervention and our quality process will be fully automate.

JSCover setup

Step 18: Get the coverage report for the scripts executed in earlier steops

Step 18.1: Step To setup the JSCover download the file from link http://sourceforge.net/projects/jscover/files/JSCover-0.2.6.zip/download

Step 18.2: Extract the directory in temp location and copy <JSCover directory>/target/JSCover-all.jar to <application directory>/app-test/

Step 18.3: Copy the content of file shown in below link and save as run-jscover-jasmine.js :

https://github.com/tntim96/JSCover/blob/master/src/test/javascript/lib/PhantomJS/run-jscover-jasmine.js

Step 18.4: Place the run-jscover-jasmine.js file at following location

<application directory >/app-test/lib

  • Create the following directories to store the reports

<application directory>/report

<application directory>/report/phantom

 Step 18.5: Run the following command in the terminal, which will start the JSCover server

java -jar <application directory path >/app-test/lib/JSCover-all.jar -ws –branch –document-root=<application directory path > –report-dir=<application directory>/report

Note : application directory path can be relative or absolute based upon from where you are executing the command in terminal.

Step 18.6: Now our JSCover server is running, to get the coverage report for the our application code as part of Jasmine scripts execution, run the following command in terminal

phantomjs <application directory path>/app-test/lib/run-jscover-jasmine.js http://localhost:8080/run-test.html

Step 18.7: You will get the code coverage report generated as part of the Jasmine test scripts execution for our sample application is at following location

<application directory path >/report/phantom

Step 18.8: To see the coverage report, access the html file from server as below and observe the % of code coverage

Image

 

Conclusion

In this article we saw how we can automate our quality process with the help of open source tools. We saw how to write the unit test scrips for the ExtJS application using Jasmine and executing all the scripts in headless mode without manual intervention with the help of PhantomJS. Also we saw how we can get the code coverage quality metric by JSCover.

 

Reference

http://tntim96.github.com/JSCover/

http://phantomjs.org/

http://pivotal.github.com/jasmine/

http://docs.sencha.com/ext-js/4-2/#!/guide/testing

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , , , , , ,
Posted in Sencha ExtJS, Sencha Touch
10 comments on “Unit and Regression Test Automation of Sencha applications
  1. sridharepic says:

    Hi I am new to EXT JS automation,

    I have to automate my application which is written in EXT JS. In this tutorial on linking jasmine zip file we get file not found error and also not able to download the sample registration code from your git

    Please help on this

    Email : sridharepic@gmail.com

  2. Sri says:

    Hi ,

    I have tried downloading Jasmine zip but the link directs to page not found area and also not able to download the sample registration application code from git

  3. Ritwik Vaishnavi says:

    Hi Team,

    Thanks a lot for this. Could you please share a similar example for ext 6 and jasmine integration. This is working for me but for ext-6 I am facing issues.

    Regards,
    Ritwik.

  4. Ritwik Vaishnavi says:

    Hi, This is running fine for me. Could you please share a similar steps on how to integrate the jasmine framework with ext 6.0 application. I carried out the same steps for my ext 6 application but then I am getting issues in it.

  5. Venkatesh Teja says:

    Hi…

    I am facing problem at steps 18.6 and 18.7

    At 18.6 :
    I ran this command “phantomjs /app-test/lib/run-jscover-jasmine.js http://localhost:8080/run-test.html” with my application path, Like

    “/var/www/html/RegistrationSample/app-test/lib/run-jscover-jasmine.js http://venkateshteja.jasmin/run-tests.html

    Here I am getting error : TypeError: ‘null’ is not an object (evaluating ‘document.body.querySelector(‘.alert > .passingAlert.bar’).innerText’)

    This error is from run-jscover-jasmine.js file.

    If i comment that line, Command executing fine but no report is generating in report directory at step 18.7.

    Can you please help me……

    • Ranjit says:

      Hello Venkatesh,

      This error you will get if jscover server is not started properly.

      Start the JSCover server (Step : 18.5) then verify that it is running by accessing it from browser at http://localhost:8080.

      Hope this will solve your problem, if you are facing still issue then please do post your comment, will help you.

      Thanks

    • Venkatesh Teja says:

      Hi I got the Solution….

      The problem is below command at step : 18.5

      //Wrong
      java -jar /app-test/lib/JSCover-all.jar -ws –branch –document-root= –report-dir=/report

      //It is correct
      java -jar /app-test/lib/JSCover-all.jar -ws –branch –document-root= –report-dir=/report

      The difference is ” – ”

      Thanks,
      Venkatesh Teja.

      • Venkatesh Teja says:

        The problem is at coping and pasting.

        So, After pasting at your terminal use ” – – ” instead of above “-”

        Thanks,
        Venkatesh Teja.

  6. vinodkannekanti says:

    Nice stuff…Thank for the article…

  7. Thank you for the article…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: