This presentation was part of EXPERTALKS: Jan 2012 conducted at Equal Experts India on 21st Jan 2012. Visit http://www.meetup.com/expertalks/ to know more. ------------------------------------------------------------------------------------- It focuses on how to create rich internet applications (RIA) by using Agile practices. This PPT accompanied a workshop conducted on the same topic.

1. Applying BDD and
TDD practices, using
Jasmine.js
Anil Tarte
atarte@equalexperts.com

2. Outline
 Development Environment
 What is TDD?
 What is BDD?
 Domain problem
 Stories
 Demonstration
 Questions?

3. Development Environment
 Eclipse
– Using Eclipse IDE for JavaScript Web
Developers
– Installed Jetty(Run-Jetty-Run) plugin.
• Help -> Eclipse Marketplace -> type Jetty -> hit enter ->
install Run-Jetty-Run
 Backend Server(Streamer.jar),
– URL to access it “ws://localhost:8081/”
– It is a Streaming Engine and a Stub
Exchange

4. Test Driven Development (TDD)?
 Concept
– Add a test for each new feature/improvement
– Write production code, to pass test
– Refactor
 Aspect
– KISS (Keep It Simple, Stupid)
– YAGNI (You Ain’t Goona Need It)
– Fake it till you make it
 Benefits
– Designs become more cleaner and clearer
– Testable code
– Focus only on what is important

5. Behaviour Driven Development (BDD)?
 Concept
– Write/Automate a desired behaviour first (in natural
language)
– Driven by business value
 Aspect
– Test method names should be sentence
– It extends TDD
 Benefits
– Clear understanding of desired software behaviour
– Starting point
– Encourages more collaboration, Dev + QA + BA +
Customer

6. Domain Problem
Heat Map

7. Top 4 gainer?

8. Different representation - Heat Map

9. Another version

10. Stories – Identify?
 Story 1 – As a trader, when I load
application, I want to see the instruments, so
that …
 Story 2 – As a trader, I want to see “price
change” updating in real time, so that …
 Story 3 – As a trader, I should able to see
instruments performance visually(color
coded), so that I will get overview of the market in
real time

11. Story 1
 As a trader, when I load application, I want to
see the instruments, so that …
 Scenario 1
– When a trader starts the application
– Then I will see the instruments with details
• Instrument Symbol
• Instrument Name
• Price change in percentage

12. Design Discussion – Story 1
Streamer
Engine
Connect to – ws://localhost:8081/
HTML document
Knockout
bindings
Application

13. Design Discussion – Story 1
Streamer
EngineChannel
Connect to – ws://localhost:8081/
/Instrument
{
messageType:"Snapshot",
message : {[
{
"instrumentSymbol":"PL Z11",
"instrumentName":"Platinum",
"instrumentChange":"-3.9“
}
]}
}
Instrument
Container
Application
HTML document
Knockout
bindings

14. Story 2
 As a trader, I want to see “price change”
updating in real time.
 Scenario 1
– Given I have launched Heat Map application
– When I monitor the Heat Map
– Then I will see the instrument’s “price change”
updates in real time

15. Design Discussion – Story 2
Streamer
EngineChannel
Connect to – ws://localhost:8081/
/Instrument
{
messageType:“Update",
message : {[
{
"instrumentName":"Platinum",
"instrumentChange":"-3.9“
}
]}
}
Instrument
Container
Application
HTML documents
Knockout
bindings
Instrument

16. Story 3
 As a trader, I should able to see instrument’s
performance visually.
 Scenario 1
– Given I have launched Heat Map application
– When I monitor the Heat Map
– Then I will see the instrument’s tile color changing
according to the “price change” in real time

17. Design Discussion – Story 3
Streamer
EngineChannel
Connect to – ws://localhost:8081/
/Instrument
Instrument
Container
Application
HTML documents
Knockout
bindings
Instrument
Color Code
Calculator

18. Thank You !!!
Anil Tarte
atarte@equalexperts.com