Sencha Roadshow 2016: Sencha Test by Don Griffin

Sencha Roadshow 2016: Sencha Test by Don Griffin

Transcript

2. © 2016 Sencha Inc. Sencha Test! Improving Web App Quality! ! By! Don Griffin! Director of Engineering!
3. © 2016 Sencha Inc. What We’ll Cover! •  History / Backstory! •  Test Types and their challenges! •  Where does Sencha Test fit?! •  Sencha Test highlights! •  Demo! 3!
4. © 2016 Sencha Inc. Backstory!
5. © 2016 Sencha Inc. Backstory! •  Sencha got really serious about automated testing with Ext JS 4! -  Over 5 years ago! •  Combined various tools! -  Jasmine, Team City, WebDriver, Istanbul, Siesta, Sauce Labs! •  Across the test spectrum! -  Unit tests! -  Integration (component) tests! -  Application tests (for our examples, etc.)! -  Visual testing for CSS issues! 5!
6. © 2016 Sencha Inc. Testing In Sencha Today! •  Tests are run…! -  On each pull request before merging! -  Against main branches after merge! •  Tests are run on IE8-11, Edge, Firefox, Chrome, Safari, iPad etc..! -  Multiplied out that comes to 330,000 test executions per run! -  With code coverage on most branches! •  QA team! -  Runs automated tests on apps and examples using nightly builds! 6!
7. © 2016 Sencha Inc. Common Challenges! •  I fixed that bug…! -  How did it break again?!?! •  It is hard to write asynchronous tests…! -  I’ll add some when I have more time.! •  It works on my machine…! -  But fails in the CI run!! •  How do I test my code…! -  In the same way the CI does?! •  The tests all pass….! -  But things don’t look right!! 7!
8. © 2016 Sencha Inc. Test Types!
9. © 2016 Sencha Inc. Test Engineer Developer Test Types! 1.  Unit Tests! -  Creating class instances, calling methods directly! -  No User Interface involved! 2.  Integration Tests! -  Isolated instances of Components, Views and Controllers! -  Mock dependencies! 3.  Application Tests! -  Launch application! -  Interact with the UI and check results! 9!
10. © 2016 Sencha Inc. Test Types! 10! Integration Tests Application Tests Unit Tests •  Easy to write! •  Fast execution! •  Immediate feedback! •  More complex! •  Slower to run! •  Typically async! •  Isolation can be tricky! •  Mocking is tricky! •  Hardest to write! •  Tedious to run! -  Require installed app! -  Server environment! •  Data / Results hard to make predictable!
11. © 2016 Sencha Inc. Comparing Test Types! 11! Integration Tests Application Tests Unit Tests •  Yes! •  Developer! •  Developer! •  Yes! •  Developer! •  Developer! •  Yes! •  Test Engineer! •  Test Engineer! Necessary! Author! Run By! Problem
12. © 2016 Sencha Inc. Ideal Mix! 12! App Integration Unit
13. © 2016 Sencha Inc. Typical Case! 13! App ? developers boss ?!? #$@! customers
14. © 2016 Sencha Inc. Sencha Test!
15. © 2016 Sencha Inc. Sencha Test! •  Productizes Sencha’s testing experience! •  Common request from customers! •  One place for the dev and QA team to collaborate! -  Because it handles unit, integration and application testing! •  First release covers the essential workflows! 15!
16. © 2016 Sencha Inc. Web App Architecture Overview! 16! – or – h,p h,p h,p test/*
17. © 2016 Sencha Inc. Sencha Test Essentials! •  Understands Sencha application structure! -  Works seamlessly with Cmd-based projects! -  Works with any web app that has a URL! •  Test configuration performed in Sencha Studio is used to…! -  Run tests directly in Sencha Studio! -  Run tests via the Sencha Test command-line tool (stc)! •  First things to check out! -  Test Runner! -  Futures API! 17!
18. © 2016 Sencha Inc. Test Runner!
19. © 2016 Sencha Inc. Test Runner! 19! Scenario Name Local Brower Pool Test File Inventory Mobile Device Browser Pool WebDriver Browser Pools
20. © 2016 Sencha Inc. Test Runner! 20! Full Test Inventory / Run Results Result Details Selected Browsers
21. © 2016 Sencha Inc. Test Runner! 21! Parking Lot Address •  Intelligently manages browser tabs! •  Parked browsers are redirected to test runners! •  Redirected back when runner is closed! •  Preserves debugger context!
22. © 2016 Sencha Inc. Futures API!
23. © 2016 Sencha Inc. Make asynchronous tests! simple and reliable! (like synchronous tests)!
24. © 2016 Sencha Inc. Futures API! •  Many (most?) Integration and App tests are asynchronous. They wait on:! -  Loading data! -  Rendering! -  Animations! -  Layouts! •  Asynchronous tests! -  Harder to write! -  Harder to maintain! -  Sometimes fail sporadically (race conditions)! 24!
25. © 2016 Sencha Inc. A future is an object used to describe a! sequence of actions to take in the future.!
26. © 2016 Sencha Inc. Futures API – Example! ST.grid('#mygrid'). // locate the grid rowAt(1000). // interact with a row cell('firstName'). // now with a cell reveal(). // scroll into view click(10, 10); // click at offset 26!
27. © 2016 Sencha Inc. Demo!
28. © 2016 Sencha Inc. Q&A! Don Griffin! don@sencha.com! @dongryphon! http://www.sencha.com!