Acceptance

Test Driven Development for Web Apps

Eemeli Kantola
15.6.2012

 Eemeli Kantola

About me

Web dev, consulting, lean/agile enthusiasm Customer projects Lecturing

Futurice in brief
TAMPERE HELSINKI LONDON BERLIN DSSELDORF

Founded in 2000

150

We oer tailored solutions done with agile methods.

Ask why!

It's not enough to know how to do things you must know why you do them.
Harvey Mackay

and doing stu is ~2x more ecient if you know why

Why am I here

I like to create awesome web apps for (human) end users

Awesome: getting people where they need to be faster than they would get there without

 Its kewl

Web, why?

HTML5 is bestest Everyones doing it, so why not?

Building on web is in many cases more awesome than alternatives when building sw for human end users

 Single (HTML) page load

Web apps?

Using Hypermedia APIs (a.k.a. RESTful etc. backend) Suck usually less than other approaches when done right

Human end users?

Involving humans less trivial, i.e. more interesting Interdisciplinary approaches necessary

Ok, ne. How?

ATDD

ATDD, a.k.a. (or related to)

Test Driven Requirements (TDR) Functional Test Driven Development (FTDD) Behavior Driven Development (BDD) Story Test Driven Development Executable Requirements End-to-End Test Driven Development Customer Test Driven Development Business-Facing Test Driven Development Specication by Example ...
21

15.6.2012

Futurice

Acceptance test?

wat

Warning: not to be confused with User Acceptance Tests (UAT) here

although both are related

Begin with the end in mind

Stephen R. Covey: The 7 Habits of Highly Eective People

ATDD: The practice of expressing functional story requirements as concrete examples or expectations prior to story development
Jennitta Andrea, http://www.stickyminds.com/sitewide.asp?Function=edetail&ObjectId=16315

BDD (and ATDD as well) is what TDD was supposed to be

Franz See in BehaviourDrivenDevelopment Google Group, 2011-01-31

ATDD Disclaimers

One method in toolbox among others Lots of skills and other practices needed, too

Goals

Crystallize acceptance criteria: get a shared understanding of reqs and def. of done [1] Win the bug battle with complicated systems [2]: early regression detection

[1] E. Hendrickson, http://testobsessed.com/blog/2008/12/08/acceptance-test-driven-development-atdd-an-overview [2] J. E. Boal, http://testdrivendeveloper.com/2011/12/27/AutomatedTestsAreTheKeyToScalingAgile.aspx

 Minimize unnecessary work (= less YAGNI)

Positive side eects

Solid regression tests enable incremental development Feels great every time when a bug that wouldve gone to prod was caught by tests [2] Enables cont. deployment

[2] J. E. Boal, http://testdrivendeveloper.com/2011/12/27/AutomatedTestsAreTheKeyToScalingAgile.aspx

Positive side eects (cont.) [3]

Acceptance tests = executable, up-to-date docs Enriched tester role: get rid of most mechanical work Highly testable system Trustworthy specications

[3] J. Andrea, http://www.stickyminds.com/sitewide.asp?Function=edetail&ObjectId=16315

 Too dicult: needs skills, collaboration, and discipline; or no tools exist

Why not?

Not feasible to automate everything (in practice) Doing small, prototype, unimportant, simple stu Discovery, spikes [4] Initial setup overhead I dont know why

[4] Liz Keogh, http://lizkeogh.com/2012/01/30/the-real-cost-of-change

Cool. What about something concrete?

Steps
Design how to fulll the requirement

Implement: hammer the keyboard until all tests pass (incl. other tests)

Story

Design

Write tests

Code

Find out most important thing to do, write a user story

Formulate test cases, most probable path rst

15.6.2012

Futurice

33

Focus now: Formulate test cases on paper and then in code

Hands on

Demo App: Stopwatch

What do you need for one? It should

have a timer display with zeroed time and a start btn start on button click if started, stop when button is clicked again update the timer seconds and fractions when running

1) Web browser of your choice

Tech stack for this session

2) Jasmine BDD 3) CoeeScript (optional) 4) jQuery (optional)

Getting started

Download and unzip Jasmine BDD standalone to a working dir

Try it: open SpecRunner.html in browser Playing around a bit Hack Jasmine to make it better (optional)

Write specs in code

15.6.2012

Futurice

41

https://github.com/ekantola/atdd-for-web-apps

Sources:

Would also be pretty nice if the timer could

continue running from where it was stopped last remember the last stopped time across app reloads etc

More pointers and ideas

From Crispin&Gregory, Agile Testing book Original idea: Brian Marick

Agile Testing Quadrants

Autom. & Manual

Business-facing

Manual

Protos Func. Tests Simulations Acceptance Tests(* Examples

Scenarios Expl. Testing Usability Tests Alpha/Beta UAT

Unit Tests Component Tests

Perf & Load, Security, -ility Testing

Automated

Tech-facing

Tools

46

From Crispin&Gregory, Agile Testing book Original idea: Brian Marick

Agile Testing Quadrants

Autom. & Manual

Business-facing

Manual

Protos Func. Tests Simulations Acceptance Tests(* Examples

Scenarios Expl. Testing Usability Tests Alpha/Beta UAT

Unit Tests Component Tests

*) Originally, Story Tests

Perf & Load, Security, -ility Testing

Automated

Tech-facing

Tools

47

Some other tools to help writing & running tests

Selenium Robot Framework FitNesse Poltergeist Watir/Watij Canoo WebTest StoryTeller Screw.Unit

JBehave Rspec Cucumber Expect easyb Slim Specow QUnit+Pavlov

48

15.6.2012

Futurice

Selenium
Automation of browsers
E.g. for testing purposes, or for repetitive admin tasks

Selenium IDE for recording scripts Scaling and distributing test running Java-based, with wide support for other langs & testing frameworks

16.6.2012

Futurice

49

Cucumber BDD
Automation of browsers Describing behavior in plain, human readable text (Given-When-Then)
Higher level abstraction for tests

Ruby-based, but bindings for other langs exist

16.6.2012

Futurice

50

Given-When-Then (GWT)
Example of a popular approach: Given the shopping cart is visible and has three items in it, When the user clicks an items trashcan icon, Then the item should disappear from the list and a notication should be shown with the items name and an Undo link.

15.6.2012

Futurice

51

Robot Framework
Generic test automation framework for various domains
Web part backed by e.g. Selenium, but also Java GUI, SSH, running processes...

Tabular test data syntax Extensible with Python/Java

16.6.2012

Futurice

53

Conclusions

 Easy to start with in web, powerful tools exist Longer projects: no time not to automate and maintain tests

Thanks!
Contact: @ekantola github.com/ekantola