Javascript Test Frameworks

Introduction to Jasmine, Mocha and QUnit

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 )
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