jQuery plugin & testing with Jasmine

•

1 j'aime•5,067 vues

Miguel Parramón Teixidó

Technologie

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?

Recommandé

Gerrit JavaScript PluginsDariusz Łuksza

"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays

Introducing Playwright's New Test RunnerApplitools

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

GWTcon 2015 - Beyond GWT 3.0 PanicCristiano Costantini

Instrumentación de entrega continua con GitlabSoftware Guru

Managing dependencies with gradleLiviu Tudor

Angular 2 Migration - JHipster Meetup 6William Marques

Recommandé

Gerrit JavaScript PluginsDariusz Łuksza

"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays

Introducing Playwright's New Test RunnerApplitools

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

GWTcon 2015 - Beyond GWT 3.0 PanicCristiano Costantini

Instrumentación de entrega continua con GitlabSoftware Guru

Managing dependencies with gradleLiviu Tudor

Angular 2 Migration - JHipster Meetup 6William Marques

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

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

NSCoder Keynote - Multipeer Connectivity FrameworkAlex Rupérez

Contenu connexe

Tendances

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

Tendances (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

En vedette

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

En vedette (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

Similaire à 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Артем Захарченко

Similaire à 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

Dernier

Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

"ML in Production",Oleksandr BaganFwdays

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero

Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm

Training state-of-the-art general text embeddingZilliz

Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi

Dernier (20)

Unleash Your Potential - Namagunga Girls Coding Club

Nell’iperspazio con Rocket: il Framework Web di Rust!

"ML in Production",Oleksandr Bagan

My Hashitalk Indonesia April 2024 Presentation

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...

Anypoint Exchange: It’s Not Just a Repo!

SIP trunking in Janus @ Kamailio World 2024

Advanced Test Driven-Development @ php[tek] 2024

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

SAP Build Work Zone - Overview L2-L3.pptx

Human Factors of XR: Using Human Factors to Design XR Systems

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)

Designing IA for AI - Information Architecture Conference 2024

Streamlining Python Development: A Guide to a Modern Project Setup

Training state-of-the-art general text embedding

Vertex AI Gemini Prompt Engineering Tips

jQuery plugin & testing with Jasmine

1. jQuery Plugins & Jasmine A lightning quick example @mparramon

2. What? With · some useful js code Create · a full-fledged jQuery plugin · with unit testing

3. File inputs in some browsers: The problem

4. let's fix it! · add styling · custom button · initial value Based on quirksmode.org/dom/inputfile.html

5. jQuery plugin http://docs.jquery.com/Plugins/Authoring

6. Basic Framework

7. Defaults and options

8. Mantaining chainability

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

10. Initial setup Modify SpecRunner.html:

11. DSL

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

13. Fixtures

14. Expectations

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. No time! @mparramon github.com/mparramont Questions?