Over the past decade, eXtreme Programming practices like Test-Driven Development (TDD), Behavior Driven Developer (BDD), Refactoring and Continuous Integration have fundamentally changed software development processes and inherently how engineers work. Practitioners claim that it has helped them significantly improve their development speed, design quality and responsiveness to changing requirements. Software professionals across the board, from Internet startups to medical device companies to space research organizations, today have embraced these practices. But can these practices be applied to front-end development? Especially jQuery plugin development? This demo will show how we can test drive a jQuery plugin with the help of various patterns, strategies, tools and techniques. Participants will understand how they can apply this approach for testing any jQuery code.

1. Naresh Jain
@nashjain
http://nareshjain.com
Test-driving a jQuery Plugin

2. A G E N D A - 9 0 M I N S
• Basic Setup (WebStorm, NPM, Jasmine, Karma, …)
• Live Demo of Test Driving a Comments jQuery Plugin
• Moving towards a MVVM design pattern
• Stubbing out AJAX calls
• Next Steps…

3. W E P L A N T O B U I L D T H I S …

4. Add a Test
Run the Test
Make a little
change
Run the Test
Refactor
Fail
Pass
Fail
Pass
TDD Rhythm
Test, Code, Refactor

5. B A S I C S E T U P
• cd ~/Sites
• git clone git@github.com:nashjain/jQCommentDemo.git
• cd jQCommentDemo
• npm update
• sudo npm install -g karma-cli
• karma init
• Create a Simple Jasmine Spec
• karma test

6. O U R P L U G I N ’ S F E AT U R E S
• Should be able to accept a comments json or an URL
to fetch the comments json from server
• Should display more recent comments on top
• Private comments should be displayed only to the
author of the comment
• Others should be able to like your comment
• and so on…

7. R E F E R E N C E S
• https://learn.jquery.com/plugins/basic-plugin-creation/
• http://jasmine.github.io/2.3/introduction.html
• https://github.com/velesin/jasmine-jquery
• https://github.com/jasmine/jasmine-ajax
• http://karma-runner.github.io/0.13/index.html

8. Naresh Jain
@nashjain
http://nareshjain.com
Thank you!