Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and PhantomJS
Upcoming SlideShare
Loading in...5
×
 

Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and PhantomJS

on

  • 2,009 views

Jasmine is a mature BDD test framework for JavaScript, and though powerful and feature-rich in its own right, you are often still shackled to a browser window to conduct your tests. Tools like ...

Jasmine is a mature BDD test framework for JavaScript, and though powerful and feature-rich in its own right, you are often still shackled to a browser window to conduct your tests. Tools like Selenium WebDriver make automated testing possible, but they are difficult to set up, cumbersome to use, and worst of all slow. Wouldn't it be nice if you could execute your tests as part of your build? And have those tests before completed in seconds? With PhantomJS ("the headless WebKit") that wish has come true. In this talk we will introduce the Jasmine BDD test framework, introduce PhantomJS, and demonstrate how to execute your Jasmine tests in PhantomJS for lightning fast results.

The code and discussion points from this talk appear on Github: https://github.com/founddrama/vt-code-camp-2012

UPDATE (July 2014): this talk became the seed for this book that I wrote: "The PhantomJS Cookbook" - http://goo.gl/NJnFq1

Statistics

Views

Total Views
2,009
Views on SlideShare
1,960
Embed Views
49

Actions

Likes
1
Downloads
23
Comments
2

4 Embeds 49

