Download - Unit and functional testing with Siesta
![Page 1: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/1.jpg)
Unit and functional testing with Siesta
Mats Bryntse, developer at Bryntum@bryntum
Wednesday, September 25, 13
![Page 2: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/2.jpg)
Mats Bryntse
• Ext JS developer since 2007
• Started Bryntum 2009
• Components & tools for the Sencha ecosystem
• www.bryntum.com
Wednesday, September 25, 13
![Page 3: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/3.jpg)
Agenda
• Benefits of Siesta in your project
• Writing your first unit Siesta test
• Functional testing
• New Siesta features & improvements
Wednesday, September 25, 13
![Page 4: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/4.jpg)
Do you test your JS?
Wednesday, September 25, 13
![Page 5: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/5.jpg)
3 benefits of Siesta
Wednesday, September 25, 13
![Page 6: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/6.jpg)
Unit + Functional tests
Wednesday, September 25, 13
![Page 7: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/7.jpg)
Wednesday, September 25, 13
![Page 8: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/8.jpg)
Wednesday, September 25, 13
![Page 9: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/9.jpg)
A look at the Siesta UI
Wednesday, September 25, 13
![Page 10: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/10.jpg)
Wednesday, September 25, 13
![Page 11: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/11.jpg)
What should I test?
Wednesday, September 25, 13
![Page 12: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/12.jpg)
Test Model layer first
Wednesday, September 25, 13
![Page 13: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/13.jpg)
Test Model layer first• Easy to test, high ROI.
Wednesday, September 25, 13
![Page 14: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/14.jpg)
Test Model layer first• Easy to test, high ROI.
• Your.data.Model
Wednesday, September 25, 13
![Page 15: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/15.jpg)
Test Model layer first• Easy to test, high ROI.
• Your.data.Model
• Your.data.Store
Wednesday, September 25, 13
![Page 16: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/16.jpg)
Test Model layer first• Easy to test, high ROI.
• Your.data.Model
• Your.data.Store
• Your.util.Class
Wednesday, September 25, 13
![Page 17: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/17.jpg)
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
Wednesday, September 25, 13
![Page 18: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/18.jpg)
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
Wednesday, September 25, 13
![Page 19: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/19.jpg)
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
Wednesday, September 25, 13
![Page 20: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/20.jpg)
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
Wednesday, September 25, 13
![Page 21: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/21.jpg)
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
Wednesday, September 25, 13
![Page 22: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/22.jpg)
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
Wednesday, September 25, 13
![Page 23: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/23.jpg)
Wednesday, September 25, 13
![Page 24: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/24.jpg)
Using PhantomJS (or Selenium)
Wednesday, September 25, 13
![Page 25: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/25.jpg)
Testing views
Wednesday, September 25, 13
![Page 26: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/26.jpg)
Testing views
• Normally, your app consists of many view classes
Wednesday, September 25, 13
![Page 27: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/27.jpg)
Testing views
• Normally, your app consists of many view classes
• Test your components in isolation:
Wednesday, September 25, 13
![Page 28: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/28.jpg)
Testing views
• Normally, your app consists of many view classes
• Test your components in isolation:
• My.app.UserList
Wednesday, September 25, 13
![Page 29: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/29.jpg)
Testing views
• Normally, your app consists of many view classes
• Test your components in isolation:
• My.app.UserList
• My.app.OrderForm
Wednesday, September 25, 13
![Page 30: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/30.jpg)
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
Wednesday, September 25, 13
![Page 31: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/31.jpg)
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
Wednesday, September 25, 13
![Page 32: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/32.jpg)
http://github.com/matsbryntse
Wednesday, September 25, 13
![Page 33: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/33.jpg)
10 Sanity tests
Wednesday, September 25, 13
![Page 34: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/34.jpg)
10 Sanity tests1. Your namespace is created, global variable leaks.
Wednesday, September 25, 13
![Page 35: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/35.jpg)
10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand
Wednesday, September 25, 13
![Page 36: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/36.jpg)
10 Sanity tests1. Your namespace is created, global variable leaks.2. Your component can be loaded on demand3. No global Ext JS overrides
Wednesday, September 25, 13
![Page 37: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/37.jpg)
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
Wednesday, September 25, 13
![Page 38: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/38.jpg)
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)
Wednesday, September 25, 13
![Page 39: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/39.jpg)
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
Wednesday, September 25, 13
![Page 40: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/40.jpg)
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
Wednesday, September 25, 13
![Page 41: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/41.jpg)
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
Wednesday, September 25, 13
![Page 42: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/42.jpg)
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
Wednesday, September 25, 13
![Page 43: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/43.jpg)
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
Wednesday, September 25, 13
![Page 44: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/44.jpg)
Functional testing
Wednesday, September 25, 13
![Page 45: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/45.jpg)
Functional testing
• Interacting with the UI as a real user
Wednesday, September 25, 13
![Page 46: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/46.jpg)
Functional testing
• Interacting with the UI as a real user
• Hard to solve w/ tools focusing on raw DOM/HTML.
Wednesday, September 25, 13
![Page 47: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/47.jpg)
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:
Wednesday, September 25, 13
![Page 48: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/48.jpg)
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
Wednesday, September 25, 13
![Page 49: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/49.jpg)
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
Wednesday, September 25, 13
![Page 50: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/50.jpg)
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
Wednesday, September 25, 13
![Page 51: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/51.jpg)
Query Power
Wednesday, September 25, 13
![Page 52: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/52.jpg)
Query Power
- CSS Query “.x-btn”
Wednesday, September 25, 13
![Page 53: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/53.jpg)
Query Power
- CSS Query “.x-btn”
- Component Query “>>button”
Wednesday, September 25, 13
![Page 54: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/54.jpg)
Query Power
- CSS Query “.x-btn”
- Component Query “>>button”
- Composite Query “gridpanel => .x-grid-cell”
Wednesday, September 25, 13
![Page 55: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/55.jpg)
Targeting demo
Wednesday, September 25, 13
![Page 56: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/56.jpg)
Siesta news
Wednesday, September 25, 13
![Page 57: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/57.jpg)
Siesta news
• 2.0: New User Interface
Wednesday, September 25, 13
![Page 58: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/58.jpg)
Siesta news
• 2.0: New User Interface
• Auto-scroll element into view
Wednesday, September 25, 13
![Page 59: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/59.jpg)
Siesta news
• 2.0: New User Interface
• Auto-scroll element into view
• Assertion detecting global Ext JS overrides
Wednesday, September 25, 13
![Page 60: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/60.jpg)
Siesta news
• 2.0: New User Interface
• Auto-scroll element into view
• Assertion detecting global Ext JS overrides
• Assertion to detect unnecessary layouts
Wednesday, September 25, 13
![Page 61: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/61.jpg)
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
Wednesday, September 25, 13
![Page 62: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/62.jpg)
Siesta.next
Wednesday, September 25, 13
![Page 63: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/63.jpg)
Siesta.next
• UI Localization, Japanese translation
Wednesday, September 25, 13
![Page 64: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/64.jpg)
Siesta.next
• UI Localization, Japanese translation
• Guides + blog posts
Wednesday, September 25, 13
![Page 65: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/65.jpg)
Siesta.next
• UI Localization, Japanese translation
• Guides + blog posts
• Test recorder
Wednesday, September 25, 13
![Page 66: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/66.jpg)
Siesta.next
• UI Localization, Japanese translation
• Guides + blog posts
• Test recorder
Wednesday, September 25, 13
![Page 67: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/67.jpg)
Recorder demo
Wednesday, September 25, 13
![Page 68: Unit and functional testing with Siesta](https://reader033.vdocument.in/reader033/viewer/2022052823/55548da8b4c905186d8b4578/html5/thumbnails/68.jpg)
Questions?
Wednesday, September 25, 13