ATDD for Web Apps

Eemeli  Kantola  

Acceptance  Test  Driven  Development  for  Web  Apps  21.5.2012  

1)  Intro  

2)  Why,  what?  

3)  How  

4)  Hands  on  

5)  Conclusions  

Agenda  

About  me  

›  Eemeli  Kantola  

›  Web  dev,  consulting,  lean/agile  enthusiasm  

›  Working  in  Futurice  since  -­‐04  

›  Customer  projects,  various  team  setups  

›  DB,  frontend,  backend,  Java,  Python,  Ruby,  Scala,  JS,  HTML,  CSS,  Un*x,  training,  etc.  etc.  

Ask  why!  

“It's  not  enough  to  know  how  to  do  things  –  you  must  know  why  you  do  

them.”  –  Harvey  Mackay  

…and  doing  stuff  is  ~2x  more  efficient  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  

Web,  why?  ›  It’s  kewl  

›  HTML5  is  bestest  

›  Everyone’s  doing  it,  so  why  not?  

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

Web  apps?  

›  Single  (HTML)  page  load  

›  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,  fine.  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  

»  Specification  by  Example  

»  ...  

19  21.5.2012   Futurice  

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

“Begin  with  the  end  in  mind”  –  Stephen  R.  Covey:  The  7  Habits  of  Highly  Effective  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  

Positive  side  effects  

›  Minimize  unnecessary  work  (=  less  YAGNI)  

›  Solid  regression  tests  enable  incremental  development  

›  Feels  great  every  time  when  a  bug  that  would’ve  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  effects  

(cont.)  [3]  

›  Acceptance  tests  =  executable,  up-­‐to-­‐date  docs  

›  Enriched  tester  role:  get  rid  of  most  mechanical  work  

›  Highly  testable  system  

›  Trustworthy  specifications  

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

Why  not?  

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

›  Not  feasible  to  automate  everything  (in  practice)  

›  Doing  small,  prototype,  unimportant,  simple  stuff  

›  Discovery,  spikes  [4]  

›  Initial  setup  overhead  

›  «I  don’t  know  why»    [4]  Liz  Keogh,  http://lizkeogh.com/2012/01/30/the-­‐real-­‐cost-­‐of-­‐change    

Cool.  What  about  something  concrete?  

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

Steps  

30  21.5.2012   Futurice  

Design  how  to  fulfill  the  requirement  

Design  Story  Write  tests   Code  

Formulate  test  cases,  most  probable  path  first  

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

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  

2)  Jasmine  BDD  

3)  CoffeeScript  (optional)  

4)  jQuery  (optional)  

Tech  stack  for  this  session  

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  

38  21.5.2012   Futurice  

Too  lazy  to  type  yourself?  See:  https://github.com/ekantola/atdd-­‐for-­‐web-­‐apps  

Live  coding…  

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  &  ideas  

43  

Agile  Testing  Quadrants  

 From    Crispin&Gregory,    

Agile  Testing  book      

Original  idea:  Brian  Marick  

Protos  Func.  Tests  Simulations  Acceptance  

Tests(*  Examples  

Scenarios  Expl.  Testing  Usability  Tests  Alpha/Beta  

UAT  

Unit  Tests  Component  

Tests  

Perf  &  Load,  Security,  “-­‐ility”  Testing  

Manual  

Tools  

Autom.  &  Manual  

Automated  

Business-­‐facing  

Tech-­‐facing  *)  Originally,  Story  Tests  

Some  other  tools  to  help  writing  &  running  tests  

»  Selenium  

»  Robot  Framework  

»  FitNesse  

»  Poltergeist  

»  Watir/Watij  

»  Canoo  WebTest  

»  StoryTeller  

»  Screw.Unit  

44  21.5.2012   Futurice  

»  JBehave  

»  Rspec  

»  Cucumber  

»  Expect  

»  easyb  

»  Slim  

»  Specflow  

»  QUnit+Pavlov  

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  item’s  trashcan  icon,  

»  Then  the  item  should  disappear  from  the  list  and  a  notification  should  be  shown  with  the  item’s  name  and  an  “Undo”  link.  

45  21.5.2012   Futurice  

Thanks!