Unit Testing Web and Mobile Applications

Slide 1

Slide 1 text

Unit Testing Web and Mobile Applications January 2013 Webinar Arthur Kay @arthurakay Solutions Engineer, Sencha Inc. Mats Bryntse @bryntum CEO, Bryntum

Slide 2

Slide 2 text

Agenda •  Unit Testing: Overview •  Challenges for Web Developers •  JavaScript Syntax •  Logical Tests (Unit) •  Integration Tests (UI) •  Resources •  Q&A

Slide 3

Slide 3 text

Unit Testing: Overview

Slide 4

Slide 4 text

What are Unit Tests? •  A way to gain conﬁdence in your code •  Veriﬁcation that bugs exist •  Passing tests !== no bugs •  Passing tests !== working code

Slide 5

Slide 5 text

Unit Testing:  Challenges for the Web

Slide 6

Slide 6 text

What Do I Test?

Slide 7

Slide 7 text

Typical Enterprise App •  N-Tier apps •  Strongly typed languages •  Only one environment •  QA Team for releases

Slide 8

Slide 8 text

Unit Tests on the Web •  Spaghetti code •  Poorly deﬁned lunitsz •  Test against many browsers and platforms

Slide 9

Slide 9 text

Automation

Slide 10

Slide 10 text

Automation or Bust •  JavaScript is not compiled •  Run tests regularly •  Continuous Integration •  Version control hooks •  Nightly builds, etc.

Slide 11

Slide 11 text

Tools

Slide 12

Slide 12 text

Choosing the Right Tools •  Approved software/tools •  No lone size ﬁts allz tool •  Compatibility with existing systems and tools

Slide 13

Slide 13 text

Sample App

Slide 14

Slide 14 text

Syntax

Slide 15

Slide 15 text

JavaScript Syntax •  Prevent runtime bugs •  Enforce best practices •  JSLint, JSHint, etc. •  PhantomLint...

Slide 16

Slide 16 text

Example: LintRoller •  Runs on Node.js •  Installed via NPM •  Currently supports: •  JSLint •  JSHint •  Esprima •  http://arthurakay.github.com/LintRoller/

Slide 17

Slide 17 text

Challenges •  Software approval •  Version control features

Slide 18

Slide 18 text

Logic Tests (Unit)

Slide 19

Slide 19 text

Logic Tests (Unit) •  Assertions & Expectations •  Objective in nature •  Think of mathematical proofs •  What do I test?

Slide 20

Slide 20 text

Example: Jasmine •  Very readable API •  Tests run in browser •  Plugins available for IDEs •  JSTestDriver •  PhantomJS http://pivotal.github.com/jasmine/

Slide 21

Slide 21 text

Challenges •  Deciding what to test •  Having ltestablez code •  Mocking data / APIs •  Avoiding bugs in the tests

Slide 22

Slide 22 text

Integration Tests (UI)

Slide 23

Slide 23 text

Integration Tests (UI) •  Validate appearance " or behavior •  Subjective in nature •  Simulate real-world use •  Isolating widgets, QA

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Siesta speaks bSencha` •  Knows about Sencha components, stores, CQ etc. •  waitForRowsVisible(myGrid) •  waitForStoresToLoad(userStore, adminStore, callback) •  click(bbutton[cls=foo]`) •  type(textﬁeld, bHello World`) •  willFireNTimes(myButton, 1, bclick`)

Slide 27

Slide 27 text

Run tests inside your IDE •  1. Pick awesome keyboard shortcut •  2. Map to Phantom JS Siesta launcher •  3. Enjoy!

Slide 28

Slide 28 text

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?

Slide 29

Slide 29 text

Testing Element Pinch

Slide 30

Slide 30 text

Options •  Figure out how to correctly simulate multi-ﬁnger pinch (hard) •  or •  Simply mock the events and call methods directly (easy)

Slide 31

Slide 31 text

Example: Siesta

Slide 32

Slide 32 text

Resources

Slide 33

Slide 33 text

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/

Slide 34

Slide 34 text

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/

Slide 35

Slide 35 text

Advice Decide what tests should accomplish Don`t expect 100% coverage Tests should compliment process