1. 1. Project AutoMock and Jasmine: Testing Auto- magically!! The inside story of how we stopped breaking our own code at Adobe
2. 2. About Me Neha Singhal Developer at Adobe. Active in web development and UI for the past 2.5 years. Likes solving interesting problems involving UI and UX On a personal front she is an avid dancer, loves to travel and is a big fan of animated movies.
3. 3. So how did it all begin? 3
4. 4. Our Journey @ Adobe 4 Version 2.0 Version 3.0 Bugs by QA Team 156 15 (so far) Regression Bugs 52 0 (so far) Integration Bugs > 50 < 5 Bug fixing (in days) ~14 ~3 Dev validation before handoff 5 days 4 hours Dead code (lines) ~1470 < 50 Impressed? This isnt even the best part!
5. 5. Still think testing isnt important??
6. 6. TDD: The Basics Development Philosophy Execution steps : Add a test Watch it fail (Cry silently) Write Code Watch It Pass Celebrate Repeat! TEST CODE DEPLOY INTEGRAT E RELEASE
7. 7. Jasmine is.. A Beautiful Disney Princess ?
8. 8. Just Kidding.. Jasmine is.. Javascript Testing Framework Independent of browsers, DOM Supports multiple Javascript frameworks Headless running out of the box Clean Syntax
9. 9. Our first baby steps 9
10. 10. Lets meet our mighty heroes... Suite : to describe a section of your code Specs: it creates a new spec Expectations : what you expect the code block to do
11. 11. Lets meet our mighty heroes... Matchers : utility functions toEqual toMatch toBeTruthy And lots more to list here..
12. 12. With great power 12 comes an easy way to write a test case
13. 13. With great power 13 we can even create one of our own!
14. 14. Before we knew it 14 we were all grown up
15. 15. Unpredictable Minions of Jasmine (Async callbacks) You never know when and what they are going to do.. (just like async callbacks) Jasmine now supports async methods through done leaving it up to the developer to control the execution flow. Setup Jasmine lets you setup tests by running code before all/each test Teardown You can also run cleanup after all tests or after each test
16. 16. Lets pull the rabbit out of the hat.. What if we told you there was a way to automatically mock your entire backend without having to touch the source code or add specific test code Feels like magic doesnt it? . . . . . . Wait for it..
17. 17. Introducing Project AutoMock!!
18. 18. Project AutoMock Project AutoMock is an original project we are developing for mocking the entire backend
19. 19. Tired?? Tired of waiting for the backend API to be ready? Tired of waiting for API calls to return in your test cases? Tired of test data ruining your DB? Tired of the long, slow process of stubbing each and every API call? Yeah. So were we Let me tell you what we did about it
20. 20. Why tell you 20 When I can show you
21. 21. What it does Automatically captures AJAX requests and responses Integrates well with testing frameworks like Jasmine Automatically creates API stubs for testing using the real captured data
22. 22. The Best Part Integration Guide: For React.js For Angular.js For Backbone.js Spot The Difference
23. 23. What we have achieved so far No manual effort at all Mocking API calls is now essentially an automatic process Little to no developer intervention required to create the API stubs Built for speed Test cases run much faster now that no network requests are made The testing process is speed up considerably Test cases for AJAX calls no longer require async test cases. Its instantaneous. No more messy code required to test each API call
24. 24. Its not the end 24 Its the beginning of a new era
25. 25. What good are questions 25 without answers!
26. 26. @Neha_Singhal Thank You!!