Javascript Test Frameworks

Slide 1

Slide 1 text

JAVASCRIPT TEST FRAMEWORKS IAN YANG [email protected]

Slide 2

Slide 2 text

TABLE OF CONTENTS Frameworks Jasmine 2.0 Mocha QUnit

Slide 3

Slide 3 text

FRAMEWORKS Over 30 different frameworks listed in Wiki

Slide 4

Slide 4 text

Slide 5

Slide 5 text

COMPARISON Test Organization Assert Async Test Browser Report Debug

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 ' , - > . . .

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 )

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 )

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

BROWSER REPORT Jasmine Spec Runner

Slide 15

Slide 15 text

DETAILED ERROR MESSAGE Jasmine Spec Runner Error Message

Slide 16

Slide 16 text

DEBUG Enable pause on exceptions in Chrome Console. 1.3 does not throw exception, Set break points manually.

Slide 17

Slide 17 text

CHROME DEBUG ON EXCEPTION Chrome Debugger

Slide 18

Slide 18 text

DEMO TIME Jasmine Demo HTML Runner Test File

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 )

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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 )

Slide 24

Slide 24 text

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 )

Slide 25

Slide 25 text

Slide 26

Slide 26 text

BROWSER REPORT Mocha HTML Reporter

Slide 27

Slide 27 text

DEBUG Enable pause on exception in Chrome Supports node debug.

Slide 28

Slide 28 text

DEMO TIME Mocha Demo HTML Runner Test File

Slide 29

Slide 29 text

QUNIT XUnit test framework. Used by jQuery. Built-in assert library. No mocking. Beautiful website and report.

Slide 30

Slide 30 text

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 ' , - > . . .

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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 "

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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 )