Testing Ext JS and Sencha Touch

Testing Ext JS &
Sencha Touch

2012 Mats Bryntse
@bryntum

Contents

• Why test your JavaScript?

• Testing Methodologies

• Introducing Siesta

• Writing testable JS

• Automating tests

About me
var me = {
name : ”Mats Bryntse”,
age : 35+,
lives : ”Helsingborg, Sweden”,
does : ”Runs Bryntum”,
site : ”www.bryntum.com”,
twitter : ”@bryntum”
};

What we do

Ext JS/ST Components

Siesta (JS Test Tool)

First, a quick raise of
hands:

How many of you...

How many of you...

• have a frontend test suite?

• have frontend test suite as part of your CI?

• run your test suite in all major browsers?

• have zero or fewer frontend tests for your app?

A typical web app...

Interwebs

http://www.app.com

The backend

• Single controlled platform

• Simple to test and refactor

• Good IDEs and tools
PHP
C#
Java

The frontend
• Multiple platforms & versions
(Mac, Windows XP/Vista/7/8, Linux...)

• Multiple browser versions

• Hard to refactor

• JavaScript support in IDEs is
still !== awesome

Conclusion

Too easy to #FAIL as a frontend developer

Testing helps you keep fails to a minimum.

But...

”... my code is bug free”

”...testing takes time away from adding new
features (+ new bugs)”

”...it’s QA’s job to test”

”... it’s boring and I’ll quit my job”

A good investment

• Writing tests === investment in your code

• Takes time

• Will pay you back, though not instantly

Scenario:
A nasty bug was found

3 options

A test suite...
=> confidence in your code

=> serves as extra documentation

=> easier refactoring

=> bugs happen once, easier to find

=======> quality of sleep

Code handover

• Test cases are really useful when handing over
responsibility for a JS module

• Developer Bob quits his job. New guy gets
responsibility of his JS code.

• How will new guy know what parts of the
codebase is safe to change & refactor?

New guy studies codebase
application.js

/**
* When I wrote this, only God and I understood what I was doing
* Now, God only knows
**/

/* I am not sure if we need this, but too scared to delete. */

// drunk, fix later

// This is my last day...

Code handover

New guy, scared

Code handover

• Without test suite, will new guy feel good
about making major changes?

• Only minor cosmetic changes on the surface.

• System accumulates cruft over time.

• Sounds familiar?

Unit testing

Integration testing

Functional testing

Unit testing

• Testing the API of a single isolated ’unit’

• Typically pure JS, non UI / DOM
• verify set/get method of a Model
• verify date manipulation logic

• Many tools available

Unit testing

• Siesta

• Jasmine

• QUnit (jQuery)

• Google js-test (V8)

Integration testing

• Testing integration between units.

• E.g. verify cell editing plugin works in
GridPanel

Functional Web testing

• UI testing of a component or an application
as a whole.

• Send commands to the web page and
evaluate result.

• ’click button’, ’type into login field’, ...

Functional Web testing

• Siesta

• Selenium

• JsTestDriver

Interacting with the DOM

Approaches to faking user input

• Synthetic events (JavaScript)

• Native events (via Java Applet)

Synthetic events
+ Supported in all major browsers
+ Compatible with mobile
+ Don’t rely on native event queue
Tests can be run in parallell.

