Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Test Frameworks

17bca47a4961a24f82ef972aa9e1c986?s=47 Ian Yang
August 24, 2013

Javascript Test Frameworks

Introduction to Jasmine, Mocha and QUnit

17bca47a4961a24f82ef972aa9e1c986?s=128

Ian Yang

August 24, 2013
Tweet

Transcript

  1. JAVASCRIPT TEST FRAMEWORKS IAN YANG ME@IANY.ME

  2. TABLE OF CONTENTS Frameworks Jasmine 2.0 Mocha QUnit

  3. FRAMEWORKS Over 30 different frameworks listed in Wiki

  4. MOST POPULAR Jasmine Mocha QUnit

  5. COMPARISON Test Organization Assert Async Test Browser Report Debug

  6. JASMINE 2.0 A behavior-driven development framework. Built-in assert library Built-in

    mocking
  7. TEST ORGANIZATION RSpec style d e s c r i

    b e ' 1 + 1 ' , - > i t ' e q u a l s t o 2 ' , - > . . . d e s c r i b e ' u s i n g b i n a r y ' , - > i t ' e q u a l s t o 1 0 ' , - > . . .
  8. SETUP AND TEARDOWN d e s c r i b

    e ' 1 + 1 ' , - > a = n i l ; b = n i l # c o n t e x t i s s h a r e d b e t w e e n h o o k s a n d t e s t s b e f o r e - > # r u n o n c e b e f o r e a l l t e s t s i n t h i s s u i t e a = 1 ; b = 1 a f t e r - > # r u n o n c e a f t e r a l l t e s t s i n t h i s s u i t e b e f o r e E a c h - > @ r e s u l t = a + b a f t e r E a c h - > i t ' e q u a l s t o 2 ' , - > c o n s o l e . l o g @ r e s u l t
  9. ASSERT Built-in e x p e c t , matchers

    are extensible. e x p e c t ( 1 + 1 ) . t o E q u a l ( 2 ) e x p e c t ( m e s s a g e ) . n o t . t o M a t c h ( / O p p s / )
  10. ASYNC TEST d e s c r i b e

    ' A s y n c T e s t ' , - > a = b = n u l l b e f o r e E a c h ( d o n e ) - > s e t T i m e o u t ( ( - > a = b = 1 ; d o n e ( ) ) , 5 0 0 ) i t ' p a s s e s ' , ( d o n e ) - > s e t T i m e o u t ( ( - > e x p e c t ( a + b ) . t o E q u a l ( 2 ) d o n e ( ) ) , 5 0 0 )
  11. ASYNC TEST 1.3 WAY Manual test and wait. Split test

    into r u n s and w a i t s F o r . Test fails when w a i t s F o r times out. wiki:Asynchronous-specs
  12. ASYNC TEST 1.3 EXAMPLE d e s c r i

    b e ' A s y n c T e s t ' , - > a = b = n u l l b e f o r e E a c h - > d o n e = f a l s e r u n s - > s e t T i m e o u t ( ( - > a = b = 1 ; d o n e = t r u e ) , 5 0 0 ) w a i t s F o r ( ( - > d o n e ) , " S h o u l d f i n i s h " , 7 5 0 ) i t ' p a s s e s ' , - > d o n e = f a l s e r e s u l t = n u l l r u n s - > s e t T i m e o u t ( ( - > r e s u l t = a + b d o n e = t r u e ) , 5 0 0 ) w a i t s F o r ( ( - > d o n e ) , " S h o u l d f i n i s h " , 7 5 0 ) r u n s - > e x p e c t ( r e s u l t ) . t o E q u a l ( 2 )
  13. None
  14. BROWSER REPORT Jasmine Spec Runner

  15. DETAILED ERROR MESSAGE Jasmine Spec Runner Error Message

  16. DEBUG Enable pause on exceptions in Chrome Console. 1.3 does

    not throw exception, Set break points manually.
  17. CHROME DEBUG ON EXCEPTION Chrome Debugger

  18. DEMO TIME Jasmine Demo HTML Runner Test File

  19. MOCHA Configurable interface: tdd, bdd, export. Integrate , , or

    as assert library. No mocking. Easy to use async test. chai should.js expect.js better-assert
  20. TEST ORGANIZATION: TDD s u i t e ' A

    r r a y ' , - > s e t u p - > # . . . s u i t e ' # i n d e x O f ( ) ' , - > t e s t ' s h o u l d r e t u r n - 1 w h e n n o t p r e s e n t ' , - > a s s e r t . e q u a l ( - 1 , [ 1 , 2 , 3 ] . i n d e x O f ( 4 ) )
  21. TEST ORGANIZATION: BDD d e s c r i b

    e ' A r r a y ' , - > b e f o r e - > # . . . d e s c r i b e ' # i n d e x O f ( ) ' , - > i t ' s h o u l d r e t u r n - 1 w h e n n o t p r e s e n t ' , - > [ 1 , 2 , 3 ] . i n d e x O f ( 4 ) . s h o u l d . e q u a l ( - 1 )
  22. ASSERT: CHAI ASSERT a s s e r t =

    r e q u i r e ( ' c h a i ' ) . a s s e r t f o o = ' b a r ' b e v e r a g e s = { t e a : [ ' c h a i ' , ' m a t c h a ' , ' o o l o n g ' ] } a s s e r t . t y p e O f ( f o o , ' s t r i n g ' , ' f o o i s a s t r i n g ' ) a s s e r t . e q u a l ( f o o , ' b a r ' , ' f o o e q u a l ` b a r ` ' ) a s s e r t . l e n g t h O f ( f o o , 3 , ' f o o ` s v a l u e h a s a l e n g t h o f 3 ' ) a s s e r t . l e n g t h O f ( b e v e r a g e s . t e a , 3 , ' b e v e r a g e s h a s 3 t y p e s o f t e a ' )
  23. ASSERT: CHAI EXPECT v a r e x p e

    c t = r e q u i r e ( ' c h a i ' ) . e x p e c t f o o = ' b a r ' b e v e r a g e s = { t e a : [ ' c h a i ' , ' m a t c h a ' , ' o o l o n g ' ] } e x p e c t ( f o o ) . t o . b e . a ( ' s t r i n g ' ) e x p e c t ( f o o ) . t o . e q u a l ( ' b a r ' ) e x p e c t ( f o o ) . t o . h a v e . l e n g t h ( 3 ) e x p e c t ( b e v e r a g e s ) . t o . h a v e . p r o p e r t y ( ' t e a ' ) . w i t h . l e n g t h ( 3 )
  24. ASSERT: CHAI SHOULD s h o u l d =

    r e q u i r e ( ' c h a i ' ) . s h o u l d ( ) # a c t u a l l y c a l l t h e t h e f u n c t i o n f o o = ' b a r ' b e v e r a g e s = { t e a : [ ' c h a i ' , ' m a t c h a ' , ' o o l o n g ' ] } f o o . s h o u l d . b e . a ( ' s t r i n g ' ) f o o . s h o u l d . e q u a l ( ' b a r ' ) f o o . s h o u l d . h a v e . l e n g t h ( 3 ) b e v e r a g e s . s h o u l d . h a v e . p r o p e r t y ( ' t e a ' ) . w i t h . l e n g t h ( 3 )
  25. ASYNC TEST d e s c r i b e

    ' A s y n c T e s t ' , - > a = b = n u l l b e f o r e E a c h ( d o n e ) - > s e t T i m e o u t ( ( - > a = b = 1 ; d o n e ( ) ) , 5 0 0 ) i t ' p a s s e s ' , ( d o n e ) - > s e t T i m e o u t ( ( - > e x p e c t ( a + b ) . t o E q u a l ( 2 ) d o n e ( ) ) , 5 0 0 ) Looks familiar?
  26. BROWSER REPORT Mocha HTML Reporter

  27. DEBUG Enable pause on exception in Chrome Supports node debug.

  28. DEMO TIME Mocha Demo HTML Runner Test File

  29. QUNIT XUnit test framework. Used by jQuery. Built-in assert library.

    No mocking. Beautiful website and report.
  30. TEST ORGANIZATION Cannot nest module. m o d u l

    e ' a d d i t i o n ' , - > t e s t ' 1 + 1 = 2 ' , - > . . . m o d u l e ' b i n a r y a d d i t i o n ' , - > t e s t ' 1 + 1 = 1 0 ' , - > . . .
  31. SETUP AND TEARDOWN m o d u l e "

    m o d u l e " , s e t u p : - > o k t r u e , " o n e e x t r a a s s e r t p e r t e s t " t e a r d o w n : - > o k t r u e , " a n d o n e e x t r a a s s e r t a f t e r e a c h t e s t " t e s t " t e s t w i t h s e t u p a n d t e a r d o w n " , - > e x p e c t 2 Calling m o d u l e ( ) again without setup/teardown will reset them.
  32. ASSERT o k t r u e , " t

    r u e s u c c e e d s " # e q u a l a c t u a l , e x p e c t e d , m e s s a g e e q u a l 0 , 0 , " Z e r o ; e q u a l s u c c e e d s " n o t E q u a l 0 , 1 o b j = f o o : ' b a r ' d e e p E q u a l o b j , f o o : ' b a r ' t h r o w s ( ( - > t h r o w " e r r o r " ) , " d e s c r i p t i o n " )
  33. EXPECT Occasionally, circumstances in your code may prevent callback assertions

    to never be called, causing the test to fail silently. # O r t e s t " a t e s t " , 2 , - > . . . t e s t " a t e s t " , f u n c t i o n ( ) { e x p e c t 2 c a l c = ( x , o p e r a t i o n ) - > o p e r a t i o n x r e s u l t = c a l c 2 , ( x ) - > o k t r u e , " c a l c ( ) c a l l s o p e r a t i o n f u n c t i o n " x * x e q u a l r e s u l t , 4 , " 2 s q u a r e e q u a l s 4 "
  34. ASYNC TEST Call s t o p ( ) so

    QUnit will not finish the test after function returns. Call s t a r t ( ) to resume the test executation. a s y n c T e s t ( ) auto stop before returns.
  35. ASYNC TEST EXAMPLE a = b = n u l

    l m o d u l e ' A s y n c T e s t ' , - > s e t u p - > s t o p ( ) s e t T i m e o u t ( ( - > a = b = 1 ; s t a r t ( ) ) , 5 0 0 ) a s y n c T e s t ' p a s s e s ' , - > e x p e c t 1 s e t T i m e o u t ( ( - > e q u a l a + b , 2 s t a r t ( ) ) , 5 0 0 )
  36. BROWSER REPORT QUnit Example

  37. DEBUG Enable pause on exception in Chrome

  38. DEMO TIME QUnit Demo HTML Runner Test File