Improve Web App Quality: Sencha Test - by Lee Boonstra

Learn how you can improve application quality and accelerate release cycles with Sencha Test. Empower developers and test engineers with the solution that was created specifically to test Ext JS applications. Teams can rapidly create and execute automated tests and find issues earlier in the lifecycle.

Transcript

2. © 2016 Sencha Inc. Sencha Test! ! Lee Boonstra ! Sales Engineer, Sencha Inc.! @ladysign! !
3. © 2016 Sencha Inc. What We’ll Cover! •  About JavaScript Testing! •  Various Test types! •  Introducing Sencha Test! •  Test Runner! •  Sencha Test API! •  Q&A! 3!
4. © 2016 Sencha Inc. About JavaScript testing!
5. © 2016 Sencha Inc. Your JavaScript in an Ext JS App:! 5! Ext JS SDK! Classes! Custom! Code! Tested by Sencha ??? app.js!
6. © 2016 Sencha Inc. 6!
7. © 2016 Sencha Inc. Why should you test?! ! To get clear understanding of your code! Productivity will go up, when you are confident with your code! ! You don’t want to break previous written code.! ..or someone else his code! 7! code! test! review!
8. © 2016 Sencha Inc. 8!
9. © 2016 Sencha Inc. Why should you test?! ! Bugs should only happen once! ! It’s very common to write server-side test, ! why not test on the client-side?! 9!
10. © 2016 Sencha Inc. How Sencha tests their frameworks…! •  Sencha got really serious about automated testing with Ext JS 4! •  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! 10!
11. © 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! 11!
12. © 2016 Sencha Inc. Various Test Types!
13. © 2016 Sencha Inc. Test Types! 13! Integration / UI Unit Tests Application Tests Unit Tests Class Instances, Singletons, Models! ! No UI involved.! Isolated instances of components / views! ! We need to mock dependencies.! Test the application! ! ! We need to launch the app and interact with the full UI.!
14. © 2016 Sencha Inc. Test Types! 14! Integration / UI Unit 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!
15. © 2016 Sencha Inc. Test Types! 15! Integration / UI Unit Tests Application Tests Unit Tests developers developers test engineers
16. © 2016 Sencha Inc. Write Tests - Example of a Unit Test! describe("Music Player", function() { it("Should play song from Spotify", function() { //API magic to retrieve the song… expect(result).toBeTruthy(); }); }); 16!
17. © 2016 Sencha Inc. Write Tests - The TDD Approach! Developers can use the TDD approach to write better code:! 1.  Write a test, and make it fail! 2.  Implement the code in your project! 3.  Make the test pass! 4.  Refactor & repeat! 17!
18. © 2016 Sencha Inc. Write Tests - Integration tests! Integration tests (aka UI Unit Test) are a little more difficult. You are depending on the DOM, and the DOM needs to be available. You need to locate the element, with for example a Dom Query, XPATH or Ext.ComponentQuery.! ! •  Use Futures API! 18!
19. © 2016 Sencha Inc. Write Tests - Application tests! Application tests (aka functional tests), depends on your application. You will visit the index.html, whole app will be launched. Then you have interaction. (Click, wait, fill in a form…, test).! ! •  Q&A test teams! •  Use Event Recorder to capture actions! 19!
20. © 2016 Sencha Inc. Ideal Mix! 20! App Integration Unit
21. © 2016 Sencha Inc. Sencha Test!
22. © 2016 Sencha Inc. Sencha Test: Create robust tests that help you deliver quality apps! Common request from our customers! One place for the DEV and QA team to collaborate.! ! •  Author and execute tests! •  Record and playback tests ! •  Review and archive results! 22!
23. © 2016 Sencha Inc. Web App Architecture Overview! 23! – or – h"p h"p h"p test/*
24. © 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)! ! 24!
25. © 2016 Sencha Inc. Browser Desktop (PCs & Laptops Browser Mobile (Tablets & Smartphones) Test Framework Integra?ons Supported Sencha Applica?ons Test Automa?on Integra?ons •  Internet Explorer 8+ •  Microso4 Edge •  Chrome •  Firefox •  Safari 6+ •  Opera 15+ •  IE10 on Windows Phone 8+ •  Chrome/Stock Browser on Android 4+ •  Safari on iOS 7+ •  Jasmine 2.4.1 •  Istanbul 0.4.1 •  Sencha Ext JS 4.2+ •  Sencha Touch 2.1+ •  Browser Farm- Sauce Labs •  ConSnuous IntegraSon - TeamCity/ Jenkins 25! Supported Platforms!
26. © 2016 Sencha Inc. Out Of The Box Integrations! 26! Jasmine Test Framework Browser Farms Continuous Integration Istanbul Code Coverage
27. © 2016 Sencha Inc. Code Coverage - Test Archiver! 27! •  Review results from automated and manual test runs! •  Summary level results & drill into the detail of failed tests! •  Out of the box integration with Istanbul enables users to identify and rectify code coverage gaps! •  View % coverage at the Statements, Branches, Functions and Lines levels!
28. © 2016 Sencha Inc. Test Runner!
29. © 2016 Sencha Inc. 29! Scenario Name Local Brower Pool Test File Inventory Mobile Device Browser Pool WebDriver Browser Pools Test Execution: Test Runner!
30. © 2016 Sencha Inc. 30! Full Test Inventory / Run Results Result Details Selected Browsers Test Execution: Test Runner!
31. © 2016 Sencha Inc. Test Runner! 31! Parking Lot Address •  Parked browsers are redirected to test runners! •  Redirected back when runner is closed! •  Preserves debugger context!
32. © 2016 Sencha Inc. Sencha Test API!
33. © 2016 Sencha Inc. Futures API! •  Asynchronous tests! -  Harder to write! -  Harder to maintain! -  Sometimes fail sporadically (race conditions)! •  Many (most?) Integration and App tests are asynchronous. They wait on:! -  Loading data! -  Rendering! -  Animations! -  Layouts! 33!
34. © 2016 Sencha Inc. A future is an object used to describe a! sequence of actions to take in the future.!
35. © 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 35!
36. © 2016 Sencha Inc. Visual Screen Comparison! 36! •  Minimize the time spent verifying images on hundreds of screens! •  Review images that are captured from previous test runs and compare to each subsequent test run! •  ST.screenshot()
37. © 2016 Sencha Inc. API - http://docs.sencha.com/sencha_test/! 37!
38. © 2016 Sencha Inc. Demos!
39. © 2016 Sencha Inc. Sencha Test Key Resources! Product Download: https://www.sencha.com/products/test! Trial Download: https://www.sencha.com/products/test/evaluate/ ! Futures API: https://www.sencha.com/blog/inside-the-sencha-test-futures-api/! Documentation: http://docs.sencha.com/sencha_test/! Samples: https://github.com/sencha/SenchaTestDemo! Forum: https://www.sencha.com/forum/forumdisplay.php?144-Sencha-Test! FAQ: https://www.sencha.com/products/test/faq/! ! ! 39!
40. © 2016 Sencha Inc. Q&A! Lee Boonstra! lee@sencha.com! @ladyign! ! http://www.leeboonstra.com!