Testing Ext JS 5 Apps with Siesta

Slides from my talk at the Ext JS 1 day conference in Milan

Transcript

1. Copyright Sencha Inc. 2014 Mats Bryntse, founder of Bryntum Testing Ext JS 5 Apps
2. Webinar | Content Unit tests UI tests Continuous Integration • Writing a unit test • Using PhantomJS • Hello world sample • Event recorder intro • Testing an Ext JS cmp • Recording a UI test • TeamCity • Code Coverage • Statistics • Cloud Testing
3. Intro | DESCRIPTION Less Theory, More Real World
4. Intro | WHY Q: Who here is testing their JS codebase?
5. Intro | WHY Why Testing?
6. Intro | WHY 1. Productivity & confidence in code 2. Frameworks contain bugs 3. So does your code (and mine) 4. Refactoring & code handover 5. Fix bugs once
7. Intro | TERMINOLOGY Terminology: what does testing mean for a JS developer?
8. Intro | TERMINOLOGY ! ! Unit tests, UI tests, Application tests..?
9. Intro | TERMINOLOGY Unit tests ! ! App Tests UI tests
10. Unit Tests Red, Green, Refactor
11. Unit tests | Intro •Should be your #1 priority •Cover your most important JS classes •Run often, before commit, daily, nightly. •Use TDD approach + BDD style for readability
12. Unit tests | TDD basics 1. Make the unit test fail 2. Implement 3. Make the test pass 4. Refactor, Repeat
13. Unit tests | Writing a unit test Unit testing demo
14. Testing your UI Functional testing
15. UI tests | Intro Manually writing UI tests takes time
16. UI tests | Intro UI tests are more fragile & run slower than unit tests
17. UI tests | Intro Understanding CSS and ComponentQuery is key
18. UI tests | Intro Siesta Event Recorder
19. UI tests | Event recorder •Records user actions: clicks, types, drag drop •Exports actions to a Siesta test case •Can be used by a non-programmer •Big timesaver
20. UI tests | Event recorder Let’s try the recorder
21. Continuous Integration TeamCity, Code Coverage & Statistics
22. Continuous Integration | Intro •Bryntum uses TeamCity, Siesta integrates with others (Jenkins…) •Test suites run every 2 hours in Chrome •Full test suites executed nightly •Reports, statistics, charts and code coverage
23. Continuous Integration | TeamCity Let’s checkout TeamCity
24. UI tests | Cloud testing So…running in multiple browsers?
25. Continuous Integration | Cloud testing •Need to create Virtual Machines for each version of IE •Total: Chrome, Safari, FF, IE 7-11 => 7 VMs •Managing such a farm can be very time consuming
26. Continuous Integration | Cloud testing •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…
27. Webinar | Links •bryntum.com/products/siesta •bryntum.com/docs/siesta •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/
28. Webinar | Questions Questions? Twitter: @Bryntum