Testing Sencha Touch

From Sencha Touch London User Group, Nov 5th 2012

Transcript

1. Testing Sencha Touch apps (C) 2012 Mats Bryntse www.bryntum.com Tuesday, November 6, 12
2. Agenda Reasons for testing A look at Sencha Touch Getting to know Siesta Making the most out of your test suite Live example Tuesday, November 6, 12
3. About me Mats Bryntse Helsingborg, Sweden Background in ASP.NET Sencha enthusiast since 2007 Founded Bryntum 2009 (Gantt/Scheduler/Siesta) @bryntum facebook.com/bryntum Tuesday, November 6, 12
4. Before we start Tuesday, November 6, 12
5. Before we start Do you have a test suite for your Sencha Touch project? Tuesday, November 6, 12
6. Why should we test? ? Tuesday, November 6, 12
7. #1. Building a 2012 RIA 10 Tuesday, November 6, 12
8. === Complexity Imagine making a UI change, and having to verify it in 20 browsers Tuesday, November 6, 12
9. #2. New guy joins your team Tuesday, November 6, 12
10. Hey, new guy! Can you rewrite some code in legacy-core.js? Tuesday, November 6, 12
11. New guy studies the code // drunk, fix later Tuesday, November 6, 12
12. New guy studies the code // When I wrote this, only God and // I understood what I was doing // Now, God only knows Tuesday, November 6, 12
13. New guy studies the code /** * Always returns true. */ function isAvailable() { return false; } Tuesday, November 6, 12
14. New guy scared No confidence Tuesday, November 6, 12
15. Without tests, how do you refactor code you’re not familiar with? Tuesday, November 6, 12
16. #3. Framework upgrade v.2.0 v.2.1 Tuesday, November 6, 12
17. 1. Productivity, confidence 2. Frameworks contain bugs 3. So does your code 4. ...and mine... 5. Refactoring (code handover) 6. Fix bugs once Reasons for testing Tuesday, November 6, 12
18. A look at Sencha Touch Tuesday, November 6, 12
19. Anatomy of a ST application Application Tuesday, November 6, 12
20. Models & Stores Pure JS, not tied to DOM Testing is easy Good place to put business logic Tests are a great investment Tuesday, November 6, 12
21. Views View produces HTML, involves DOM Testing requires more effort. Render. Interact. Bad bad place to put business logic Tuesday, November 6, 12
22. Ext.define(‘UserForm’, { extend : ‘Ext.form.Panel’, getAnnualSalary : function() { return this.model.get(‘salaryPerMonth’) * 12: } }); Views Tuesday, November 6, 12
23. Ext.define(‘User’, { extend : ‘Ext.data.Model’, fields : [‘name’, ‘age’, ‘salaryPerMonth’] , getAnnualSalary : function() { return this.get(‘salaryPerMonth’) * 12: } }); Views Tuesday, November 6, 12
24. Controllers Not directly tied to DOM But, often tied to ST components Hard to isolate, mocking not trivial Tuesday, November 6, 12
25. Application “Black box testing” Launch app UI, issue commands to browser Does application work or not? Tuesday, November 6, 12
26. What to test? Data classes (UserModel.js) - Easy +++ View classes (UserList.js) - Medium ++ Controllers (UserController.js) - Adv + Whole application (index.html) - Adv + Tuesday, November 6, 12
27. Tools to use? Jasmine PhantomJS JsTestDriver YUI Test DOH ..... Tuesday, November 6, 12
28. “Stress free unit testing” Tuesday, November 6, 12
29. Why Siesta? Upgrade to Ext JS 4 was hard (lack of tests) Manual testing doesn’t scale No tools seemed to do the trick Selenium, Jasmine not enough Tuesday, November 6, 12
30. What we wanted: Write tests in JS Automatable Extensible Ext JS aware Easy to learn Tuesday, November 6, 12
31. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery, NodeJS) Unit testing and Functional testing Adapters for Ext JS, Sencha Touch We use it. 2000+ assertions Automation via PhantomJS or Selenium Tuesday, November 6, 12
32. 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 Tuesday, November 6, 12
33. Siesta features t.tap(myDiv, ...); t.moveFingerTo(myDiv); t.dragBy(myDiv, [50, 50], ...); t.type(myInput, ‘Hello world’, ...) User simulation Tuesday, November 6, 12
34. Siesta features Sandboxing Tuesday, November 6, 12
35. t.waitForStoresToLoad(...); t.waitForCQ(‘userlist’, fn); t.waitForEvent(myList, ‘selectionchange’, ...); Siesta features ST awareness Tuesday, November 6, 12
36. Siesta features initComponent : function() { var counter = 1; i = 0; this.callParent(arguments); } Globals detection Tuesday, November 6, 12
37. API Docs (JsDuck) Tuesday, November 6, 12
38. Simple unit test Ext.define(‘User’, { extend : ‘Ext.data.Model’, fields : [‘name’, ‘age’] }); var bob = new User({ name : ‘Bob’ }); t.is(bob.get(‘name’), ‘Bob’, ‘Name works!’); Tuesday, November 6, 12
39. Simple functional test var btn = new Ext.Button({ text : ‘Click me’, renderTo : document.body }); t.willFireNTimes(btn, ‘click’, 1, ‘1 click detected’); t.click(btn); Tuesday, November 6, 12
40. Targeting options Element id Component query Composite query CSS selector Coordinate DOM node function () {} Component instance Tuesday, November 6, 12
41. Targeting engine CSS selector ‘.foo’ Element id’s ‘#foo’ Coordinate [50, 50] Component Query ‘>>button’ Composite Query ‘gridpanel => .x-grid-cell’ Tuesday, November 6, 12
42. Async testing t.chain( { waitFor : ‘rowsVisible’, args : myGrid }, function (next) { // Assertions go here next(); }, { action : ‘click’, target : ‘.saveButton’ } ); Tuesday, November 6, 12
43. Object notation syntax t.chain( { action : ‘click’, target : ‘>>myform namefield’ }, { action : ‘type’, text : ‘John’ }, { action : ‘click’, target : ‘>> myform savebutton’ }, function () { t.is(myUser.get(‘name’), ‘John’, ‘Wooo!’); } ); Tuesday, November 6, 12
44. Future plans Fiesta - crowd sourced test tool Recorder Cloud testing environment [your idea here] Tuesday, November 6, 12
45. Ok, I have tests - now what? Tuesday, November 6, 12
46. Remember all our friends? 10 Tuesday, November 6, 12
47. Testing manually does not scale Tuesday, November 6, 12
48. #1. Don’t test in a browser UI if you can avoid it Tuesday, November 6, 12
49. #2. Launch tests from IDE Tuesday, November 6, 12
50. Chrome => iOS sim. => on device #3. Testing environments Tuesday, November 6, 12
51. #4. Nightly builds running full test suite Tuesday, November 6, 12
52. #5. Dealing with bugs Find new bug => New test case => Fix bug Tuesday, November 6, 12
53. Live demo time! Tuesday, November 6, 12
54. Before closing, let’s repeat Failing in JS/CSS is too easy. Testing manually doesn’t scale. Too many dimensions Testing only JS is not enough. DOM interaction Automation is king. Nightly builds, CI reports Tuesday, November 6, 12
55. Thanks for listening! “Without unit tests, you’re not refactoring. You’re just changing shit.” Tuesday, November 6, 12