test drive javascript code using jasmine.js

13
Applying BDD and TDD practices, using Jasmine.js Anil Tarte Phone: +91 8805024746 E-mail: [email protected]

Upload: aniltarte

Post on 17-Dec-2014

508 views

Category:

Education


1 download

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

TRANSCRIPT

Page 1: Test Drive JavaScript code using Jasmine.js

Applying BDD and TDD practices, using Jasmine.js

Anil Tarte

Phone: +91 8805024746 E-mail: [email protected] 

Page 2: Test Drive JavaScript code using Jasmine.js

Outline

2

• Why?

• TDD?

• BDD?

• Domain Problem for demo

• Stories

• Demonstration

• Questions

Page 3: Test Drive JavaScript code using Jasmine.js

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

Page 4: Test Drive JavaScript code using Jasmine.js

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

Page 5: Test Drive JavaScript code using Jasmine.js

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

Page 6: Test Drive JavaScript code using Jasmine.js

Domain Problem – Top 4 gainer?

6

Page 7: Test Drive JavaScript code using Jasmine.js

Domain Problem – Heat Map

7

Page 8: Test Drive JavaScript code using Jasmine.js

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

Page 9: Test Drive JavaScript code using Jasmine.js

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

Page 10: Test Drive JavaScript code using Jasmine.js

Design Discussion – High level

Streamer Engine

Page 11: Test Drive JavaScript code using Jasmine.js

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

Page 12: Test Drive JavaScript code using Jasmine.js

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

Page 13: Test Drive JavaScript code using Jasmine.js

Questions?

13