SlideShare a Scribd company logo
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/velesin/jasmine-jquery
Fixtures
Expectations
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
No time!
@mparramon
github.com/mparramont
Questions?

More Related Content

What's hot (20)

Writing java script for Csharp's Blazor
Writing java script for Csharp's Blazor
Ed Charbeneau
 
From devOps to front end Ops, test first
From devOps to front end Ops, test first
Caesar Chi
 
Gradle
Gradle
Return on Intelligence
 
Branching Strategies For Git and Subversion
Branching Strategies For Git and Subversion
Elian, I.
 
"How to deploy to production 10 times a day" Андрей Шумада
"How to deploy to production 10 times a day" Андрей Шумада
Fwdays
 
Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!
Eric Wendelin
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...
Fwdays
 
Hands on the Gradle
Hands on the Gradle
Matthias Käppler
 
Building Rich Internet Applications Using Google Web Toolkit
Building Rich Internet Applications Using Google Web Toolkit
rajivmordani
 
Gradle by Example
Gradle by Example
Eric Wendelin
 
Groovy in the Cloud
Groovy in the Cloud
Daniel Woods
 
Tips & Tricks for Maven Tycho
Tips & Tricks for Maven Tycho
Gunnar Wagenknecht
 
[WroclawJUG] Continuous Delivery in OSS using Shipkit
[WroclawJUG] Continuous Delivery in OSS using Shipkit
MarcinStachniuk
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
chbornet
 
Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01
rhemsolutions
 
Continuous Delivery in OSS using Shipkit.org
Continuous Delivery in OSS using Shipkit.org
MarcinStachniuk
 
Maven beyond hello_world
Maven beyond hello_world
Gabriel Dogaru
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
Eclipse Buildship JUG Hamburg
Eclipse Buildship JUG Hamburg
simonscholz
 
Writing java script for Csharp's Blazor
Writing java script for Csharp's Blazor
Ed Charbeneau
 
From devOps to front end Ops, test first
From devOps to front end Ops, test first
Caesar Chi
 
Branching Strategies For Git and Subversion
Branching Strategies For Git and Subversion
Elian, I.
 
"How to deploy to production 10 times a day" Андрей Шумада
"How to deploy to production 10 times a day" Андрей Шумада
Fwdays
 
Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!
Eric Wendelin
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...
Fwdays
 
Building Rich Internet Applications Using Google Web Toolkit
Building Rich Internet Applications Using Google Web Toolkit
rajivmordani
 
Groovy in the Cloud
Groovy in the Cloud
Daniel Woods
 
[WroclawJUG] Continuous Delivery in OSS using Shipkit
[WroclawJUG] Continuous Delivery in OSS using Shipkit
MarcinStachniuk
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
chbornet
 
Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01
rhemsolutions
 
Continuous Delivery in OSS using Shipkit.org
Continuous Delivery in OSS using Shipkit.org
MarcinStachniuk
 
Maven beyond hello_world
Maven beyond hello_world
Gabriel Dogaru
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
Eclipse Buildship JUG Hamburg
Eclipse Buildship JUG Hamburg
simonscholz
 

Viewers also liked (9)

MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)
MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)
Alex Rupérez
 
NSCoder Keynote - Multipeer Connectivity Framework
NSCoder Keynote - Multipeer Connectivity Framework
Alex Rupérez
 
Gigigo Keynote - Geofences & iBeacons
Gigigo Keynote - Geofences & iBeacons
Alex Rupérez
 
Gigigo Workshop - Create an iOS Framework, document it and not die trying
Gigigo Workshop - Create an iOS Framework, document it and not die trying
Alex Rupérez
 
Gigigo Workshop - iOS Extensions
Gigigo Workshop - iOS Extensions
Alex Rupérez
 
Fundementals skills
Fundementals skills
itchomecare
 
Fundementals competencies
Fundementals competencies
itchomecare
 
1. roles and responsibilities within the agency and community
1. roles and responsibilities within the agency and community
itchomecare
 
HTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)
MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)
Alex Rupérez
 
NSCoder Keynote - Multipeer Connectivity Framework
NSCoder Keynote - Multipeer Connectivity Framework
Alex Rupérez
 
