jQuery plugin & testing with Jasmine

•

1 like•5,067 views

Miguel Parramón Teixidó

Technology

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

Unit testing with Jasmine
http://pivotal.github.com/jasmine/

jasmine-jquery
2 extensions for Jasmine:
· an HTML fixtures API
· a set of jQuery custom matchers
https://github.com/velesin/jasmine-jquery

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?

What's hot

Writing java script for Csharp's BlazorEd Charbeneau

From devOps to front end Ops, test firstCaesar Chi

GradleReturn on Intelligence

Branching Strategies For Git and SubversionElian, I.

"How to deploy to production 10 times a day" Андрей ШумадаFwdays

Gradle 3.0: Unleash the Daemon!Eric Wendelin

"The Story of Declarative React at Grammarly: From two-way data binding with ...Fwdays

Hands on the GradleMatthias Käppler

Building Rich Internet Applications Using Google Web Toolkitrajivmordani

Gradle by ExampleEric Wendelin

Groovy in the CloudDaniel Woods

Tips & Tricks for Maven TychoGunnar Wagenknecht

[WroclawJUG] Continuous Delivery in OSS using ShipkitMarcinStachniuk

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...chbornet

Introduction maven3 and gwt2.5 rc2 - Lesson 01rhemsolutions

Continuous Delivery in OSS using Shipkit.orgMarcinStachniuk

Maven beyond hello_worldGabriel Dogaru

Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magecom UK Limited

Eclipse Buildship JUG Hamburgsimonscholz

What's hot (20)

Writing java script for Csharp's Blazor

From devOps to front end Ops, test first

Gradle

Branching Strategies For Git and Subversion

"How to deploy to production 10 times a day" Андрей Шумада

Gradle 3.0: Unleash the Daemon!

"The Story of Declarative React at Grammarly: From two-way data binding with ...

Hands on the Gradle

Building Rich Internet Applications Using Google Web Toolkit

Gradle by Example

Groovy in the Cloud

Tips & Tricks for Maven Tycho

[WroclawJUG] Continuous Delivery in OSS using Shipkit

Building Reliable Applications Using React, .NET & Azure

JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...

Introduction maven3 and gwt2.5 rc2 - Lesson 01

Continuous Delivery in OSS using Shipkit.org

Maven beyond hello_world

Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11

Eclipse Buildship JUG Hamburg

Viewers also liked

MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)Alex Rupérez

NSCoder Keynote - Multipeer Connectivity FrameworkAlex Rupérez

Gigigo Keynote - Geofences & iBeaconsAlex Rupérez

Gigigo Workshop - Create an iOS Framework, document it and not die tryingAlex Rupérez

Gigigo Workshop - iOS ExtensionsAlex Rupérez

Fundementals skillsitchomecare

Fundementals competenciesitchomecare

1. roles and responsibilities within the agency and communityitchomecare

HTML CSS & JavascriptDavid Lindkvist

Viewers also liked (9)

MADBike – Destapando la seguridad de BiciMAD (T3chFest 2017)

NSCoder Keynote - Multipeer Connectivity Framework

Gigigo Keynote - Geofences & iBeacons

Gigigo Workshop - Create an iOS Framework, document it and not die trying

Gigigo Workshop - iOS Extensions

Fundementals skills

Fundementals competencies

1. roles and responsibilities within the agency and community

HTML CSS & Javascript

Similar to jQuery plugin & testing with Jasmine

JavaScript + Jenkins = Winning!Eric Wendelin

Yeomanarybik

Joomla! Testing - J!DD Germany 2016Yves Hoppe

Jasmine with JS-Test-DriverDevesh Chanchlani

Effizientere WordPress-Plugin-Entwicklung mit SoftwaretestsDECK36

Testing with CodeceptionJeremy Coates

Automation Zaman NowIbnu Fajar Yunardi

Performance Testing using Real Browsers with JMeter & WebdriverBlazeMeter

Unit Testing with JestMaayan Glikser

Unit Testing in AngularJS - CC FE & UXJWORKS powered by Ordina

Unit testing in JavaScript with Jasmine and KarmaAndrey Kolodnitsky

JavaScript Unit TestingChristian Johansen

Cpsc 473 01 lightning talkKetul Shah

Angular IntermediateLinkMe Srl

Protractor framework architecture with exampleshadabgilani

Grooscript greachJorge Franco Leza

Angular + JHipster - JHipster ConfWilliam Marques

Behat Workshop at WeLovePHPMarcos Quesada

Selenium-Browser-Based-Automated-Testing-for-Grails-Appschrisb206 chrisb206

Js tacktalk team dev js testing performanceАртем Захарченко

Similar to jQuery plugin & testing with Jasmine (20)

JavaScript + Jenkins = Winning!

Yeoman

Joomla! Testing - J!DD Germany 2016

Jasmine with JS-Test-Driver

Effizientere WordPress-Plugin-Entwicklung mit Softwaretests

Testing with Codeception

Automation Zaman Now

Performance Testing using Real Browsers with JMeter & Webdriver

Unit Testing with Jest

Unit Testing in AngularJS - CC FE & UX

Unit testing in JavaScript with Jasmine and Karma

JavaScript Unit Testing

Cpsc 473 01 lightning talk

Angular Intermediate

Protractor framework architecture with example

Grooscript greach

Angular + JHipster - JHipster Conf

Behat Workshop at WeLovePHP

Selenium-Browser-Based-Automated-Testing-for-Grails-Apps

Js tacktalk team dev js testing performance

Recently uploaded

SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren

Understanding the Laravel MVC ArchitecturePixlogix Infotech

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent

GenCyber Cyber Security Day PresentationMichael W. Hawkins

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Recently uploaded (20)

SQL Database Design For Developers at php[tek] 2024

Understanding the Laravel MVC Architecture

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

🐬 The future of MySQL is Postgres 🐘

Injustice - Developers Among Us (SciFiDevCon 2024)

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi

My Hashitalk Indonesia April 2024 Presentation

Handwritten Text Recognition for manuscripts and early printed texts

CNv6 Instructor Chapter 6 Quality of Service

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...

The Codex of Business Writing Software for Real-World Solutions 2.pptx

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365

Unblocking The Main Thread Solving ANRs and Frozen Frames

Data Cloud, More than a CDP by Matt Robison

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...

GenCyber Cyber Security Day Presentation

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024