SlideShare a Scribd company logo
1 of 88
Download to read offline
 
Testing JavaScript with Jasmine By: Tim Tyrrell
Tim Tyrrell @timtyrrell    
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Why are you talking about JavaScript at a  Ruby conference?
Why unit test JavaScript?
"External tests don't help us with internal design" @glv
"There is only one way to go truly fast. Do the best job you can. Anything else is slower." @unclebobmartin http://twitter.com/#!/unclebobmartin/status/39438225869254656
 
What is Jasmine?
Why Jasmine?
Jasmine is not an integration testing framework.
RSpec vs. Jasmine: Structure #RSpec describe "Calculate" do      describe "#add" do          it "should return the sum" do              ...          end      end end //Jasmine describe "Calculate", function(){      describe "#Add", function(){          it "should return the sum", function(){          ...          };      }); });
RSpec vs. Jasmine: Before/After #RSpec before(:each) do           @calc = Calculator.new  end    after(:each) do           @calc.reset  end //Jasmine var calc;  beforeEach(function(){     calc = new Calculator(); });    afterEach(function(){     calc.reset();  });
RSpec vs. Jasmine: Expectations # RSpec  it "should return the sum" do       calc = Calculator.new        calc.add(1,1).should == 2     calc.add(1,2).should_not == 2 #Use one expectation per 'it'! end   // Jasmine  it("should return the sum", function() {           var calc = new Calculator();       expect(calc.Add(1,1)).toEqual(2);     expect(calc.Add(1,2)).not.toEqual(2); //Use one expectation per 'it'!  });
Jasmine Matchers expect(x).toEqual(y)   expect(x).toBe(y);   expect(x).toMatch(pattern)  expect(x).toBeDefined()  expect(x).toBeNull();   expect(x).toBeTruthy();  expect(x).toBeFalsy(); expect(x).toContain(y); expect(x).toBeLessThan(y); expect(x).toBeGreaterThan(y); expect(fn).toThrow(e);
Custom Matchers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Custom Matchers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Custom Matchers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
RSpec vs. Jasmine: Stubbing # RSpec  it "should add the numbers" do       calc = Calculator.new       calc.stub!(:add).and_return(3)       calc.add(1,1).should == 3  end  // Jasmine  it("should add the numbers", function() {       var calc = new Calculator();       spyOn(calc, 'add').andReturn(3);      expect(calc.Add(1,1)).toEqual(3);  });
TDD? " Red ,  Green , Refactor"
Why do *I* like TDD?
Jasmine with "vanilla" JavaScript ,[object Object],[object Object],[object Object]
 
 
 
 
describe("Calculator", function() {    }); Spec for Calculator:
describe("Calculator", function() {   var calc;   beforeEach(function(){     calc = new Calculator();   }); }); Spec for Calculator:
describe("Calculator", function() {   var calc;   beforeEach(function(){     calc = new Calculator();   }); }); Spec for Calculator:
describe("Calculator", function() {   var calc;   beforeEach(function(){     calc = new Calculator();   });   it("should return the sum", function() {     expect(calc.Add(1,1)).toEqual(2);   }); }); Spec for Calculator:
Failing Test
Create the "Calculator" function ,[object Object],[object Object]
One passing, one left to fix
Add the method ,[object Object]
Passed!
Jasmine with Ruby(not Rails)
$ gem install jasmine
$ jasmine init
Generated folder structure
$ rake jasmine
http://localhost:8888
$ rake jasmine:ci
Jasmine with JQuery
     * toBe(jQuerySelector)     * toBeChecked()     * toBeEmpty()     * toBeHidden()     * toBeSelected()     * toBeVisible()     * toContain(jQuerySelector)     * toExist()     * toHaveAttr(attributeName, attributeValue)     * toHaveBeenTriggeredOn(selector)     * toHaveClass(className)     * toHaveData(key, value)     * toHaveHtml(string)     * toHaveId(id)     * toHaveText(string)     * toHaveValue(value)     * toBeDisabled() jasmine-jquery Matchers
