Unit and Functional testing with Siesta

ModUX Conference 2013 in Amsterdam

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. Do you test your JS? Friday, September 20, 13
5. 3 benefits of Siesta Friday, September 20, 13
6. Unit + Functional tests Friday, September 20, 13
7. Friday, September 20, 13
8. Friday, September 20, 13
9. A look at the Siesta UI Friday, September 20, 13
10. Friday, September 20, 13
11. What should I test? Friday, September 20, 13
12. 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
13. 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
14. 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
15. 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
16. 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
17. Friday, September 20, 13
18. Using PhantomJS (or Selenium) Friday, September 20, 13
19. 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
20. http://github.com/matsbryntse Friday, September 20, 13
21. 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
22. 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
23. Query Power - CSS Query “.x-btn” - Component Query “>>button” - Composite Query “gridpanel => .x-grid-cell” Friday, September 20, 13
24. Targeting demo Friday, September 20, 13
25. 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
26. Siesta.next •UI Localization, Japanese translation •Guides + blog posts •Test recorder Friday, September 20, 13
27. Recorder demo Friday, September 20, 13
28. Questions? Friday, September 20, 13