Project AutoMock and Jasmine: Testing Auto-magically!!

The inside story of how we stopped breaking our own code at Adobe…

About Me

• Neha Singhal – Developer at Adobe. – Active in web development and UI for the past 2.5 years. – Likes solving interesting problems involving UI and UX– On a personal front she is an avid dancer, loves to travel and is a big fan of

animated movies.

3

So how did it all begin??

4

Our Journey @ Adobe

Version 2.0 Version 3.0

Bugs by QA Team 156 15 (so far)

Regression Bugs 52 0 (so far)

Integration Bugs > 50 < 5

Bug fixing (in days) ~14 ~3

Dev validation before handoff 5 days 4 hours

Dead code (lines) ~1470 < 50

Impressed? This isn’t even the best part!

Still think testing isn’t important??

<video>

TDD: The Basics

• Development Philosophy• Execution steps :

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

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• Clean Syntax

9

Our first baby steps...

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

Let’s meet our mighty heroes...

• Matchers : utility functions– toEqual– toMatch– toBeTruthy– And lots more to list here..

12

With great power…comes an easy way to

write a test case...

With Great Power…

We can even create one of our own !!

14

Before we knew it… We were all grown up…

Unpredictable Minions of Jasmine (Async callbacks)

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

• Jasmine now supports async methods through done leaving it up to the developer 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

automatically 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..

Introducing…

“Project AutoMock”!!

Project AutoMock

Project AutoMock is an original project we are developing for mocking the entire backend

Tired??

• Tired of waiting for the backend API to be ready?• Tired of waiting for API calls to return in your test cases?• Tired of test data ruining your DB?• Tired of the long, slow process of stubbing each and

every API call?

Yeah. So were we…Let me tell you what we did about it…

20

Why Tell You… When I Can Show You…

What it does

• Automatically captures AJAX requests and responses

• Integrates well with testing frameworks like Jasmine

• Automatically creates API stubs for testing using the real captured data

The Best Part…

• Integration Guide:– For React.js

– For Angular.js

– For Backbone.js

Spot The Difference

What we have achieved so far

• No manual effort at all– Mocking API calls is now essentially an automatic process– Little to no developer intervention required to create the API stubs

• Built for speed– Test cases run much faster now that no network requests are made– The testing process is speed up considerably

• Test cases for AJAX calls no longer require async test cases. It’s instantaneous.

• No more messy code required to test each API call

24

It’s not the end… It’s the beginning of a

new era…

What good are questions...

…without answers!!

Thank You!!@Neha_Singhal