Siesta Deep Dive

From SenchaCon Roadshow 2015

Transcript

1. 1 @Bryntum Siesta Deep Dive Improve the quality of your Ext JS app releases with unit & UI tests
2. Mats Bryntse Chief JavaScript Officer, Bryntum
3. Agenda 3 Siesta News Unit & UI tests •Recently added features •What’s new in Siesta 3.0 •Feature walkthrough •Application tests •Continuous Integration •Tips & Tricks •BDD / TDD •Using PhantomJS •Testing a view App tests & CI
4. Siesta News
5. Recent Siesta features 5 • sandboxing now optional • async setup/tearDown test methods • taking screenshots • event recorder improvements & configurability
6. What’s new in Siesta 3.0 6
8. Jasmine Support 8
9. 9 describe(‘Some spec', function (t) {
 var component; t.beforeEach(function(t) { component = new Ext.Component(); })
 t.it('Should test something', function (t) {
 });
 }); beforeEach/afterEach
10. 10 Responsive UI controls
11. …and more 11 • Improved memory management • Tests can now run in popups instead of iframes • Touch event support • Jasmine style spies
12. Download it today: www.bryntum.com/products/siesta 12 :
13. Why test?
14. 14 Hands up: Are you unit testing your JS?
15. Know this guy? 15
16. 16 Reasons to test
17. 17 Productivity & confidence in code
18. 18 Productivity & confidence in code
19. 19 Code handover
20. 20 Refactoring without tests
21. 21 Refactoring like a boss
22. 22 Fix bugs once
23. 23 Quality of sleep
24. Unit Tests Red, Green, Refactor
25. 25 Terminology: What does testing mean for a JS developer?
26. 26 Unit tests, UI tests, Application tests..?
27. Ideal Test Pyramid 27 JS Unit tests App Tests UI tests
28. Real World 28 Backend unit tests App Tests
29. A unit test • should focus on a single JS class (“unit”) • should not involve DOM • is pure logic, runs very fast • is perfect for pre-commit hooks 29
30. 30 describe('A simple Model test', function (t) {
 
 
 t.it('Should do something', function (t) {
 var user = new User({ name : "Bob" });
 
 
 t.expect(user.name).toBe("Bob");
 
 });
 }); Simple BDD unit test
31. 31 describe("A simple Model test", function (t) {
 
 t.it("Will not run", function (t) {
 …
 });
 
 
 t.iit("Isolate this section", function (t) {
 …
 });
 
 }); t.iit for fast test debugging
32. Unit tests are your friend 32 • Should be your #1 priority • Cover your most important JS classes, code that is reused • Run often, before commit, daily, nightly. • Use TDD approach + BDD style for readability
33. TDD basics 33 1. Make the unit test fail 2. Implement 3. Make the test pass 4. Refactor, Repeat
34. Unit Test Demo 34
35. UI Testing Render, Interact, Assert
36. 36 • UI unit test of a single UI component • Or application test, open index.html and test it Two main types of UI tests
37. 37 Manually writing UI tests takes time
38. 38 UI tests are more fragile & run slower than unit tests
39. 39 Understanding CSS and ComponentQuery is key
40. 40 Reveals tight coupling very efficiently UserList.js Test sandbox Viewport.js
41. 41 UI Unit test demo
42. Application Tests Click, Wait, Assert
43. Application testing 43 • Aka black box testing, functional testing • Go to application index.html • Runs all the code of your application • Does app work or not?
44. Challenges 44 •Database needs to be put in a known state •Slow •Tests can become fragile, race conditions •Errors likely harder to find
45. Using the event recorder 45
46. 46 • Great for application tests • Records user actions: clicks, types, drag drop • Can be used by a non-programmer • Big timesaver Using the event recorder
47. 47 Let’s try the recorder
48. 48 Monkey testing
49. Monkey testing 49 • Random UI testing • Clicks, drags etc. in your UI • Finds unhandled exceptions • Free testing help. 0€
50. 50 5€ * 0 = 0 5€ Cost breakdown
51. 51 Monkey testing demo
52. Continuous Integration Team City, Cloud Services, Statistics
53. Purpose of CI 53 • Automated builds • Nightly test suite execution • Finding errors early => Code quality => Motivated developers • Enables Continuous Delivery
54. 54 Always ready to release!
55. 55 • Bryntum uses TeamCity • Test suites run every 2 hours in Chrome • Nightly for all other browsers • Reports, statistics, charts and code coverage
56. 56 Let’s checkout TeamCity
57. 57 So…running in multiple browsers?
58. X-browser testing 58 •Need to create Virtual Machines for each version of IE •Total: Chrome, Safari, FF, IE 7-11 => 5 VMs •Managing such a farm can be very time consuming
59. 59 • Siesta integrates with both BrowserStack and Sauce Labs • Run tests easily in any OS and Browser combination • No need to setup your own VM farm • Read more on the Bryntum blog… Cloud to the rescue
60. 60 Launching tests with Sauce
61. Tips & Tricks How to find bugs early
62. 62 Unhandled JS exception: What does the user see? Finding bugs faster
64. 64 Most likely: Nothing
65. 65 Capturing unhandled errors win.onerror = function (message, file, line, column, errorObj) {
 // Log it
 
 };
66. 66 Demo - it’s simple!
67. 67 You can do it too http://www.sencha.com/forum/showthread.php?295768-Basic-error-handling-for-Ext-JS-apps
68. 68 Testing different screen sizes {
 name : 'Responsive app test - landscape',
 viewportWidth : 1024,
 viewportHeight : 768,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/large-size.t.js'
 },
 {
 name : 'Responsive app test - portrait',
 viewportWidth : 500,
 viewportHeight : 700,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/small-size.t.js'
 }
69. 69 Debugging the right iframe
70. 70 Native Events Parallelization Screenshot comparison Siesta.next
71. Summing up 71 • Prioritise JS unit tests • Don’t forget UI tests • Application & monkey tests • Continuous Integration • Tips for finding errors early
72. Links 72 • bryntum.com/products/siesta • bryntum.com/blog • teamcity.bryntum.com/guest • browserstack.com/ • saucelabs.com/
73. 73 Questions? Twitter: @Bryntum