Testing Rich Web Apps with Siesta

My slides from CopenhagenJS meetup November 2012

Transcript

1. Testing rich web apps with Siesta (C) 2012 Mats Bryntse www.bryntum.com Wednesday, December 12, 12
2. About me Wednesday, December 12, 12
3. About me Mats Bryntse Helsingborg, Sweden Wednesday, December 12, 12
4. About me Mats Bryntse Helsingborg, Sweden Background in C, C#, ASP.NET Wednesday, December 12, 12
5. About me Mats Bryntse Helsingborg, Sweden Background in C, C#, ASP.NET JavaScript/Sencha enthusiast since 2007 Wednesday, December 12, 12
6. About me Mats Bryntse Helsingborg, Sweden Background in C, C#, ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 Wednesday, December 12, 12
7. About me Mats Bryntse Helsingborg, Sweden Background in C, C#, ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 We make JS UI components (Gantt/Scheduler/Siesta) Wednesday, December 12, 12
8. About me Mats Bryntse Helsingborg, Sweden Background in C, C#, ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 We make JS UI components (Gantt/Scheduler/Siesta) @bryntum facebook.com/bryntum Wednesday, December 12, 12
9. Before we start Wednesday, December 12, 12
10. Before we start Wednesday, December 12, 12
11. Before we start Do you have a frontend test suite for your product or web app? Wednesday, December 12, 12
12. Why should we test a web app? ? Wednesday, December 12, 12
13. #1. Variety Wednesday, December 12, 12
14. #1. Variety Wednesday, December 12, 12
15. #1. Variety Wednesday, December 12, 12
16. #1. Variety Wednesday, December 12, 12
17. #1. Variety Wednesday, December 12, 12
18. #1. Variety Wednesday, December 12, 12
19. #1. Variety 10 Wednesday, December 12, 12
20. #1. Variety 10 Wednesday, December 12, 12
21. #1. Variety 10 Wednesday, December 12, 12
22. #1. Variety 10 Wednesday, December 12, 12
23. #1. Variety 10 Wednesday, December 12, 12
24. #1. Variety 10 Wednesday, December 12, 12
25. #1. Variety 10 Wednesday, December 12, 12
26. #1. Variety 10 Wednesday, December 12, 12
27. #1. Variety 10 Wednesday, December 12, 12
28. #1. Variety 10 Wednesday, December 12, 12
29. #1. Variety 10 Wednesday, December 12, 12
30. Why test a JavaScript UI component? ? Wednesday, December 12, 12
31. Too many combinations Wednesday, December 12, 12
32. Too many combinations Multiple platforms (Mac, PC, Linux) Wednesday, December 12, 12
33. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers (Chrome, FF, IE) Wednesday, December 12, 12
34. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers (Chrome, FF, IE) Multiple versions of browsers Wednesday, December 12, 12
35. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Wednesday, December 12, 12
36. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Multiple versions of Ext JS Wednesday, December 12, 12
37. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Multiple versions of Ext JS Multiple Timezones: Varying DST transitions Wednesday, December 12, 12
38. #2. New guy joins your team Wednesday, December 12, 12
39. Hey, new guy! Can you rewrite some code in legacy-core.js? Wednesday, December 12, 12
40. New guy studies the code // drunk, fix later Wednesday, December 12, 12
41. New guy studies the code // When I wrote this, only God and // I understood what I was doing // Now, God only knows Wednesday, December 12, 12
42. New guy scared No confidence Wednesday, December 12, 12
43. Without tests, how do you refactor code you’re not familiar with? Wednesday, December 12, 12
44. “Stress free unit testing” Wednesday, December 12, 12
45. Why Siesta? Wednesday, December 12, 12
46. Why Siesta? Too much manual testing doesn’t scale Wednesday, December 12, 12
47. Why Siesta? Too much manual testing doesn’t scale Hard to test a javascript generated UI Wednesday, December 12, 12
48. Why Siesta? Too much manual testing doesn’t scale Hard to test a javascript generated UI Testing only raw JS not enough Wednesday, December 12, 12
49. Why Siesta? Too much manual testing doesn’t scale Hard to test a javascript generated UI Testing only raw JS not enough Needed DOM interaction tests too. Wednesday, December 12, 12
50. Siesta overview Wednesday, December 12, 12
51. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Wednesday, December 12, 12
52. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Wednesday, December 12, 12
53. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Wednesday, December 12, 12
54. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch Wednesday, December 12, 12
55. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch We use it. 3000+ assertions Wednesday, December 12, 12
56. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch We use it. 3000+ assertions Automation via PhantomJS or Selenium Wednesday, December 12, 12
57. Siesta features t.is(“foo”, “foo”, ‘values match’); // PASS t.isnt(“foo”, “bar”, “values mismatch”); // PASS t.isDeeply({ foo : ‘bar’}, { a : ‘b’ }, ‘Objects’); // FAIL t.ok(true, ‘True is truthy’); // PASS t.notOk(null, ‘null is falsy’); // PASS Basic assertions Wednesday, December 12, 12
58. Siesta features t.click(myDiv, fn); t.moveCursorTo(myDiv, fn); t.dragBy(myDiv, [50, 50], fn); t.type(myInput, ‘Hello world’, fn) User simulation Wednesday, December 12, 12
59. Siesta features Sandboxing Wednesday, December 12, 12
60. Integrates with your IDE Wednesday, December 12, 12
61. t.waitForStoresToLoad(userStore, callback); t.waitForRowsVisible(‘usergrid’, callback); t.waitForEvent(someList, ‘selectionchange’, cb); Sencha sugar Sencha awareness Wednesday, December 12, 12
62. Siesta features myFunction : function() { var counter = 1; i = 0; .... } Globals detection Wednesday, December 12, 12
63. Simple unit test function User (name) { this.name = name; }; var bob = new User(‘Bob’); t.is(bob.name, ‘Bob’, ‘Name works!’); Wednesday, December 12, 12
64. Simple functional test t.willFireNTimes(‘#myDiv’, 'click', 1); t.click('#myDiv') Wednesday, December 12, 12
65. Element Targeting Wednesday, December 12, 12
66. Element Targeting Element id Wednesday, December 12, 12
67. Element Targeting Element id Coordinate Wednesday, December 12, 12
68. Element Targeting Element id CSS selector Coordinate Wednesday, December 12, 12
69. Element Targeting Element id CSS selector Coordinate DOM node Wednesday, December 12, 12
70. Element Targeting Element id CSS selector Coordinate DOM node function () {} Wednesday, December 12, 12
71. Element Targeting Element id CSS selector Coordinate DOM node function () {} Component instance Wednesday, December 12, 12
72. Element Targeting Element id Component query CSS selector Coordinate DOM node function () {} Component instance Wednesday, December 12, 12
73. Element Targeting Element id Component query Composite query CSS selector Coordinate DOM node function () {} Component instance Wednesday, December 12, 12
74. Action ‘chain’ t.chain( { action : ‘click’, target : ‘>>myform namefield’ }, { action : ‘type’, text : ‘John’ }, { action : ‘click’, target : ‘>> myform savebutton’ }, function () { t.is(myUser.get(‘name’), ‘John’, ‘Wooo!’); } ); Wednesday, December 12, 12
75. Future plans Wednesday, December 12, 12
76. Future plans Fiesta - crowd sourced test tool Wednesday, December 12, 12
77. Future plans Fiesta - crowd sourced test tool Recorder Wednesday, December 12, 12
78. Future plans Fiesta - crowd sourced test tool Recorder Cloud testing environment Wednesday, December 12, 12
79. Future plans Fiesta - crowd sourced test tool Recorder Cloud testing environment [your idea here] Wednesday, December 12, 12
80. Live demo time! Wednesday, December 12, 12
81. Thanks for listening! “Without unit tests, you’re not refactoring. You’re just changing shit.” Wednesday, December 12, 12