Gigigo Keynote - Geofences & iBeacons
Gigigo Keynote - Geofences & iBeacons
Alex Rupérez
 
Gigigo Workshop - Create an iOS Framework, document it and not die trying
Gigigo Workshop - Create an iOS Framework, document it and not die trying
Alex Rupérez
 
Gigigo Workshop - iOS Extensions
Gigigo Workshop - iOS Extensions
Alex Rupérez
 
Fundementals skills
Fundementals skills
itchomecare
 
Fundementals competencies
Fundementals competencies
itchomecare
 
1. roles and responsibilities within the agency and community
1. roles and responsibilities within the agency and community
itchomecare
 
Ad

Similar to jQuery plugin & testing with Jasmine (20)

JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
Eric Wendelin
 
Yeoman
Yeoman
arybik
 
Joomla! Testing - J!DD Germany 2016
Joomla! Testing - J!DD Germany 2016
Yves Hoppe
 
Jasmine with JS-Test-Driver
Jasmine with JS-Test-Driver
Devesh Chanchlani
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
DECK36
 
Testing with Codeception
Testing with Codeception
Jeremy Coates
 
Automation Zaman Now
Automation Zaman Now
Ibnu Fajar Yunardi
 
Performance Testing using Real Browsers with JMeter & Webdriver
Performance Testing using Real Browsers with JMeter & Webdriver
BlazeMeter
 
Unit Testing with Jest
Unit Testing with Jest
Maayan Glikser
 
Unit Testing in AngularJS - CC FE & UX
Unit Testing in AngularJS - CC FE & UX
JWORKS powered by Ordina
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
Andrey Kolodnitsky
 
JavaScript Unit Testing
JavaScript Unit Testing
Christian Johansen
 
Cpsc 473 01 lightning talk
Cpsc 473 01 lightning talk
Ketul Shah
 
Angular Intermediate
Angular Intermediate
LinkMe Srl
 
Protractor framework architecture with example
Protractor framework architecture with example
shadabgilani
 
Grooscript greach
Grooscript greach
Jorge Franco Leza
 
Deep Dive Into NightWatch- Workshop by Pallavi Sharma.pdf
Deep Dive Into NightWatch- Workshop by Pallavi Sharma.pdf
Pallavi Sharma
 
Angular + JHipster - JHipster Conf
Angular + JHipster - JHipster Conf
William Marques
 
Behat Workshop at WeLovePHP
Behat Workshop at WeLovePHP
Marcos Quesada
 
Selenium-Browser-Based-Automated-Testing-for-Grails-Apps
Selenium-Browser-Based-Automated-Testing-for-Grails-Apps
chrisb206 chrisb206
 
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
Eric Wendelin
 
Yeoman
Yeoman
arybik
 
Joomla! Testing - J!DD Germany 2016
Joomla! Testing - J!DD Germany 2016
Yves Hoppe
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
DECK36
 
Testing with Codeception
Testing with Codeception
Jeremy Coates
 
Performance Testing using Real Browsers with JMeter & Webdriver
Performance Testing using Real Browsers with JMeter & Webdriver
BlazeMeter
 
Unit Testing with Jest
Unit Testing with Jest
Maayan Glikser
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
Andrey Kolodnitsky
 
Cpsc 473 01 lightning talk
Cpsc 473 01 lightning talk
Ketul Shah
 
Angular Intermediate
Angular Intermediate
LinkMe Srl
 
Protractor framework architecture with example
Protractor framework architecture with example
shadabgilani
 
Deep Dive Into NightWatch- Workshop by Pallavi Sharma.pdf
Deep Dive Into NightWatch- Workshop by Pallavi Sharma.pdf
Pallavi Sharma
 
Angular + JHipster - JHipster Conf
Angular + JHipster - JHipster Conf
William Marques
 
Behat Workshop at WeLovePHP
Behat Workshop at WeLovePHP
Marcos Quesada
 
Selenium-Browser-Based-Automated-Testing-for-Grails-Apps
Selenium-Browser-Based-Automated-Testing-for-Grails-Apps
chrisb206 chrisb206
 
Ad

Recently uploaded (20)

FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 

jQuery plugin & testing with Jasmine