SenchaCmd Apps are gaining much popularity among Ext JS development specialist. More Ext JS applications are being written with SenchaCmd libraries, generated with SenchaCmd (ExtJS and Sencha Touch). This combination is indeed proving to be very useful for web application development.
Introduction to SenchaCmd
It is a cross platform command line tool by Sencha Touch. SenchaCmd avails with a feature that automates tasks for full life cycle development of web applications. It works for developing a new project or deploying web apps.
It is a tool that offers features which are robust, rich and time saving which work in tandem with Sencha Ext JS and Ext JS Sencha Touch frameworks.
Capabilities of SenchaCmd
- JS Compiler
- Code Generation Tools
- Web Server
- Package Management System
- Web Application Manager Integration
- Workspace Manager
- Build Scripts
- Cordova/ PhoneGap Integration
- Image Capture
- Tuning Tools
- Flexible Configuration System
- Third Party Software
- Code Generation Hooks
As we understand this set of functions are new for the Ext JS developers and we have been getting queries on testing Ext JS applications with Sencha Cmd. So we thought of preparing a step by step guide to conduct testing of applications generated with Sencha Cmd.
See Also : 5 Best ExtJS Development Practices For Single Page Applications
Step 1: Get Started withSenchaCmd 6 App
Get started by installing the latest SenchaCmd version. Click here to download the latest version. https://www.sencha.com/products/extjs/cmd-download/ . You can also take the getting started guide by following this link: https://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html
Step 2: Generate New App
sencha -sdk /path/to/extjs/framework generate app NewAppNewApp
cd NewApp
sencha app watch
This will generate the files in the New App Folder in an organized fashion. You will see model, store and view folders along with app.js, this will bootstrap the application for further development process. Now, navigate the folder to the local host in your browser and then you will able to view the application in tabs with grid panel.
Step 3: Build Testing Control
This step will finally commence the testing for you. Firstly, we will create a testing folder for the testing operations. Since the app is running now, you need to create the test folder in the root of the ‘NewApp’ Folder. Now, you need to inject the harness for testing. So include your harness HTML pages that contains the Ext JS applications files and a Harness JS file. This file shall contain the details of the testing process.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”localhost/siesta/resources/css/siesta-all.css”> <script type=”text/javascript” src=”localhost/siesta/siesta-all.js”></script> <!—The test harness --> <script type=”text/javascript” src=”index.js”></script> </head> <body> </body> </html> |
Putting the Harness Using Siesta
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
varHarness = Siesta.Harness.Browser.ExtJS; Harness.configure({ Title :’Testing’ }); Harness.start( { Group :’Unit Tests’, pageUrl : ‘../index.html?unittest’, items :[ ‘unite-tests/unite1.t.js’ ] }, { Group ; ‘App Test’, Items : [ ] }, { ); |
Step 4: Conduct Unit Tests
In order to conduct a unit test using Siesta, the testing team needs to ensure that the JS classes are injected into every test of the application. The good part is that instead of using ‘preload’, Ext JS 6 will use ‘pageUrl’ and then set it to root index.html page. Once you run the above mentioned test, the application will start but you don’t need it to start while the unit tests are running. So all you need to do is modify the app.js folder by adding an inline check for ‘unittest’ string the in query string.
Step 5: Write Basic Unite Test
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Ext.define('NewApp.store.Personnel', { extend: 'Ext.data.Store', alias: 'store.personnel', fields: [ 'name', 'email', 'phone' ], data: { items: [ { name: 'Jo Anders', email: "jo.anders@helios.com", phone: "236-333-1111" }, { name: 'YouceIkni', email: "youcef.ikni@helios.com", phone: "666-222-2222" }, { name: 'Hanne', email: "jj.hanne@helios.com", phone: "678-333-3333" }, { name: 'Nathelie', email: "s.nathelie@helios.com", phone: "555-890-1111" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); |
You can use the runnable test suite online if you wish to run these tests yourself and inspect the sources of each test. Click here to see the testing suite: http://bryntum.com/temp/testing-cmd/tests/
Summing Up
It is very easy to test applications built with SenchaCmd and you can start with the unit testing as suggested above. You can also use the vendor instead of the local host when youare building your testing control/ harness. If you face any issues while using these steps, you can always get in touch with our Ext JS development experts and we will get back to you immediately. We hope this read was hopeful in making your Ext JS apps more authentic.
