Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Unit and functional testing with Siesta
1. Unit and functional
testing with Siesta
Mats Bryntse, developer at Bryntum
@bryntum
Wednesday, September 25, 13
2. Mats Bryntse
• Ext JS developer since 2007
• Started Bryntum 2009
• Components & tools for the Sencha ecosystem
• www.bryntum.com
Wednesday, September 25, 13
3. Agenda
•Benefits of Siesta in your project
•Writing your first unit Siesta test
•Functional testing
•New Siesta features & improvements
Wednesday, September 25, 13
4. Do you test your JS?
Wednesday, September 25, 13
13. Test Model layer first
•Easy to test, high ROI.
Wednesday, September 25, 13
14. Test Model layer first
•Easy to test, high ROI.
•Your.data.Model
Wednesday, September 25, 13
15. Test Model layer first
•Easy to test, high ROI.
•Your.data.Model
•Your.data.Store
Wednesday, September 25, 13
16. Test Model layer first
•Easy to test, high ROI.
•Your.data.Model
•Your.data.Store
•Your.util.Class
Wednesday, September 25, 13
17. 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
18. 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
20. 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
21. 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
22. 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
27. Testing views
• Normally, your app consists of many view classes
• Test your components in isolation:
Wednesday, September 25, 13
28. Testing views
• Normally, your app consists of many view classes
• Test your components in isolation:
• My.app.UserList
Wednesday, September 25, 13
29. 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
30. 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
31. 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
34. 10 Sanity tests
1. Your namespace is created, global variable leaks.
Wednesday, September 25, 13
35. 10 Sanity tests
1. Your namespace is created, global variable leaks.
2. Your component can be loaded on demand
Wednesday, September 25, 13
36. 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
Wednesday, September 25, 13
37. 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
Wednesday, September 25, 13
38. 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)
Wednesday, September 25, 13
39. 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
Wednesday, September 25, 13
40. 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
Wednesday, September 25, 13
41. 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
Wednesday, September 25, 13
42. 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
Wednesday, September 25, 13
43. 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
Wednesday, September 25, 13
46. Functional testing
• Interacting with the UI as a real user
• Hard to solve w/ tools focusing on raw DOM/HTML.
Wednesday, September 25, 13
47. 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
48. 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
49. 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
50. 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
58. Siesta news
•2.0: New User Interface
•Auto-scroll element into view
Wednesday, September 25, 13
59. Siesta news
•2.0: New User Interface
•Auto-scroll element into view
•Assertion detecting global Ext JS overrides
Wednesday, September 25, 13
60. 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
61. 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