Recently I discovered AngularJS. It’s a Java Environment for dynamic webpages and one can do pretty cool stuff with it. Until I was able to do really cool stuff, I needed to remove a couple of obstacles. As easy as it is to debug JavaScript with Safari or Firefox as more tricky it gets with AngularJS code. There’s a nice extension, which allows to view AngularJS objects. It’s called ng-inspector. It installs a little button next to the field for entering urls, but surprise, surprise, one can press it as long as one likes to, nothing happens. After some time DuckDuckGo helped me to figure out that, ng-inspector doesn’t like the file protocol and wants the page to be opened from a web server. If you have configured Apache on your local box for testing that will do the trick. Since MacOS10.7 the WebSharing prefPane disappeared for starting apache, but it’s still all there. So you can either use terminal to start and stop Apache via apachctl or you can install a 3rd Party prefPane. A more simple solution is to just start SimpleHTTPServer via terminal: python -m SimpleHTTPServer 3000, that’s what I did. Actually, if you are not comfortable with using the Terminal, you should stop right else proceed by going to the AngularJS tutorial 🙂 The first real challenge comes with Karma, well not karma in the spiritual sense 😉 Karma is a test runner for unit testing, AngularJS is using then the Jasmine framework for actual testing. On the Mac the first nodeJS has to be installed, because everything else is based on nodeJS. So having installed nodeJS I ran the command npm install karma –save-dev command from the terminal. This basically installs karma, then one needs also to install Jasmine: npm install karma-jasmine –save-dev, now necessary browser support needs to be installed for Chrome: npm install karma-chrome-launcher —save-dev, for Safari: npm install karma-safari-launcher –save-dev and for Firefox: npm install karma-firefox-launcher –save-dev. Now I tried to start karma: ./node_modules/karma/bin/karma start and ended up with errors, like missing package.json file. What karma actually needs first is to run: npm init, this will create the necessary files. But we’re not yet done. Additional Angular-Mocks is needed to make karma run, so I ran npm install angular-mocks, it didn’t do the trick, I expected, So I downloaded the file again from here and saved in a subdirectory called node-modules. Finally the karma.conf.js file needs to be set up and it should look something like this:
module.exports = function (config) {
config.set({
// path to the root of the test site, in this case the root is one level up
basePath: '../',
//AngularJS is using the jasmine framework for unit-testing
frameworks: ['jasmine'],
files: [
//karma loads the files in alphabetical order, so to makle sure angular is loaded first
'angular.js',
//make sure the angular-mocks file is loaded next before anything else is loaded
'node_modules/*.js',
//all the java files, in our case we would need to load only the file containing our controller
'*.js',
//load our unit test file and run it
'test/unit/*.js',
// take a look on our html file, in case we change it
'*.html'
],
exclude: [],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
// this runs the test again, if any of the above files are changed
autoWatch: true,
//I like the Safari debugger, so here we go
browsers: ['Safari'],
singleRun: false,
plugins: [
'~/node_modules/karma-safari-launcher',
'~/node_modules/karma-jasmine',
]
})
}
On the end I installed for convenience also the command line interface for karma: npm install -g karma-cli Now finally I could start running: karma start /[Path/to/folder]/test/karma.conf.js and voila, karma runs the test. Yes 🙂
