Scroll Top

Testing Sencha Applications using Sencha Test

senchatestimage

Problem Statement

Automating Ext JS Application testing is often tricky because of the dynamically generated HTML elements. For example, a combo box in Ext JS is not simply an <select> element, but a text input with a detached drop down list. 

When you think about a tool, which can handle dynamically generated HTML Elements, Unit Testing and End-to-End Testing on multiple browsers, simultaneously; Sencha Test looks like an obvious choice. Sencha Test is extensively used for testing Ext JS Single Page Applications and it leverages powerful Jasmine testing framework, which is used to test Javascript and has rich APIs to handle HTML elements.

Overview

Sencha Test is an automation tool that is used for testing Ext JS applications. This tool consists of two applications :

  1. Sencha Studio (GUI), which uses a Workspace to organise tests and has a default test suite as ‘jasmine’ for writing tests.
  2. Sencha Test command or STC (for Command line)

As of now, Sencha Test supports

  1. Running scripts on remote browsers using browser farms
  2. Event Recorder and
  3. Code Coverage

This article explains the Sencha Test Studio setup and a quick test for verifying the login feature in SenchaTutorials application.

In this article, we will talk about:

  1. How to create a workspace and configure tests in Sencha Studio?
  2. How to create a Jasmine test suite for writing tests?
  3. Test script for login screen for Sencha application
  4. How to run the scripts and see the results?

Pre-requisites:

  1. Javascript knowledge to write tests
  2. Jasmine knowledge is required
  3. Basic knowledge of Sencha Ext JS

Getting Ready

  1. Sencha Test can be downloaded from Sencha website https://www.sencha.com/products/test/#overview
  2. You need to sign up with your Email ID to activate your licence.
  3. Start the Sencha Test after it is activated.

Creating a Workspace and configuring tests in Sencha Studio

  1. Click on File New Workspace… menu

2. Give the name and destination path for the workspace and click on the OK button, as shown below :

sencha1

3. Sencha Studio displays its content in its project navigation tree as shown in the below diagram.

4. Configure the test project by selecting Tests node as shown below :

sencha3

5. To launch the application from Sencha Studio, In Project Settings, specify (URL). We will disable global leak detection by setting * as Allowed Globals and default test framework as Jasmine. Refer to Sencha Test Docs for more information.

sencha4
6. Nodes under the Tests node in the tree are called the Scenarios. By default, a new test project is given a “Unit Tests” scenario, where we have changed it to Authentication as we would be using it to test the SenchaTutorials authentication

sencha5
The same is reflected in the Studio:

sencha6

Creating a Jasmine test suite for writing tests

1. Right click on the scenario under Tests node and create a new Jasmine Test Suite, as shown below :

sencha7

2. Specify a name for your test suite, say, LoginTest and click on OK button.

sencha8

3. Observe that a new node is added under the scenarios as shown below:

sencha9

Script for validating login screen

  1. Below is the Jasmine code to test the login feature for SenchaTutorials application:

 

Running tests and seeing the results

1. To run our tests, click on the scenario (Authentication) in the tree node.

2. An interactive Test Runner is launched, which consists of all the local browsers and test suites.

3. Select a test suite, the list of browser and click on Run button.

 sencha10

4. The below image shows how the results of the tests are displayed in the test runner.

sencha11

On successful execution of the test script, a user will be logged into SenchaTutorials and shall see the tutorials, as shown below:

sencha12

5. The test runner allows to select specific tests, execute them in parallel against multiple browsers and see the results in real-time.

6. To verify the code coverage, select a test suite, the browser and click on Coverage.

sencha13

7. Sencha Test uses Istanbul for code coverage to determine how much of our code has been tested as part of a test script. HTML reports showing a detailed coverage are generated as shown below:

sencha14

Summary

In this article, we discussed setting up Sencha Test tool. We also looked at writing tests in Jasmine suite, generating reports post test execution, code coverage and view results in Sencha Studio. Hope this will get you started with Sencha Test and do reach out to us for any question/suggestion.

WalkingTree’s Professional Services team have in-depth experience in developing and managing enterprise applications built using frameworks like Ext JS and Angular. We also helped a number of our customer in migrating their applications from an older version of Sencha to the latest version. We would love to connect with you and help you make effective use of the awesome framework!

References

Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.