Applying BDD/TDD practices, using Jasmine.js

© Equal Experts UK Ltd 2011 www.equalexperts.com 1

Applying BDD and TDD practices, using Jasmine.js

- Anil Tarte


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


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


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


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


Domain Problem

Heat Map


Top 4 gainer?


Different representation - Heat Map


Another version


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


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


Design Discussion – Story 1

Streamer Engine

Connect to – ws://localhost:8081/

HTML document

Knockout bindings

Application



Streamer EngineChannel


/Instrument

{messageType:"Snapshot",message : {[

{ "instrumentSymbol":"PL Z11", "instrumentName":"Platinum", "instrumentChange":"-3.9“}

]}}

Instrument Container

Application

HTML document

Knockout bindings


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





/Instrument

{messageType:“Update",message : {[

{ "instrumentName":"Platinum", "instrumentChange":"-3.9“}

]}}


Application

HTML documents

Knockout bindings

Instrument


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





/Instrument


Application

HTML documents

Knockout bindings

Instrument

Color Code Calculator


Questions?

Technology

Applying BDD/TDD practices, using Jasmine.js