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

Download as KEY, PDF

1 like3,403 views

The document is a presentation by Rob Friesel on headless JavaScript testing using Jasmine and PhantomJS. It covers the benefits of unit testing, discusses automation challenges, and provides a demo of querying post titles from a webpage. The session concludes with resources for further exploration and an invitation for questions.

Technology Education

LIKE A GENIE FROM THE LAMP
Headless JavaScript Testing with Jasmine and PhantomJS

Rob 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

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

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();
});

RESOURCES

• Jasmine : http://pivotal.github.com/jasmine/

• PhantomJS : http://phantomjs.org/

• Larry Myers' jasmine-reporters :

https://github.com/larrymyers/jasmine-reporters

• this talk's sample code :

https://github.com/founddrama/vt-code-camp-2012

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

1. LIKE A GENIE FROM THE LAMP Headless JavaScript Testing with Jasmine and PhantomJS Rob Friesel @founddrama

2. WHO IS THIS GUY? • Sr. User Interface Developer at Dealer.com Websystems • out there on the web: • @founddrama • blog.founddrama.net • github.com/founddrama

3. WHAT ARE WE TALKING ABOUT TODAY?

4. IN THE BEGINNING...

5. But then we discover... UNIT TESTING

7. BENEFITS OF UNIT TESTING

12. DEMO

13. SO WHAT'S THE PROBLEM?

14. AUTOMATION

16. 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(); });

17. ARE YOU THINKING WHAT I'M THINKING?

18. LET'S DO SOMETHING AWESOME!

19. QUESTIONS?

20. THANKS!

21. RESOURCES • Jasmine : http://pivotal.github.com/jasmine/ • PhantomJS : http://phantomjs.org/ • Larry Myers' jasmine-reporters : https://github.com/larrymyers/jasmine-reporters • this talk's sample code : https://github.com/founddrama/vt-code-camp-2012

Editor's Notes

#2: - first off: thanks\n- second: sorry about the cheesy title\n-- (trying to be clever, just sounds lame)\n
#3: - 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
#4: - per title: "headless JavaScript unit testing"\n- and our toolkit? *Jasmine* and *PhantomJS*\n- (reliable) testing for your front-end code\n
#5: - You're just clicking around, right?\n- crude methods\n
#6: - "Anyone *not* know what unit testing is?"\n-- (brief explanation) or: "I'll skip the primer on unit testing..."\n
#7: - "And of course we can even go all the way to TDD..."\n-- "but let's stay out of that discussion today..."\n\n
#8: - (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
#9: "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
#10: - 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
#11: - 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
#12: - 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
#13: - 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
#14: - 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
#15: - 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
#16: - 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
#17: - 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
#18: - 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
#19: - 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
#20: - 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
#21: - 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
#22: - 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
#23: - 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
#24: - 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
#25: - 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
#26: 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
#27: "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
#28: 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
#29: "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
#30: - walkthrough\n-- WebPage\n-- explain what this does (which isn't much)\n-- but enough to introduce the API\n
#31: - "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
#32: - 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
#33: \n
#34: \n
#35: \n

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

More Related Content

What's hot (20)

Recently uploaded (20)

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

Editor's Notes