Test driven development with Jasmine

About Us

• Neha Singhal – Developer at Adobe. – Active in web development and UI for the past 2.5 years. – Likes solving interesting problems involving UX, cross-browser issues and maintainability

of code. – On a personal front, an avid dancer, loves to travel and is a big fan of animated movies.

• Harshit Jain – Developer at Adobe. – Web developer for 2 years with a passion for good UI/UX. – Likes solving usability and performance issues with his team. – Enjoys music and playing his guitar in his free time. – Loves hacking away on new libraries and frameworks, trying to figure out if he can use it

for his next project.

TDD : What, Why and How

What is TDD• Development Ideology• Execution steps :

– Add a test – Watch it fail (Cry silently)– Write Code– Watch It Pass– Celebrate– Repeat!

TDD : What, Why and How

Why TDD• Validates your design• Gives confidence• Provides rapid feedback• Maintains quality of

implementation• Is automated• No dead code• Easy maintenance• Early issue discovery• List goes on and on….

TDD : What, Why and How

How TDD

TEST

CODE

DEPLOY

INTEGRATE

RELEASE

Jasmine is.. A Beautiful Disney Princess ?

Just Kidding..

Jasmine is..

• Javascript Testing Framework• Independent of browsers, DOM • Supports multiple javascript frameworks• Headless running out of the box• Easy to use• Clean Syntax

Let’s preview what the final app will look like

<demo>

So let’s meet our mighty heroes..

• Suite : to describe a section of your code

• Specs: it creates a new spec

• Expectations : what you expect the code block to do

So let’s meet our mighty heroes..

• Matchers : utility functions– toEqual– toMatch– toBeTruthy– And lot’s more to list here..

So let’s meet our mighty heroes..

• We can even create one of our own !!

<More on this in the demo>

Unpredictable Minions of Jasmine (Async callbacks)

• You never know when and what they are gonna do.. (just like async callbacks)

• Jasmine now supports async methods through done leaving it up to the dev to control the execution flow.

• Setup– Jasmine lets you setup tests by running code before all/each test

• Teardown– You can also run cleanup after all tests or after each test

Let’s pull the rabbit out of the hat..

• What if we told you there was a way to mock your entire backend without having to touch the source code or add specific test code…– Feels like magic doesn’t it?......Wait for it..

Let’s pull the rabbit out of the hat..

• MOCKJAX !!

– Mockjax is a jquery plugin which provides a way to fake ajax request/response.

– It’s a standalone library that plays well with Jasmine– The best part -> it requires no code change!!– It intercepts the backend calls with the provided custom data

Wanna be a SPY??• Jasmine spies are like double-

agents.• They can replace any ordinary

function and can report what they are doing.

• Every call to a spy is tracked and exposed.

• They can even invoke the original function which they replaced.

What good are questions...

…without answers!!

Thank You!!