Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

84
describe('UnitTes.ng', func.on(){ it('works with AngularJS'… } Jesse Liberty Master Consultant Falafel SoFware [email protected] @jesseliberty

description

A complete introduction to unit testing, and test-first development for AngularJS programmers. Topics include tools, specs, test runners, core testing practices and patterns, Behavior-driven development, Spys, Matchers, Stubs and MOcks and much more.

Transcript of Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Page 1: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

describe('UnitTes.ng',  func.on(){          it('works  with  AngularJS'…  }   Jesse  Liberty  

Master  Consultant  Falafel  SoFware  

[email protected]  @jesseliberty  

Page 2: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

What  We  Will  Cover • Why  bother?      • Why  Aren't  We  Doing  It?  • Wri.ng  specs  • Matchers  •  Spies  

Page 3: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Getting the terms right

§  Unit Test §  Test Driven Development (TDD)

o Test First Development

§  Behavior Driven Development (BDD)

Page 4: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Am  I  In  The  Right  Presenta7on?

•  I  assume…  •  Comfort  with  Angular  Fundamentals  •  No  prior  experience  with  unit  tes.ng  

Page 5: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Ques7ons

If  you  get  lost  it  will  be  hard  to  catch  up  so  please,  please  ask  ques.ons    

Copyright  ©  2003-­‐2014  Falafel  SoFware  Inc.   5  Q&A  at  the  end    

Page 6: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 7: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 8: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 9: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 10: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 11: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 12: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 13: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 14: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Getting Started

§  What you already need to know o Javascript o Angular

§  What hardware you need §  What software you need §  Where to get everything

o Getting Jasmine o Finding documentation o Finding Help

Page 15: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

jasmine.github.io  

Page 16: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 17: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Red, Green, Rafactor

§  Red – Your Test Should Fail §  Green – Make Your Test Pass §  Refactor – Clean up your code without breaking your test

Page 18: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Red, Green, Rafactor

§  Red – Your Test Should Fail §  Green – Make Your Test Work §  Refactor – Clean up your code without breaking your test

Lather  Rinse  Repeat  

Page 19: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Three Laws

1.  You may not write production code until you have a failing test

2.  You may not write more of a unit test than is sufficient to fail

3.  You may not write more production code than is sufficient to pass

Page 20: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

The Prime Directive

§  Your test code should be as good and well maintained as your production code. o Succinct o Clear o Simple

§  However, do not worry about efficiency in test code

Page 21: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Test One Concept In Each Test

§  Pass/Fail should immediately convey what was tested and the result

Page 22: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

F.I.R.S.T.

§  Fast §  Independent §  Repeatable §  Self-validating (boolean output) §  Timely

Page 23: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

SEE: Setup Execute Check Expectations

Page 24: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Wri7ng  Your  First  Spec

Page 25: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 26: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 27: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 28: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 29: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 30: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 31: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 32: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 33: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 34: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Demo

Page 35: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Measuring your step size

Page 36: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 37: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 38: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 39: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Matchers

Page 40: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Matchers

§  toBe §  toEqual §  toBeTruthy §  toBeNull, toBeUndefined, toBeNaN §  toContain §  toMatch §  toBeLessThan §  etc.

Page 41: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 42: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 43: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 44: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 45: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 46: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 47: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 48: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 49: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 50: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 51: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 52: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 53: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 54: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Demo

Page 55: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 56: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 57: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 58: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 59: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 60: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 61: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 62: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Demo

Page 63: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Custom  Matchers

• How  would  we  test  that  an  expense  item  is  "reasonable?"  • Problem  #1  –  We'd  like  to  use  "ToBeReasonable"  • Problem  #2  –  How  will  the  compare  pick  out  the  amount  as  the  value  to  test?  

new  ExpenseItem(  'taxi',  'Taxi  to  airport',  89.50);  

Page 64: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Custom  Matchers

Page 65: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 66: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 67: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 68: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 69: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Demo

Page 70: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 71: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Making An Expense Item

§  Delete expense.js §  Add new parameters to ExpenseItem

Page 72: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 73: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 74: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Requirement:  Persist  expenses  and    report  number  that  were  persisted  

Page 75: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 76: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 77: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 78: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 79: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 80: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 81: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Demo

Page 82: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014
Page 83: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Ques7ons?

Contact  me:    [email protected]      @jesseliberty          

Page 84: Unit Testing and Behavior Driven Testing with AngularJS - Jesse Liberty | FalafelCON 2014

Contact  Me

•  Jesse  Liberty  •  Falafel  SoFware  •  [email protected]    • @jesseliberty