Unit testing can make your code less prone to bugs and gives you piece of mind that everything is working the way it should. Normally when I speak to other developers about work, we end up speaking about workflow, tools and release processes. I’m always surprised by the amount of front-end developers that don’t unit test their code. When asked why, they give the following answers:
“I did have a look at Selenium, but it freaked me out. Getting it installed and ready to go looked a right pig!”
“The back-end guys usually just do that”
“I don’t really get time to do any of that kind of stuff but I’d like to”
“Unit Testing? Say whaaaaattt?”
So rounding up the problems that people are facing, we get the following:
- Time and effort it takes to get setup
- Complex APIs and steep learning curves
- General lack of exposure
Introducing PhantomJS & CasperJS
PhantomJS is a headless WebKit with JavaScript API. CasperJS is a navigation scripting & testing utility that runs on top/alongside of PhantomJS.
If you’re thinking “headless WebKit??!!?”, then it might be easier for you picture PhantomJS as a web inspector console that can be injected into any web page that you want, then accessed and used.
CasperJS makes it alot easier for you to navigate around a web page testing as you go. To be fair, my explanations don’t do these two tools enough justice. Please visit http://phantomjs.org/ and http://casperjs.org/ for a better explanation and more advanced features that aren’t covered here.
Both are really easy to use and extremely powerful!
Getting Started!
Requirements:
- Mac OSX
- Terminal app
- Ruby
- Git
- Homebrew
First things first, your Mac probably already has Ruby installed (You can check by running “ruby -v” in the terminal) and you more than likely already have Git installed.
You will need Homebrew. Granted other package managers are out there, but you still need Homebrew in your life. I love Homebrew.
I’ve tried installing PhantomJS via other (non-package manager) methods and it was a shameful experience, trust me.
Don’t worry installing Homebrew is pretty damn easy.
Step 1:
Open up the terminal and copy and paste the following into it. Hit enter. This may take a few minutes to finish.
/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"
Step 2:
Confirm Homebrew is all up in your system.
brew -v && brew help
This will output the homebrew (brew) version number and the help menu, should you fancy a quick rummage around.
Step 3:
Install PhantomJS. This may take a few minutes to run.
brew install phantomjs
Anyone one that tried and failed to install PhantomJS using the downloadable executable will be kicking themselves now (me included).
Step 4:
Has PhantomJS installed? Which version have I got?
phantomjs -v && phantomjs -h
This will do the same as Step 2 but for PhantomJS.
Step 5:
Install CasperJS. I’m assuming you have Git installed (rightly or wrongly). If you don’t then.. erm.. brew install git =). Run the following commands one after another.
Download CasperJS to a location that you’re happy with e.g. I download most software to a single location ~/src
git clone git://github.com/n1k0/casperjs.git
Access the downloaded file and use Git to checkout the latest version of Casperjs.
Note: The version number may change so maybe run “git tag” first, which will give you all the versions available. Just pick the highest number available and if it differs from 0.6.6 then change the command below to use the latest version e.g. git checkout tags/0.6.7
cd casperjs/ && git checkout tags/0.6.6
Create a link to the CasperJS source file
ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs
Check CasperJS is installed
casperjs --version
Now just to verify that everything is installed in a suitable place please run the following:
which brew && which casperjs && which phantomjs
Which should output something similar to the following:
/usr/local/bin/brew
/usr/local/bin/casperjs
/usr/local/bin/phantomjs
Now that everything is installed and ready to go we can get started with some basic tests. For example purposes only I’m going to run and build the test in a folder called “unit_tests” on the desktop (very imaginative I know). Normally, you would have them checked in to your project repo so other team members can add tests and use exisiting ones.
cd ~/Desktop
mkdir unit_tests
cd unit_tests
touch duckduck.js
Now open up duckduck.js with your favourite text editor e.g. sublime duckduck.js or mate duckduck.js
Copy and paste the following code and save the file:
Now run the following in the terminal:
casperjs test ~/Desktop/unit_tests/duckduck.js
You should get something cool like the following:
The above is just scraping the surface of what we can do. See http://phantomjs.org/ and http://casperjs.org/ for more information.
If you didn’t get the above result then please let me know what went wrong and we can update this to help others. Also, if you think I made a mistake or think something would be easier to understand, please let me know!
View & Comment
