Unit Testing Web and Mobile Applications

Everyone knows they're valuable, but writing unit tests for web applications can be a major pain in the butt. Few developers truly understand the many facets of unit testing, and choosing the right tools can be problematic in itself.

Transcript

1. Unit Testing Web and Mobile Applications January 2013 Webinar Arthur Kay @arthurakay Solutions Engineer, Sencha Inc. Mats Bryntse @bryntum CEO, Bryntum
2. Agenda •  Unit Testing: Overview •  Challenges for Web Developers •  JavaScript Syntax •  Logical Tests (Unit) •  Integration Tests (UI) •  Resources •  Q&A
3. Unit Testing: Overview
4. What are Unit Tests? •  A way to gain confidence in your code •  Verification that bugs exist •  Passing tests !== no bugs •  Passing tests !== working code
5. Unit Testing:
 Challenges for the Web
6. What Do I Test?
7. Typical Enterprise App •  N-Tier apps •  Strongly typed languages •  Only one environment •  QA Team for releases
8. Unit Tests on the Web •  Spaghetti code •  Poorly defined lunitsz •  Test against many browsers and platforms
9. Automation
10. Automation or Bust •  JavaScript is not compiled •  Run tests regularly •  Continuous Integration •  Version control hooks •  Nightly builds, etc.
11. Tools
12. Choosing the Right Tools •  Approved software/tools •  No lone size fits allz tool •  Compatibility with existing systems and tools
13. Sample App
14. Syntax
15. JavaScript Syntax •  Prevent runtime bugs •  Enforce best practices •  JSLint, JSHint, etc. •  PhantomLint...
16. Example: LintRoller •  Runs on Node.js •  Installed via NPM •  Currently supports: •  JSLint •  JSHint •  Esprima •  http://arthurakay.github.com/LintRoller/
17. Challenges •  Software approval •  Version control features
18. Logic Tests (Unit)
19. Logic Tests (Unit) •  Assertions & Expectations •  Objective in nature •  Think of mathematical proofs •  What do I test?
20. Example: Jasmine •  Very readable API •  Tests run in browser •  Plugins available for IDEs •  JSTestDriver •  PhantomJS http://pivotal.github.com/jasmine/
21. Challenges •  Deciding what to test •  Having ltestablez code •  Mocking data / APIs •  Avoiding bugs in the tests
22. Integration Tests (UI)
23. Integration Tests (UI) •  Validate appearance " or behavior •  Subjective in nature •  Simulate real-world use •  Isolating widgets, QA
24. Example: Siesta •  Run in browser or IDE •  Automation tools •  Easy integration with Sencha frameworks •  click, type, drag, tap, etc http://www.bryntum.com/products/siesta/
25. 2 aspects of UI testing •  Isolated UI Unit (preferred) •  + Unit test approach, test 1 Component API at a time •  + Safe to refactor the Component internals •  + Develop TDD style •  Black box (lQA-testingz, Selenium) •  + Does my application really work? •  - More complex •  - Doesn`t provide exact failure context
26. Siesta speaks bSencha` •  Knows about Sencha components, stores, CQ etc. •  waitForRowsVisible(myGrid) •  waitForStoresToLoad(userStore, adminStore, callback) •  click(bbutton[cls=foo]`) •  type(textfield, bHello World`) •  willFireNTimes(myButton, 1, bclick`)
27. Run tests inside your IDE •  1. Pick awesome keyboard shortcut •  2. Map to Phantom JS Siesta launcher •  3. Enjoy!
28. UI test considerations •  UI tests are slower, more fragile •  Tests should be run on many browsers •  Automation is a must •  Simulate wisely, consider other options?
29. Testing Element Pinch
30. Options •  Figure out how to correctly simulate multi-finger pinch (hard) •  or •  Simply mock the events and call methods directly (easy)
31. Example: Siesta
32. Resources
33. Resources •  Sencha Blog: Automating Unit Tests (8/2/12) •  http://www.sencha.com/blog/automating-unit-tests •  Sencha Blog: UI Testing a Sencha App (1/13) •  http://www.sencha.com/blog/ui-testing-a-sencha-app •  Sample app: •  https://github.com/SenchaProSvcs/UnitTestDemo •  Siesta •  http://bryntum.com/products/siesta/
34. Resources •  Test Driven JavaScript Development - Christian Johansen •  lWriting Testable JavaScriptz - Rebecca Murphey •  http://www.youtube.com/watch?v=OzjogCFO4Zo •  https://speakerdeck.com/rmurphey/writing-testable-javascript •  lBehavior Driven Testing with Jasminez - Davis Frank •  http://docs.sencha.com/ext-js/4-1/#!/video/18100173 •  lJavaScript Code Analysis with Esprimaz - Ariya Hidayat •  http://www.youtube.com/watch?v=ACYZFkvq0Sk •  lWrite Code that Worksz - Reid Burke •  http://www.yuiblog.com/blog/2013/01/10/yuiconf-2012-talk-reid-burke-on-write-code-that-works/
35. Advice Decide what tests should accomplish Don`t expect 100% coverage Tests should compliment process
36. Q & A