jQuery Plugins
& Jasmine
A lightning quick example
@mparramon
What?
With
· some useful js code
Create
· a full-fledged jQuery
plugin
· with unit testing
File inputs in some browsers:
The problem
let's fix it!
· add styling
· custom button
· initial value
Based on quirksmode.org/dom/inputfile.html
jQuery plugin
http://docs.jquery.com/Plugins/Authoring
Basic Framework
Defaults and options
Mantaining chainability
Unit testing with Jasmine
http://pivotal.github.com/jasmine/
Initial setup
Modify SpecRunner.html:
DSL
jasmine-jquery
2 extensions for Jasmine:
· an HTML fixtures API
· a set of jQuery custom matchers
https://github.com/veles...
Fixtures
Expectations
Our final code
jquery-enhancedfileinput
↳ lib
↳ jasmine-1.3.0
spec
↳ jquery-enhancedfileinput_spec.js
↳ jasmine-jquery-1.3...
No time!
@mparramon
github.com/mparramont
Questions?
Upcoming SlideShare
Loading in...5
×

jQuery plugin & testing with Jasmine

2,772

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,772
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery plugin & testing with Jasmine"

  1. 1. jQuery Plugins & Jasmine A lightning quick example @mparramon
  2. 2. What? With · some useful js code Create · a full-fledged jQuery plugin · with unit testing
  3. 3. File inputs in some browsers: The problem
  4. 4. let's fix it! · add styling · custom button · initial value Based on quirksmode.org/dom/inputfile.html
  5. 5. jQuery plugin http://docs.jquery.com/Plugins/Authoring
  6. 6. Basic Framework
  7. 7. Defaults and options
  8. 8. Mantaining chainability
  9. 9. Unit testing with Jasmine http://pivotal.github.com/jasmine/
  10. 10. Initial setup Modify SpecRunner.html:
  11. 11. DSL
  12. 12. jasmine-jquery 2 extensions for Jasmine: · an HTML fixtures API · a set of jQuery custom matchers https://github.com/velesin/jasmine-jquery
  13. 13. Fixtures
  14. 14. Expectations
  15. 15. Our final code jquery-enhancedfileinput ↳ lib ↳ jasmine-1.3.0 spec ↳ jquery-enhancedfileinput_spec.js ↳ jasmine-jquery-1.3.1.js src ↳ jquery-enhancedfileinput.js ↳ demo.html ↳ README.md ↳ SpecRunner.html
  16. 16. No time! @mparramon github.com/mparramont Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×