Unit and functional testing with Siesta

Unit and functional
testing with Siesta
Mats Bryntse, developer at Bryntum
@bryntum
Wednesday, September 25, 13

Mats Bryntse
• Ext JS developer since 2007
• Started Bryntum 2009
• Components & tools for the Sencha ecosystem
• www.bryntum.com

Agenda
•Benefits of Siesta in your project
•Writing your first unit Siesta test
•Functional testing
•New Siesta features & improvements

Do you test your JS?

3 benefits of Siesta

Unit + Functional tests

A look at the Siesta
UI

What should I test?

Test Model layer first

•Easy to test, high ROI.

•Your.data.Model

•Your.data.Model
•Your.data.Store

•Your.data.Model
•Your.data.Store
•Your.util.Class

•Your.data.Model
•Your.data.Store
•Your.util.Class
•Focus on one class per test file

•Your.data.Model
•Your.data.Store
•Your.util.Class
•Focus on one class per test file
•Test your code, not framework code

Ext.define(“My.model.User”, {
extend : ‘Ext.data.Model’,
fields : [‘FirstName’, ‘LastName’, ‘Salary’],
getAnnualSalary : function () {
return this.get(‘Salary’) * 12;
},
isValid : function() {
return this.get(‘FirstName’) && this.get(‘LastName’);
}
});
My.model.User

describe(“Testing my User model”, function(t) {
t.it(‘Should get correct annual salary’, function(t) {
var user = new My.model.User({ Salary : 5000 });
t.expect(user.getAnnualSalary()).toBe(60000);
});
t.it(‘Should treat incomplete name as invalid’, function(t) {
var user = new My.model.User({ FirstName : ‘Bob’ });
t.expect(user.isValid()).toBeFalsy();
});
})
User.t.js

StartTest(function(t) {
t.it(‘Should be able to get name’, function(t) {
var user = new My.model.User({
FirstName : ‘Bob’
});
t.expect(user.get(‘FirstName’)).toBe(‘Bob’);
});
})
Don’t test Ext JS

var Harness = Siesta.Harness.Browser.ExtJS;
Harness.configure({
preload : [
"http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css",
"http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js",
"my-app-all-debug.js"
]
});
Harness.start({
group : 'Model Layer',
items : [
'User.t.js'
]
});
Harness.js

Using PhantomJS (or Selenium)

Testing views

Testing views
• Normally, your app consists of many view classes

Testing views
• Test your components in isolation:

Testing views
• My.app.UserList

Testing views
• My.app.UserList
• My.app.OrderForm

Testing views
• My.app.UserList
• Test your public config properties + API

Testing views
• My.app.UserList
• Test your public config properties + API
• Sanity tests give you peace of mind

http://github.com/matsbryntse

10 Sanity tests

10 Sanity tests
1. Your namespace is created, global variable leaks.

10 Sanity tests
2. Your component can be loaded on demand

10 Sanity tests
3. No global Ext JS overrides

10 Sanity tests
4. Basic JsHint rules

10 Sanity tests
5. It does not use global style rules ('.x-panel' etc)

10 Sanity tests
6. It can be sub-classed

10 Sanity tests
7. It does not leak any additional components or DOM

10 Sanity tests
8. It doesn't override any private Ext JS methods

10 Sanity tests
9. It can be created, destroyed

10 Sanity tests
9. It can be created, destroyed
10. It passes a basic monkey test

Functional testing

Functional testing
• Interacting with the UI as a real user

Functional testing
• Hard to solve w/ tools focusing on raw DOM/HTML.

Functional testing
• Siesta allows you to simulate user interactions:

Functional testing
• type

Functional testing
• type
• click

Functional testing
• type
• click
• drag

Query Power

Query Power
- CSS Query “.x-btn”

Query Power
- Component Query “>>button”

Query Power
- Component Query “>>button”
- Composite Query “gridpanel => .x-grid-cell”

Targeting demo

Siesta news

Siesta news
•2.0: New User Interface

Siesta news
•Auto-scroll element into view

Siesta news
•Assertion detecting global Ext JS overrides

Siesta news
•Assertion to detect unnecessary layouts

Siesta news
•Assertion to detect unnecessary layouts
•Code coverage

Siesta.next

Siesta.next
•UI Localization, Japanese translation

Siesta.next
•Guides + blog posts

Siesta.next
•Guides + blog posts
•Test recorder

Recorder demo

Questions?

Unit and functional testing with Siesta

More Related Content

What's hot (20)

Similar to Unit and functional testing with Siesta (20)

More from Grgur Grisogono (18)

Recently uploaded (20)

Unit and functional testing with Siesta