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


http://www.bryntum.com

http://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


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


http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css

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




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 tests1. Your namespace is created, global variable leaks.


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)6. It can be sub-classed


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)6. It can be sub-classed7. It does not leak any additional components or DOM


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)6. It can be sub-classed7. It does not leak any additional components or DOM8. It doesn't override any private Ext JS methods


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)6. It can be sub-classed7. It does not leak any additional components or DOM8. It doesn't override any private Ext JS methods9. It can be created, destroyed


10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides4. Basic JsHint rules5. It does not use global style rules ('.x-panel' etc)6. It can be sub-classed7. It does not leak any additional components or DOM8. It doesn't override any private Ext JS methods9. It can be created, destroyed10. 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

Technology

test file test

test model layer

user model

dont test ext js

global variable leaks

testing views

global ext js overrides

api sanity tests