EXPERTALKS: Jan 2012 - Applying BDD & TDD practices using Jasmine.js

220 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
220
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

EXPERTALKS: Jan 2012 - Applying BDD & TDD practices using Jasmine.js

  1. 1. Applying BDD and TDD practices, using Jasmine.js Anil Tarte atarte@equalexperts.com
  2. 2. Outline  Development Environment  What is TDD?  What is BDD?  Domain problem  Stories  Demonstration  Questions?
  3. 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. 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. 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. 6. Domain Problem Heat Map
  7. 7. Top 4 gainer?
  8. 8. Different representation - Heat Map
  9. 9. Another version
  10. 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. 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. 12. Design Discussion – Story 1 Streamer Engine Connect to – ws://localhost:8081/ HTML document Knockout bindings Application
  13. 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. 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. 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. 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. 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. 18. Thank You !!! Anil Tarte atarte@equalexperts.com

×