&quot;A lightweight, easy to use Javascript <span> injector for radical Web Typography&quot;
@davatron5000
Lettering.js <h1 class=&quot;fancy_title&quot;>Some Title</h1> <script>    $(document).ready(function() {      $(&quot;.fancy_title&quot;).lettering();    }); </script>
Lettering.js results ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Standalone folder structure + more
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Jasmine with Rails gem &quot;jasmine&quot;  $ bundle install $ jasmine init (optional) $ rake jasmine or  $ rake jasmine:ci http://localhost:8888
Generated Rails spec folder
Generated default javascript objects
$ rake jasmine 
 
$ gem install evergreen
gem install evergreen
Evergreen default folder paths  (not generated)
$ evergreen serve
$ evergreen run
Evergreen and Rails 3 ,[object Object],[object Object]
What about CoffeeScript???
Installing CoffeeScript ,[object Object],[object Object],[object Object]
Add  a &quot;_spec.coffee&quot; file
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
#winning
 
Headless Browser Install ,[object Object],[object Object],[object Object]
Configure Evergreen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Using a Headless Browser ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Node.js + Jasmine ,[object Object]
Any other cool utilities?
Rosie ,[object Object],[object Object]
Summer Breeze ,[object Object],[object Object]
jasminerice ,[object Object],[object Object]
http://try-jasmine.heroku.com
Wrap Up ,[object Object],[object Object],[object Object]
 
Thank You! @timtyrrell Questions? Did I miss any cool plugins? http://bit.ly/jasmine-lsrc http://spkr8.com/t/7818
http://pivotal.github.com/jasmine/ https://github.com/jnicklas/evergreen https://github.com/velesin/jasmine-jquery https://github.com/thoughtbot/capybara-webkit http://obtiva.com/blog/112-javascript-specs-with-jasmine-a-primer-for-rubyists-part-1 http://obtiva.com/blog/119 http://daverupert.com/2010/09/lettering-js/ http://www.engineyard.com/university/screencasts/javascript-tests-with-jasmine http://blog.levid.com/?p=29 http://blog.carbonfive.com/2010/10/21/rspec-best-practices/ https://github.com/johnbintz/guard-jasmine-headless-webkit References:

More Related Content

What's hot

JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma Christopher Bartling
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeJosh Mock
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmineTimothy Oxley
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsFITC
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express MiddlewareMorris Singer
 
JavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and KarmaJavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and KarmaChristopher Bartling
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasminefoxp2code
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaAndrey Kolodnitsky
 
Testing JS with Jasmine
Testing JS with JasmineTesting JS with Jasmine
Testing JS with JasmineEvgeny Gurin
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit TestingPrince Norin
 
Testing JavaScript Applications
Testing JavaScript ApplicationsTesting JavaScript Applications
Testing JavaScript ApplicationsThe Rolling Scopes
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineGil Fink
 
Angularjs - Unit testing introduction
Angularjs - Unit testing introductionAngularjs - Unit testing introduction
Angularjs - Unit testing introductionNir Kaufman
 
Angular JS Unit Testing - Overview
Angular JS Unit Testing - OverviewAngular JS Unit Testing - Overview
Angular JS Unit Testing - OverviewThirumal Sakthivel
 
Unit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsUnit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsYnon Perek
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Morris Singer
 
SilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript RefactoringSilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript RefactoringIngo Schommer
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testingVisual Engineering
 

What's hot (20)

JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
 
Intro to testing Javascript with jasmine
Intro to testing Javascript with jasmineIntro to testing Javascript with jasmine
Intro to testing Javascript with jasmine
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express Middleware
 
JavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and KarmaJavaScript TDD with Jasmine and Karma
JavaScript TDD with Jasmine and Karma
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasmine
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
 
Testing JS with Jasmine
Testing JS with JasmineTesting JS with Jasmine
Testing JS with Jasmine
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit Testing
 
Testing JavaScript Applications
Testing JavaScript ApplicationsTesting JavaScript Applications
Testing JavaScript Applications
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
 
