Test Drive JavaScript code using Jasmine.js

772 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
772
On SlideShare
0
From Embeds
0
Number of Embeds
207
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Test Drive JavaScript code using Jasmine.js

  1. 1. Applying BDD and TDD practices, using Jasmine.jsAnil TartePhone: +91 8805024746
  2. 2. Outline• Why?• TDD?• BDD?• Domain Problem for demo• Stories• Demonstration• Questions 2
  3. 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. 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 Aint 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. 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. 6. Domain Problem – Top 4 gainer? 6
  7. 7. Domain Problem – Heat Map 7
  8. 8. Stories•Story 1 – As a trader, when I load an application, I want to see theinstruments, so that …•Story 2 – As a trader, I should able to see instruments performancevisually (color coded), so that ...•Story 3 – As a trader, I want to see latest price updating in real time,so that ... 8
  9. 9. Story 1•As a trader, when I load an application, I want to see theinstruments, 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
  10. 10. Story 2•As a trader, I want to see an instruments performance visually, sothat 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 instruments tile color changing according to the change in real time 11
  11. 11. Story 3•As a trader, I want to see price change updating in real time, so thatI 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 instruments price changing in real time 12
  12. 12. Questions? 13

×