Look Ma, No Server! – Testing Front End Code Without a Server

View Github Repository Open presentation in a new window

jakerella

See all presentation from jakerella

Look Ma, No Server! – Testing Front End Code Without a Server

0 0

no-back-end

Testing Front End Code Without a Server slides

On Github jakerella / no-back-end

Look Ma, No Server!

Testing Front End Code Without a Server

Jordan Kasper

Then the Queen left off, quite out of breath, and said to Alice, "Have you seen the Mock Turtle yet?" "No," said Alice. "I don't even know what a Mock Turtle is." "It's the thing Mock Turtle Soup is made from," said the Queen. -- From Alice's Adventures in Wonderland, Chapter 9

The Situation:

http://theshorereporter.blogspot.com/p/cast.html

You have a data-driven appication...

http://www.compositesw.com/data-virtualization/data-services/

And you have a thick client appusing these data services...

And you have JavaScript tests...

// /test/front-end.js

// Note to future self: write tests.

// Note from future self: thanks, jerk.

You want to have JavaScript Tests...

Web Application Testing

http://www.aventure.ac.in/the-russian-riddle/

The Plan:

Test our client application code No changes to our application source code Handle successes and errors Test both expected and unexpected data

How do we do that?

Ajax

This is an actual movie (minus the "Ajax" bit): After the passing away of his wife, Pooja, Delhi-based Vikram Madan, enrolls his daughter, Priya, in a boarding school in Amritsar, and re-locates to work as a Mechanic at Chandigarh Airport. His daughter informs him that she is on her way to Amritsar on a hostel-trip on Indian Airlines Flight IC147. Shortly thereafter, Vikram will be informed that the flight has been hijacked to Dubai by Islamic terrorists, who want the Indian government to release one of their comrades, Rashid Omar, or else they will start killing the passengers and crew one by one at half-hour intervals.

The Hunger Tests: Mockingjax

Intercept the XMLHttpRequest Inspect the URL, headers, and data Execute callbacks with mock data http://www.imdb.com/media/rm550033152/tt1951265?ref_=ttmd_md_pv

The Execution:

Tools Galore

What should I use?

Whatever makes your workflow easier.

Not Helpful.

Yes, it is.

Let's look at some sample code...

Beer

Search for a beer

Mark a beer as a "favorite"

Rate a beer

http://pngimg.com/download/2330 

                

                

                
Pseudo Test-code

                    
Just like real tests, except they actually pass.


                    http://blakehall.github.io/tugboat-session-slides
                

                

                

                

                

                

                        But what happens when the server goes down?
                    

                
Idempotency

                    
Just like real potency, only more idem.

                

                
This is great, but I don'tlive in the pseudo world...


                    
... or do you?

                
jQuery Mockjax

                    

                    

                
jQuery Mockjax

                    

                
jQuery Mockjax

                    

                
jQuery Mockjax

                    

                
jQuery Mockjax

                    

                
jQuery Mockjax

                    

                
Angular: ng-mocks and $httpBackend


                    

                    
<html ng-app='testApp'>
                    

                
Angular Mocks

                    

                
Angular Mocks

                    

                
Angular Mocks

                    

                
Jasmine.ajax

                    

                
Jasmine.ajax

                    

                
Jasmine.ajax

                    

                
Jasmine.ajax

                    

                
Sinon

                    

                
Sinon

                    

                
Sinon

                    

                
Wrapping Things Up


                    
Test your JavaScript code. ಠ_ಠ

                    
Don't rely on external services (even your own).

                    
Find a library that works for you!


                    http://chainchomp2.deviantart.com/art/Rapper-Ponies-450348867
                
Thank You!

                    

                        Jordan Kasper@jakerella | bit.ly/no-server
                    


                    

                        Example code: beer.jstest-search.js, 
                        test-favorite.js, 
                        test-rating.jsMockjax,
                        ng-mocks,
                        jasmin.ajax,
                        Sinon
                    

                
MOAR EXAMPLES

                
jQuery Mockjax

                    
asynchronous mock response

                    

                
jQuery Mockjax

                    
forced lag; response headers

                    

                
jQuery Mockjax

                    
forced timeout

                    

                
jQuery Mockjax

                    
external data (proxy)

                    

                
jQuery Mockjax

                    
custom matching; external data (proxy)

                    

                
jQuery Mockjax

                    
request header matching