Full Stack Unit Testing
Full Stack Unit TestingFull Stack Unit Testing
Full Stack Unit Testing
 
Angularjs - Unit testing introduction
Angularjs - Unit testing introductionAngularjs - Unit testing introduction
Angularjs - Unit testing introduction
 
Angular JS Unit Testing - Overview
Angular JS Unit Testing - OverviewAngular JS Unit Testing - Overview
Angular JS Unit Testing - Overview
 
Unit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsUnit Testing JavaScript Applications
Unit Testing JavaScript Applications
 
Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015Unit Testing Express and Koa Middleware in ES2015
Unit Testing Express and Koa Middleware in ES2015
 
SilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript RefactoringSilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript Refactoring
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
Practical Celery
Practical CeleryPractical Celery
Practical Celery
 

Viewers also liked

Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverageTesting NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoveragemlilley
 
Testing Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiTesting Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiAndrew Winder
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaAdam Klein
 
Story about module management with angular.js
Story about module management with angular.jsStory about module management with angular.js
Story about module management with angular.jsDavid Amend
 
TDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshopTDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshopSikandar Ahmed
 
Angular 2 - What's new and what's different
Angular 2 - What's new and what's differentAngular 2 - What's new and what's different
Angular 2 - What's new and what's differentPriscila Negreiros
 
Unit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma introUnit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma introMaurice De Beijer [MVP]
 

Viewers also liked (10)

Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverageTesting NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
 
Testing Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiTesting Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and Chai
 
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
 
Story about module management with angular.js
Story about module management with angular.jsStory about module management with angular.js
Story about module management with angular.js
 
TDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshopTDD, unit testing and java script testing frameworks workshop
TDD, unit testing and java script testing frameworks workshop
 
Angular testing
Angular testingAngular testing
Angular testing
 
Angular 2 - What's new and what's different
Angular 2 - What's new and what's differentAngular 2 - What's new and what's different
Angular 2 - What's new and what's different
 
Unit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma introUnit testing JavaScript: Jasmine & karma intro
Unit testing JavaScript: Jasmine & karma intro
 
Karma - JS Test Runner
Karma - JS Test RunnerKarma - JS Test Runner
Karma - JS Test Runner
 

Similar to Testing Javascript with Jasmine

Javascript Unit Testing
Javascript Unit TestingJavascript Unit Testing
Javascript Unit TestingPaul Klipp
 
Exploiting Php With Php
Exploiting Php With PhpExploiting Php With Php
Exploiting Php With PhpJeremy Coates
 
Java Boilerplate Busters
Java Boilerplate BustersJava Boilerplate Busters
Java Boilerplate BustersHamletDRC
 
JavaScript Sprachraum
JavaScript SprachraumJavaScript Sprachraum
JavaScript Sprachraumpatricklee
 
Impacta - Show Day de Rails
Impacta - Show Day de RailsImpacta - Show Day de Rails
Impacta - Show Day de RailsFabio Akita
 
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesJavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesChicago ALT.NET
 
Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescriptDavid Furber
 
Java Boilerplate Busters
Java Boilerplate BustersJava Boilerplate Busters
Java Boilerplate BustersHamletDRC
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼Sukjoon Kim
 
Render API - Pavel Makhrinsky
Render API - Pavel MakhrinskyRender API - Pavel Makhrinsky
Render API - Pavel MakhrinskyDrupalCampDN
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web ModuleMorgan Cheng
 
KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7phuphax
 
KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7phuphax
 

Similar to Testing Javascript with Jasmine (20)

Javascript Unit Testing
Javascript Unit TestingJavascript Unit Testing
Javascript Unit Testing
 
JQuery Basics
JQuery BasicsJQuery Basics
JQuery Basics
 
Exploiting Php With Php
Exploiting Php With PhpExploiting Php With Php
Exploiting Php With Php
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
Java Boilerplate Busters
Java Boilerplate BustersJava Boilerplate Busters
Java Boilerplate Busters
 