http://speakerrate.com 38
http://notundefined.tumblr.com 9
http://safe.tumblr.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • - first off: thanks\n- second: sorry about the cheesy title\n-- (trying to be clever, just sounds lame)\n
  • - other claims to fame:\n-- jshint contributor (flyweight category)\n-- helped to do some of the editing for Nicholas Zakas' Pro JS for WebDev (3rd Ed.)\n
  • - per title: "headless JavaScript unit testing"\n- and our toolkit? *Jasmine* and *PhantomJS*\n- (reliable) testing for your front-end code\n
  • - You're just clicking around, right?\n- crude methods\n
  • - "Anyone *not* know what unit testing is?"\n-- (brief explanation) or: "I'll skip the primer on unit testing..."\n
  • - "And of course we can even go all the way to TDD..."\n-- "but let's stay out of that discussion today..."\n\n
  • - (self-explanatory?)\n- more confident about the changes you make\n- more confident in the changes *others* make\n- builds business value b/c you can "prove" stability\n- [ASK] What else?\n
  • "And now for a brief overview of the JS unit testing landscape!"\n\n- "If you've unit tested in other languages before..." (usually a clear winner)\n-- results of my *totally unscientific survey*:\n--- Java: JUnit\n--- Groovy: Spock\n--- Ruby: RSpec\n--- .NET: NUnit\n--- Scala: specs\n\n"...the JavaScript unit testing landscape is... less clear..."\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Wikipedia article: 'Unit testing frameworks': table features **35** diff. unit testing fwks for JS. (not even an exhaustive list)\n-- here's just a few...\n- "The community doesn't really rally around any one solution..."\n-- "depends on what you're doing" (browser? node? some specific library?)\n-- most claim fwk/lib agnostic ("but find me someone using DOH on non-Dojo)\n-- sidebar re: Ben Cherry's "Writing Testable JavaScript"?\n-- and/but: at some point you just need to pick one...\n
  • - Q. "Why Jasmine?"\n-- (funny) A. "Well, you gotta pick something..."\n-- (real) A. "BDD"\n- Q. "What is BDD?" A. "Behavior Driven Development"\n-- testing/dev methodology based loosely on TDD\n-- main difference? (as I understand it) "natural language" approach\n--- tests are written as "behaviors" - can (should!) be written by the BA\n--- ...and easily converted into tests (write your tests with your BAs)\n
  • DEMO : alt-tab\n- explain our utility lib + math lib\n- explain our specs/tests\n- "just scratching the surface of Jasmine here"\n- DON'T FORGET: passing tests aren't interesting\n-- make a few fail (have some failing to start with)\n- discussion? other ones we can write?\n-- max() test w/ negative numbers\n-- max w/ `0e0` formatted numbers\n-- max test w/ `Infinity`\n\n
  • "So now we have some unit tests -- and that's a big improvement."\n\n** BUT: **\n- this approach is not w/o its problems\n-- [ASK] chief among them? (what do you think?)\n-- you're doing it in the browser (so *that's* slow...)\n- and even if you could tolerate that... (reloading the page over and over...)\n-- ( to say nothing of dealing with multiple browsers )\n- ...what about automation? ...what about continuous integration?\n\n
  • AUTOMATION + CI\n\n"A little bit of a sidebar..." (but not much)\n\n- mention: Selenium, WebDriver, Geb\n- mention: BusterJS\n- mention notion of "browser lab"\n- *but* - "These are cumbersome, slow, expensive..."\n-- and most of the time it's overkill\n--- esp. for quick tests on your dev box\n
  • "PhantomJS!"\n- Q. "What is PhantomJS?" A. "headless WebKit" (plus explanation)\n-- *aside:* you can use it for just about anything...\n- Q. "How does this help us?"\n-- 1. A. "Gets you out of the browser refresh game."\n-- 2. A. "Sets you up for a CI strategy."\n\n- **sidebar:** won't solve all your problems; running tests in PhantomJS is like running then "just in Chrome" -- and it has everything that a browser has *except* an actual "physical" viewport (use in conjunction w/ JSHint and your regular QA)\n-- (not pictured) : imagine : add Grunt? add a watch script? connect to something like Growl?\n\n- Q. "How do you interact with PhantomJS?"\n-- A. (show a "hello world" type example and introduce the API)\n\n
  • - walkthrough\n-- WebPage\n-- explain what this does (which isn't much)\n-- but enough to introduce the API\n
  • - "Are you thinking what I'm thinking?"\n-- we have some interesting tools here\n-- we could really cobble something together...\n-- ...to solve that CI problem\n- "...fortunately..."\n-- Larry Myers has done most of the heavy-lifting for us already\n- so we have:\n-- Jasmine (test framework)\n-- PhantomJS (test environment)\n-- Larry Myers' jasmine-reporters (adapter + test runner)\n
  • - demo!\n- cheat sheet:\n-- $ phantomjs lib/jasmine-reporters/test/phantomjs-testrunner.js $(pwd)/test/all-tests-spec.htm\n-- remember: make sure that you fail some tests too\n-- remember: use `echo $?` to show the exit codes...\n- "Writing scripts around this can be trivial..."\n-- see also: it's also possible to wrap the tests with test runners (e.g., to run the tests as part of your regular CI tests...)\n- NOT going to actually stand up Jenkins or anything like that...\n-- "But you get the idea..."\n
  • \n
  • \n
  • \n

Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and PhantomJS Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and PhantomJS Presentation Transcript

  • LIKE A GENIE FROM THE LAMP Headless JavaScript Testing with Jasmine and PhantomJSRob Friesel @founddrama
  • WHO IS THIS GUY?• Sr. User Interface Developer at Dealer.com Websystems• out there on the web: • @founddrama • blog.founddrama.net • github.com/founddrama
  • WHAT ARE WE TALKING ABOUT TODAY?
  • IN THE BEGINNING...
  • But then we discover...UNIT TESTING
  • BENEFITS OF UNIT TESTING
  • DEMO
  • SO WHATS THE PROBLEM?
  • AUTOMATION
  • var page = new WebPage(); page.onConsoleMessage = function(msg) {   console.log(msg); }; console.log([phantomjs] Loading page...); page.open(encodeURI(http://blog.founddrama.net/), function(status){   if (status !== success) {     console.log(could not retrieve!);   } else {     page.evaluate(function(){       console.log([phantomjs] Querying for post titles...);       var list = Array.prototype.slice.call( document.querySelectorAll(h2 > a[rel="bookmark"]), 0);       console.log([phantomjs] + list.length + post titles:);       list.forEach(function(el){         console.log( + el.innerHTML.replace(/<.*?>/g, ));       });     });   }   phantom.exit(); });
  • ARE YOU THINKINGWHAT IM THINKING?
  • LETS DO SOMETHING AWESOME!
  • QUESTIONS?
  • THANKS!
  • RESOURCES• Jasmine : http://pivotal.github.com/jasmine/• PhantomJS : http://phantomjs.org/• Larry Myers jasmine-reporters : https://github.com/larrymyers/jasmine-reporters• this talks sample code : https://github.com/founddrama/vt-code-camp-2012