Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unit and Functional testing with Siesta

Mats Bryntse
September 20, 2013
230

Unit and Functional testing with Siesta

ModUX Conference 2013 in Amsterdam

Mats Bryntse

September 20, 2013
Tweet

Transcript

  1. Unit and functional testing with Siesta Mats Bryntse, developer at

    Bryntum @bryntum Friday, September 20, 13
  2. Mats Bryntse • Ext JS developer since 2007 • Started

    Bryntum 2009 • Components & tools for the Sencha ecosystem • www.bryntum.com Friday, September 20, 13
  3. Agenda •Benefits of Siesta in your project •Writing your first

    unit Siesta test •Functional testing •New Siesta features & improvements Friday, September 20, 13
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. Query Power - CSS Query “.x-btn” - Component Query “>>button”

    - Composite Query “gridpanel => .x-grid-cell” Friday, September 20, 13
  13. 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