test drive javascript code using jasmine.js
DESCRIPTION
A session on Applying BDD and TDD practices in JavaScript using Jasmine.js, made in AgileNCR 2013, Delhi, http://agilencr.org/. The source code for example Heatmap web application which was used in the session can be found on git https://github.com/aniltarte/heatmap.gitTRANSCRIPT
Applying BDD and TDD practices, using Jasmine.js
Anil Tarte
Phone: +91 8805024746 E-mail: [email protected]
Outline
2
• Why?
• TDD?
• BDD?
• Domain Problem for demo
• Stories
• Demonstration
• Questions
Why?
• Why to apply these practices on client side development?l Nature of web application
Realtime RIA
l Value of TDD and BDD already proven Let client side development benefit form it
l Javascript code is hard to maintain Make it more modular robust
3
TDD?
• Conceptl Add a test for each new feature/improvementl Write(evolve) production code, to pass testl Refactor (production code and test)
• Aspectl KISS (Keep It Simple, Stupid)l YAGNI (You Ain't Gonna Need It)l Fake It till you make it
• Benefitsl Design becomes more cleaner and clearerl Testable production codel Focus only on what is important
4
BDD?
• Conceptl Write/Automate a desired behavior firstl Driven by business value
• Aspectl Test method names should be sentencel It extends TDD
• Benefitsl Clear understanding of desired software behaviorl Starting pointl Encourages more collaboration, Dev + QA + BA + Customer
5
Domain Problem – Top 4 gainer?
6
Domain Problem – Heat Map
7
Stories
• Story 1 – As a trader, when I load an application, I want to see the instruments, so that …
• Story 2 – As a trader, I should able to see instruments performance visually (color coded), so that ...
• Story 3 – As a trader, I want to see latest price updating in real time, so that ...
8
Story 1
• As a trader, when I load an application, I want to see the instruments, so that I can get overview of the market
• Scenario 1l When I starts the applicationl Then I should see the instruments with below detailsl Instrument Symboll Instrument Namel Price change
9
Design Discussion – High level
Streamer Engine
Story 2
• As a trader, I want to see an instrument's performance visually, so that I can quickly understand the market conditions.
• Scenario 1l Given I have started Heat Map applicationl When I monitor the Heat Mapl Then I should see the instrument's tile color changing according to
the change in real time
11
Story 3
• As a trader, I want to see price change updating in real time, so that I am in sync with market conditions.
• Scenario 1l Given I have started Heat Map applicationl When I monitor the Heat Mapl Then I should see the instrument's price changing in real time
12
Questions?
13