Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding README and outline for Github friendliness
- Loading branch information
Rob Friesel
committed
Sep 18, 2012
1 parent
6d496ac
commit 726faf3
Showing
2 changed files
with
151 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| # Like a Genie from the Lamp: | ||
|
|
||
| ### Headless JavaScript Testing with Jasmine and PhantomJS | ||
|
|
||
| Example code to accompany my presentation on using [Jasmine](http://pivotal.github.com/jasmine/) | ||
| and [PhantomJS](http://phantomjs.org/) for lightning-fast JavaScript unit tests, | ||
| a talk that was given at the 2012 [VT Code Camp](http://vtcodecamp.org/). | ||
|
|
||
| **Abstract:** | ||
|
|
||
| > 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. | ||
| ### Running the Code | ||
|
|
||
| * Download/install [PhantomJS](http://phantomjs.org/); make sure it's on your `PATH`. | ||
| * Checkout this repository; `cd` into the repo and run these commands: | ||
| * `git submodule init` | ||
| * `git submodule update` | ||
| * From within the repo: | ||
| * `phantomjs lib/jasmine-reporters/test/phantomjs-testrunner.js $(pwd)/test/all-tests-spec.htm` | ||
|
|
||
| ### Resources | ||
|
|
||
| * [Jasmine](http://pivotal.github.com/jasmine/) | ||
| * Rebecca Murphey's [jQuery Testing with Jasmine (screencast)](http://vimeo.com/20457625) | ||
| * [PhantomJS](http://phantomjs.org/) | ||
| * [Google Groups forum](https://groups.google.com/forum/#!forum/phantomjs) | ||
| * [larrymyers/jasmine-reporters](https://github.com/larrymyers/jasmine-reporters) | ||
| * [jcarver989/phantom-jasmine](https://github.com/jcarver989/phantom-jasmine) | ||
| (*An alternative test runner.*) | ||
| * Ben Cherry's [Writing Testable JavaScript](http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| # Like a Genie from the Lamp: | ||
|
|
||
| ### Headless JavaScript Testing with Jasmine and PhantomJS | ||
|
|
||
| * "Who is this guy?" | ||
| * Rob Friesel - Sr. User Interface Developer at Dealer.com Websystems | ||
| * [@founddrama](https://twitter.com/founddrama) | ||
| * [blog.founddrama.net](http://blog.founddrama.net) | ||
| * [github.com/founddrama](http://github.com/founddrama) | ||
| * What are we talking about? | ||
| * "headless JavaScript unit testing" | ||
| * and our toolkit? *Jasmine* and *PhantomJS* | ||
| *  | ||
| * What problem are we trying to solve? | ||
|  | ||
| * (reliable) testing for your front-end code | ||
| * "In the beginning..." | ||
|  | ||
| * "But then we discover unit testing!" | ||
|  | ||
|  | ||
| (and/or my own images) | ||
| * "Let's skip the primer on unit testing." | ||
| * (anyone *not* know what unit testing is?) | ||
| * "And of course we can even go all the way to TDD, but let's stay out of that | ||
| discussion today..." | ||
|  | ||
| * benefits of unit testing | ||
|  | ||
| [source](http://www.flickr.com/photos/badjonni/7131921511/in/pool-stickfiguresinperil/) | ||
| * Self-explanatory? | ||
| * more confident about the changes you make | ||
| * more confident in the changes *others* make | ||
| * builds business value because you can prove stability | ||
| * a brief overview of JS unit testing | ||
|  | ||
| * "If you've unit tested in other languages before..." | ||
| * usually a "clear winner"? (your #1 Google search result? and... | ||
| *my totally unscientific survey*) | ||
| * Java: JUnit | ||
| * Groovy: Spock | ||
| * Ruby: RSpec | ||
| * .NET: NUnit | ||
| * Scala: specs | ||
| * JavaScript unit testing landscape? *less clear* [slide: "plastered" w/ | ||
| logos and names, like an urban street sign] | ||
|  | ||
| * [Wikipedia's 'Unit testing frameworks'](http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript) | ||
| article has a table that features **35** different unit testing frameworks | ||
| for JavaScript. | ||
| * "to say nothing of:" ["CasperJS", "Google JS Test", "Siesta", | ||
| "Expresso", "Mocha"] | ||
| * "The community doesn't really rally around any one solution..." | ||
| * (depends on what you're doing) | ||
| * **sidebar:** *writing testable JavaScript* | ||
| * no real "testing tradition" in JS (?) | ||
| * JS "traditionally" hard to test | ||
| * "not functional" - dealing w/ browser state etc. | ||
| * "This is a technique proble, not a language problem." | ||
| * JS *can* be carefully crafted (like any other lang) | ||
| * cite: Ben Cherry's [Writing Testable JavaScript](http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript) | ||
| * introduce Jasmine specifically | ||
| * Q\. "Why Jasmine?" | ||
| * (funny) A. "Well, you gotta pick something..." | ||
| * (real) A. "BDD" | ||
| * Q\. "What is BDD?" A. "Behavior Driven Development" | ||
| * testing/dev methodology based loosely on TDD | ||
| * main difference? "natural language" approach | ||
| * tests written as "behaviors" - can/should be written by/with the BA | ||
| * easily converted into tests (write your tests with your BAs) | ||
| * demo of Jasmine | ||
| * break from slides; bring up code, tests in browser | ||
| * problems with unit-testing front-end code | ||
| * approach is not w/o its problems | ||
| * chief among them? - you're doing it in the browser | ||
| * (so *that's* slow, probably also *manual*) | ||
| * what about automation? continuous integration? | ||
| * **sidebar:** there *are* CI solutions (but they're slow) | ||
| * mention: Selenium, WebDriver, Geb (re: in-browser functional tests) | ||
| * mention: BusterJS (as an alternative (but beta)) | ||
| * mention: "browser lab" | ||
| * *but* - "Cumbersome, slow, expensive..." | ||
| * most of the time: overkill | ||
| * introduce PhantomJS | ||
|  | ||
| * Q\. "What is PhantomJS?" A. "headless WebKit" (plus explanation) | ||
| * *aside:* you can use it for just about anything... | ||
| * Q\. "How does this help us?" | ||
| 1. A\. "Gets you out of the browser refresh game." | ||
| 2. A\. "Sets you up for a CI strategy." | ||
| * **sidebar:** reL won't solve all your problems | ||
| * running tests in PhantomJS is like running then "just in Chrome" | ||
| * *except* no an actual "physical" viewport | ||
| * in other words: if you have "pure" JS unit tests, this will run them | ||
| *super fast* (and as part of CI) | ||
| * but not a substitute for robust functional/acceptance testing across | ||
| multiple browsers | ||
| * use in conjunction w/ something like JSHint and your regular QA | ||
| * Q\. "How do you interact with PhantomJS?" A\. (show a "hello world" type | ||
| example and introduce the API) | ||
| * "Are you thinking what I'm thinking?" | ||
|  | ||
| * [credit](http://www.flickr.com/photos/library_of_congress/2179856314/) | ||
| * introduce strategy for using PhantomJS to run Jasmine tests | ||
| * toolkit! | ||
| 1. Jasmine for tests | ||
| 2. PhantomJS as the test environment | ||
| 3. Larry Myers `jasmine-reporters` library of extensions | ||
| * see also: `ConsoleRunner` and `JUnitReporter` and `phantomjs-runner` | ||
| * demo! | ||
| * discussion? / questions? |