Setup PhantomJS for automate testing

Posted on in Environment Jasmine TDD

All your Jasmine TDD tests you can automate with PhantomJS.
This blog post will tell you how to setup your environment for automated testing with PhantomJS.

You should have a local webserver running. It it might be handy to have Jasmine already up and go.
Please see my post:

Get PhantomJS.
You can download it for MAC & Windows from:
- Windows users can run the exe file.
- Mac OSX users can run bin/phantomjs
But make sure you add phantomjs to your paths.

For Mac users, you can also install PhantomJS with homebrew.
To get homebrew you will need to have Ruby installed.
Use the following commands on your terminal:

whoami (it will prompt ur username: for example lee)
sudo chown lee:staff /usr/local
sudo chmod 0777 /usr/local
ruby <(curl -fsSkL

Now that you have brew on your Mac, you can use the following command to install PhantomJS:

brew update && brew install phantomjs

After everything is installed, you should type the following command in your command/terminal.

phantomjs --version

When everything is correctly installed it should output you the version number of PhantomJS!

Setup Jasmine TDD with for Ext JS

Posted on in Environment Ext JS Jasmine TDD
  1. Download Jasmine standalone:

  2. In your ExtJS project folder create a folder: app-test and place it next to the app folder.

  3. In your Ext JS app-test folder, create the following file: app-test.js
    (make sure it stands next to the app.js file.)

  4. Unzip the Jasmine download. Copy the lib folder (which contains jasmine-1.x.x folder) into app-test.

  5. Create in your project folder the file: index-test.html
    With the following markup:

   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css">
   <script type="text/javascript" src="ext/ext-debug.js">

   <script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js">
   <script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js">

   <!-- include specs here -->

   <!-- test launcher -->
   <script type="text/javascript" src="app-test/app-test.js">

EDITED: Due, to issues with the wordpress editor, please see:

(I'm using Jasmine version 1.3.1) If you are using a different version, please make sure the framework files are correctly linked.

  1. Now open your browser and navigate to the index-test.html page.
    If everything is correctly installed; you should see a test pass page with: 0 specs, 0 failures in 0s.

You're ready to create your TDD tests.
Read more in the following blogpost: