test driven development with jasmine
TRANSCRIPT
![Page 1: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/1.jpg)
Test driven development with Jasmine
![Page 2: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/2.jpg)
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.
![Page 3: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/3.jpg)
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!
![Page 4: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/4.jpg)
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….
![Page 5: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/5.jpg)
TDD : What, Why and How
How TDD
TEST
CODE
DEPLOY
INTEGRATE
RELEASE
![Page 6: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/6.jpg)
Jasmine is.. A Beautiful Disney Princess ?
![Page 7: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/7.jpg)
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
![Page 8: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/8.jpg)
Let’s preview what the final app will look like
<demo>
![Page 9: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/9.jpg)
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
![Page 10: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/10.jpg)
So let’s meet our mighty heroes..
• Matchers : utility functions– toEqual– toMatch– toBeTruthy– And lot’s more to list here..
![Page 11: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/11.jpg)
So let’s meet our mighty heroes..
• We can even create one of our own !!
<More on this in the demo>
![Page 12: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/12.jpg)
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
![Page 13: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/13.jpg)
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..
![Page 14: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/14.jpg)
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
![Page 15: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/15.jpg)
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.
![Page 16: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/16.jpg)
What good are questions...
…without answers!!
![Page 17: Test driven development with Jasmine](https://reader036.vdocuments.us/reader036/viewer/2022062320/55cf09edbb61eb15628b4603/html5/thumbnails/17.jpg)
Thank You!!