- Browsers don’t ”trust” synthetic events
- Enter key on a focused link
- Tab between input fields, etc...
- X-browser differences
DOM Events, Key events, key codes (http://unixpapa.com)

Native events

+ Java applets are supported in desktop
browsers
+ As close to a ’real’ user as possible

- Won’t work on iOS, Android.
- No parallell tests since native event queue
is used.

Testing Ext JS and Sencha Touch

What is Siesta?

• Unit testing and DOM testing tool

• Optimized for Ext JS & Sencha Touch
- also supports jQuery, NodeJS, or any JS

• Simple syntax, Extensible

• Automate using PhantomJS & Selenium.

Siesta Browser Harness

• A UI for Siesta, view DOM, inspect assertions

• Define a tree of tests, in logical groups

• Global settings for the test suite
autoCheckGlobals, preload, testClass

A Siesta Test

• is pure JavaScript, no magic.

StartTest(function(t) {

$('body').html('JQuery was here');

t.contentLike(document.body,
'JQuery was here',
'Found correct text in DOM');
});

A Siesta Test

• is completely isolated in its own iframe
(no teardown, cleanup required)

A Siesta Test

• can be extended with your own custom
assertions and helper methods

StartTest(function(myTest) {
var app = myTest.startApplication();

myTest.performLogin(app);
myTest.isLoggedIn(app, ’Logged in ok’);
myTest.is(app.nbrUsers, 1, ’Found 1 user’);
});

Lifecycle of a UI test

Setup create grid, load stores

Wait for store to load, grid rows to render

Simulate click button, type into textbox

Verify isEqual(a, b)

Setup

var userGrid = new My.UserGrid({ … });

userGrid.render(Ext.getBody());

Wait

t.waitForRowsVisible(userGrid, function(){
// Do something
});

t.waitForComponentQuery(“formpanel > textfield”);

t.waitForCompositeQuery(“grid => .x-grid-row”);

Simulate

// A list of actions to simulate
t.chain(
{
desc : 'Should click trigger field',
action : 'click',
target : 'testgrid triggerfield'
},
{
desc : 'Should type into filter field',
action : 'type',
target : 'testgrid triggerfield',
text : 'FOO'
}, ...
);

Verify

t.is(userStore.getCount(), 5, ”5 users found”);

t.willFireNTimes(store, 2, ”write”);

t.hasCls(grid.getEl(), ”myClass”, ”Found CSS”);

t.hasSize(myWindow, 300, 300, ”Window size ok”);

Sencha Touch support

Simulate tap, doubleTap, swipe, longPress, etc...

Siesta.next

• Benchmarking

• Code coverage

• Multi-browser, multi-device testing
• Crowd sourced test case tool “Code Cowboy”

• Your suggestion?

Headless testing

• Headless browsers are great, fast

• Command line, easy to integrate with IDEs

• PhantomJS, GUI-less WebKit browser

Phantom JS
Created by Ariya Hidayat (Sencha Inc.)

Fast headless testing

Site scraping

SVG rendering, PDF/PNG output

Supports CoffeeScript

Headless browsers

+ Run tests on command line
+ Faster
+ Automation
+ Doesn’t require an actual browser

- Not 100% accurate, but close.

Some ground rules

• Keep your JavaScript in JS files

• Never put JavaScript in your HTML
page/tags

• Keep code organized in logical manageable
files. Decide on some max nbr of lines/file.

Testable MVC code

• Fat model, skinny view

• Don’t pollute your views with business logic

• Testing pure JS is a lot easier than testing
DOM-dependent JS

• Promotes reuse of your code

Mixing view and logic

Ext.define('UserForm', {
extend: 'Ext.FormPanel',
width: 400,
height: 400,

// Returns true if User is valid
isValid: function (userModel) {
return userModel.name.length > 4 &&
userModel.password.length > 8;
}
});

Better

Ext.define('UserModel', {
extend: 'Ext.data.Model ',
name : '',
password : '',

isValid : function () {
return this.name.length > 4 &&
this.password.length > 8;
}
});

Refactored view

Ext.define('UserForm', {
extend: 'Ext.FormPanel',
width: 400,
height: 400,

// Returns true if User is valid
isValid: function () {
return this.model.isValid();
}
});

Avoid private code

• Avoid overuse of private functions in
closures

• If your code cannot be accessed it cannot
be tested

Testing Ajax

• Try to avoid involving your database.

• Use either static JS files with mock data
(async, slower)

• Or Mock the entire Ajax call (sync, faster)
Sinon.js, Jasmine-ajax etc.

Automation &
Continuous Integration

Continuous Integration

• Once you have decided on your testing
toolset, integrate it with your CI.

• Automatically run test suite on pre-commit
or post-commit

• Nightly builds, full test suite execution,
reporting via email etc.

CI Tools

• Jenkins

• TeamCity

• Cruise Control

• Test Swarm

JS Code Coverage

• JsCoverage
Seems abandoned

• ScriptCover
Google Chrome Plugin

• JsTestDriver
Add-in module for coverage

• JesCov
Rhino, Jasmine

Resources - Yahoo
http://screen.yahoo.com/

”Without unit tests, you’re
not refactoring. You’re just
changing shit.”

Hamlet D’Arcy

Thanks for listening!

Questions?

2012 Mats Bryntse
@bryntum

Testing Ext JS and Sencha Touch

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Testing Ext JS and Sencha Touch (20)

Recently uploaded (20)

Testing Ext JS and Sencha Touch