Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda •Benefits of Siesta in your project •Writing your first unit Siesta test •Functional testing •New Siesta features & improvements Friday, September 20, 13

Slide 4

Slide 4 text

Do you test your JS? Friday, September 20, 13

Slide 5

Slide 5 text

3 benefits of Siesta Friday, September 20, 13

Slide 6

Slide 6 text

Unit + Functional tests Friday, September 20, 13

Slide 7

Slide 7 text

Friday, September 20, 13

Slide 8

Slide 8 text

Friday, September 20, 13

Slide 9

Slide 9 text

A look at the Siesta UI Friday, September 20, 13

Slide 10

Slide 10 text

Friday, September 20, 13

Slide 11

Slide 11 text

What should I test? Friday, September 20, 13

Slide 12

Slide 12 text

Test Model layer first •Easy to test, high ROI. •Your.data.Model •Your.data.Store •Your.util.Class •Focus on one class per test file •Test your code, not framework code Friday, September 20, 13

Slide 13

Slide 13 text

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 Friday, September 20, 13

Slide 14

Slide 14 text

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 Friday, September 20, 13

Slide 15

Slide 15 text

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 Friday, September 20, 13

Slide 16

Slide 16 text

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 Friday, September 20, 13

Slide 17

Slide 17 text

Friday, September 20, 13

Slide 18

Slide 18 text

Using PhantomJS (or Selenium) Friday, September 20, 13

Slide 19

Slide 19 text

Testing views • Normally, your app consists of many view classes • Test your components in isolation: • My.app.UserList • My.app.OrderForm • Test your public config properties + API • Sanity tests give you peace of mind Friday, September 20, 13

Slide 20

Slide 20 text

http://github.com/matsbryntse Friday, September 20, 13

Slide 21

Slide 21 text

10 Sanity tests 1. Your namespace is created, global variable leaks. 2. Your component can be loaded on demand 3. No global Ext JS overrides 4. Basic JsHint rules 5. It does not use global style rules ('.x-panel' etc) 6. It can be sub-classed 7. It does not leak any additional components or DOM 8. It doesn't override any private Ext JS methods 9. It can be created, destroyed 10. It passes a basic monkey test Friday, September 20, 13

Slide 22

Slide 22 text

Functional testing • Interacting with the UI as a real user • Hard to solve w/ tools focusing on raw DOM/HTML. • Siesta allows you to simulate user interactions: • type • click • drag Friday, September 20, 13

Slide 23

Slide 23 text

Query Power - CSS Query “.x-btn” - Component Query “>>button” - Composite Query “gridpanel => .x-grid-cell” Friday, September 20, 13

Slide 24

Slide 24 text

Targeting demo Friday, September 20, 13

Slide 25

Slide 25 text

Siesta news •2.0: New User Interface •Auto-scroll element into view •Assertion detecting global Ext JS overrides •Assertion to detect unnecessary layouts •Code coverage Friday, September 20, 13

Slide 26

Slide 26 text

Siesta.next •UI Localization, Japanese translation •Guides + blog posts •Test recorder Friday, September 20, 13

Slide 27

Slide 27 text

Recorder demo Friday, September 20, 13

Slide 28

Slide 28 text

Questions? Friday, September 20, 13