JavaScript Sprachraum
JavaScript SprachraumJavaScript Sprachraum
JavaScript Sprachraum
 
Jquery 1
Jquery 1Jquery 1
Jquery 1
 
Impacta - Show Day de Rails
Impacta - Show Day de RailsImpacta - Show Day de Rails
Impacta - Show Day de Rails
 
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly BracesJavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
 
Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescript
 
Java Boilerplate Busters
Java Boilerplate BustersJava Boilerplate Busters
Java Boilerplate Busters
 
Spring Capitulo 05
Spring Capitulo 05Spring Capitulo 05
Spring Capitulo 05
 
Prototype js
Prototype jsPrototype js
Prototype js
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼
 
Ajax
AjaxAjax
Ajax
 
Php My Sql
Php My SqlPhp My Sql
Php My Sql
 
Render API - Pavel Makhrinsky
Render API - Pavel MakhrinskyRender API - Pavel Makhrinsky
Render API - Pavel Makhrinsky
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web Module
 
KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7
 
KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7KMUTNB - Internet Programming 5/7
KMUTNB - Internet Programming 5/7
 

Recently uploaded

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 

Recently uploaded (20)

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 

Testing Javascript with Jasmine

Editor's Notes

  1. Tim Tyrrell, from Chicago, moved to Austin a year and a half ago. I work as a Rails Developer at PeopleAdmin in Austin, TX.  We have a SaaS talent management application with about 700 customers in the higher education, government, and non-profit sectors. Post jobs, apply to jobs, hiring workflows, etc.
  2. I appreciate you attending my session. I know that you have a choice today on which session to attend, so I plan to make a good use of your time. In accordance, I want to set your expectations by displaying my agenda. It is pretty slide heavy talk with lots of different code examples, but we will blow through them, so don&apos;t let that scare you. I know that I am what is standing between you and chicken fried chicken, so I will tread lightly here. This is an intro to testing with jasmine. Cover a lot of stuff briefly. So if you have ever worked with Jasmine, you may want to bail right now.
  3. - A lot of us use Ruby through Rails or Sinatra, so we have views, and these views use javascript. - I know that it is a gap in most applications. I think that is is something that might be scary but I want to show you that we can fill this gap and it is not very difficult. Although, it will take a mindset change.
  4. - it is code! - it can be very complex! -There was a time where it was though of as a toy language, but that misconception has obviously been blown away. -What is the problem? I think it&apos;s viewed like the wild wild west. You write a bunch of procedural script inside the views and any thought of testing code like that is impossible. Procedural  non-modular code, is horribly difficult to test. so right off the bat, you need to treat your javascript code with respect and care that you may backend code. Other perceived problems? Testing javascript is hard to get setup. - Why now? With javascript being more of an important piece of our software, with all this focus shifting to javascript, we need to do it right. Unit testing is the right way to do it. 
  5. - I know people say testing slows you down, but the reality is, a deployment that fails is going to slow you down. Refactoring some code and breaking half your application is going to slow you down. - yes, there are such things as spikes and prototypes where testing doesn&apos;t make sense. - what Obie said - testing is not easy. A know a number of folks in this room that have been doing it for 5+ years, and they are still learning new things and changing their opinions on the best way to do things. 
  6. Don&apos;t be this guy. You don&apos;t have to test-drive it, but you need to test it. The like unit testing because I don&apos;t want to get paged in the middle of the night.
  7. - Created by Pivitol Labs - there are other JS testing frameworks: QUnit is the most obvious one, which is used by the jQuery project. QUnit is more of a standard assertion framework where as Jasmine has the BDD style-syntax
  8. - super easy to get going and is super easy to use with Rails - Familiar RSpec Syntax (context switching is a killer) - It has a RubyGem for Ruby, Rails, or even Node.js. Also, you can use it without Ruby. - Easy to plug into a CI server, headless or not - Does not require the DOM - It does not depend on any other javascript frameworks - big community around it. Lot&apos;s of plugins and it is being pushed
  9. - This is for testing javascript in isolation. &amp;quot;Unit testing&amp;quot;   - More like Test::Unit or RSpec, JUnit, NUnit, etc.   - Not Cucumber, Capybara, etc.
  10. Differences? - With Rspec I could remove the double-quotes from &amp;quot;Calculate&amp;quot; and it will new that object up for us as the subject. - Rspec uses blocks and Jasmine uses anonymous functions - RSpec allows you to switch out the word describe for context and also there is some other syntactical magic you can us, Jasmine is straight forward.
  11. Differences? - this is the setup/teardown events - you can declare @calc in the before block in RSpec and it will be available in other blocks. Not so with Jasmine.
  12. - RSpec has different methods that define expectations, but Jasmine only has &amp;quot;expect&amp;quot; which is passed an argument and then chained with matchers. - To test negation you just chain on a &amp;quot;not&amp;quot; - Noel and the one assertion per &amp;quot;it&amp;quot;
  13. spec_helper.rb
  14. #spec helper.js
  15. - A &amp;quot;onSpy&amp;quot; call will remove the specified function from the object and replace it with a spy. This spy will absorb all calls to that method and you can optionally chain a return method on to it.
  16. - Test-Driven Development Write a failing test, make it pass, then make it better. Write a test before you write the code to make it pass. I will cover this quickly, it is something we have all heard a million times(I hope!). 
  17. - Attention span- Keeps me focused on one thing at a time. If I have a failing test, I know exactly what I am working on and will not bounce off onto a tangent or down a rabbit hole.   - Helps you design your API, because you are utilizing it for your tests - Helps me sleep at night. I can deploy and not be scared to death that something will break. - Keeps me moving fast. Make a change, run the tests, move on. Don&apos;t need to open the browser and click. - Give me confidence in major refactorings. (Same as above)
  18. - TDD manner!!!
  19. - open the html in a browser
  20. -  gem &apos;jasmine&apos; if bundler
  21. - create a folder
  22. - check out the default specs and functions - explain conventions. *Spec.js
  23. - fire up the web server
  24. - obviously used with Continuous Integration server. Selenium is run, browser opens closes, etc. - run it in the background while you work
  25. Jasmine has a number of libraries, one of them deals with jQuery a set of custom matchers for jQuery framework an API for handling HTML fixtures in your specs
  26. dom matchers, not object matchers
  27. - find grained control of your text - if you are going to refactor your code or add more features, you don&apos;t want to break anything. You need to pin down you existing functionality to keep yourself moving fast.
  28. Added a couple libraries and also a fixture directory.
  29. - no ruby required here
  30. - set the HTML or load a fixture from spec/javascripts - clears it after each run
  31. - using a jQuery selecting in the expect matcher
  32. - pinning down functionality
  33. Also you can rake jasmine:ci Dr. Phil next.
  34. Alright, that was the normal Jasmine way to get things set it. It is easy. But, it can be a little easier. There is a better way.
  35. Best of breed. Templates, no generators, and coffeescript support. Defaults with Selenium, but you can rock it with Capybara, whatever - not a stand alone, you need ruby (obviously)
  36. - folder conventions
  37. - CoffeeScript next - recap
  38. install node.js install npm install coffeescript
  39. - no different than the other evergreen usage of calculator_spec.js
  40. side by side.
  41. - this is how I felt after I did that. so what did I do? 1. installed the evergreen gem 2. mimicked a folder structure 3. added a file of a coffee extension
  42. capybara-webkit depends on a WebKit implementation from Qt, a cross-platform development toolkit. jasmine-headless-webkit uses the QtWebKit widget to run your specs without needing to render a pixel. It&apos;s nearly as fast as running in a JavaScript engine like Node.js, and, since it&apos;s a real browser environment, all the modules you would normally use, like jQuery and Backbone, work without any modifications.
  43. - guard-jasmine-headless-webkit
  44. - big problems - you get to work with me
  45. THANKS FOR LISTENING! It is easy to setup and use, and it will help you sleep better at night. Grow a neck beard.