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

1. Applying BDD and TDD
practices, using Jasmine.js
Anil Tarte
Phone: +91 8805024746

2. Outline
• Why?
• TDD?
• BDD?
• Domain Problem for demo
• Stories
• Demonstration
• Questions
2

3. Why?
•Why to apply these practices on client side development?
lNature of web application
Realtime
RIA
lValue of TDD and BDD
already proven
Let client side development benefit form it
lJavascript code is hard to maintain
Make it more modular
robust
3

4. TDD?
•Concept
lAdd a test for each new feature/improvement
lWrite(evolve) production code, to pass test
lRefactor (production code and test)
•Aspect
lKISS (Keep It Simple, Stupid)
lYAGNI (You Ain't Gonna Need It)
lFake It till you make it
•Benefits
lDesign becomes more cleaner and clearer
lTestable production code
lFocus only on what is important
4

5. BDD?
•Concept
lWrite/Automate a desired behavior first
lDriven by business value
•Aspect
lTest method names should be sentence
lIt extends TDD
•Benefits
lClear understanding of desired software behavior
lStarting point
lEncourages more collaboration, Dev + QA + BA + Customer
5

6. Domain Problem – Top 4 gainer?
6

7. Domain Problem – Heat Map
7

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

9. 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 1
lWhen I starts the application
lThen I should see the instruments with below details
lInstrument Symbol
lInstrument Name
lPrice change
9

11. Story 2
•As a trader, I want to see an instrument's performance visually, so
that I can quickly understand the market conditions.
•Scenario 1
lGiven I have started Heat Map application
lWhen I monitor the Heat Map
lThen I should see the instrument's tile color changing according
to the change in real time
11

12. 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 1
lGiven I have started Heat Map application
lWhen I monitor the Heat Map
lThen I should see the instrument's price changing in real time
12

13. Questions?
13