In my previous post, we’ve seen how to write UI test cases for AngularJS with Jasmine library. I have seen many developers learn this art of improving the quality of UI code by writing test cases, but still very few of them know the tools they are using in this process i.e. grunt, karma (Honestly, I was one of them 🙂 ).
So in this post, we are going to see how do we utilise npm package Karma and task runner Grunt in testing AngularJS code with Jasmine library.
In my previous post, we’ve took a reference of a plunk I have created.
In the same fashion, here we are going to use a GitHub repository – SimplifyingAngularUTC I have created.
Download it in your local machine as a zip file, extract it and open the folder in your command prompt. Also open the folder in your favourite editor (Sublime text, VSCode, VisualStudio or even in notepad – it doesn’t matter).
You need to have Node.js and npm installed on your local machine to run the scripts.
As you might have noticed, the repository is almost same as per the plunk we have seen in the previous post (point 1, 2 & 3 below).
- scripts folder contains AngularJS module definition, controllers and services’ code
- vendors folder contains dependent angularjs and angular-mock libraries
- tests folder contains our test cases code
- package.json
- Gruntfile.js
- karma.config.js
The other json and js files are the new arrivals, which are actually used when we use Node Package Manager. Let’s look at them one by one.
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
module.exports = function (grunt) { | |
grunt.initConfig({ | |
pkg: grunt.file.readJSON('package.json'), | |
karma: { | |
unit: { | |
configFile: 'karma.conf.js' | |
} | |
} | |
}); | |
grunt.loadNpmTasks('grunt-karma'); | |
grunt.registerTask('default', ['karma']); | |
}; |
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
// Karma configuration | |
module.exports = function(config) { | |
config.set({ | |
// base path that will be used to resolve all patterns (eg. files, exclude) | |
basePath: '', | |
// frameworks to use | |
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter | |
frameworks: ['jasmine'], | |
// list of files / patterns to load in the browser | |
files: [ | |
'vendors/angular.js', | |
'vendors/angular-mocks.js', | |
'scripts/*.js', | |
'tests/*.js' | |
], | |
// list of files to exclude | |
exclude: [ | |
], | |
// preprocess matching files before serving them to the browser | |
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor | |
preprocessors: { | |
}, | |
// test results reporter to use | |
// possible values: 'dots', 'progress' | |
// available reporters: https://npmjs.org/browse/keyword/karma-reporter | |
reporters: ['progress'], | |
// web server port | |
port: 9876, | |
// enable / disable colors in the output (reporters and logs) | |
colors: true, | |
// level of logging | |
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG | |
logLevel: config.LOG_INFO, | |
// enable / disable watching file and executing tests whenever any file changes | |
autoWatch: true, | |
// start these browsers | |
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher | |
//browsers: ['Chrome', 'PhantomJS', 'Safari', 'Firefox'], | |
browsers: ['Chrome'], | |
// Continuous Integration mode | |
// if true, Karma captures browsers, runs the tests and exits | |
singleRun: false | |
}); | |
}; |
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
{ | |
"name": "SimplifyingAngularUTC", | |
"dependencies": { | |
"karma": "^0.12.24" | |
}, | |
"devDependencies": { | |
"grunt": "^0.4.5", | |
"grunt-karma": "^0.10.1", | |
"karma-chrome-launcher": "^0.1.5", | |
"karma-firefox-launcher": "^0.1.4", | |
"karma-jasmine": "^0.1.5", | |
"karma-phantomjs-launcher": "^0.1.4", | |
"karma-safari-launcher": "^0.1.1" | |
} | |
} |
- package.json
- As you can see, this file contains the list of all npm packages are to be installed for the current project.
- grunt is the JavaScript task runner we are going to use, karma & grunt-karma packages are the dependency used to run Jasmine test cases. Other packages are used to execute the test cases against browsers (remember that we are going to run UI test cases!).
- Gruntfile.js
- This file is used to configure and register the grunt tasks.
- In the initConfig call, we are telling grunt to load packages from package.json
- We are also informing the grunt which file to use to configure karma, which in our example, is karma.conf.js
- In the registerTask call, we have registered karma as the default task. So when we’ll execute just ‘grunt’ command, the test cases will be executed.
- karma.conf.js
- In this config file, we tell the karma which files are going to be used actually to do the testing.
- As you have seen, angularjs, angular-mocks, our source code of the application and testing related files are mentioned in ‘files‘ parameter as an array.
- We can also mention which file we want to exclude as ‘exclude‘ parameter.
- You can even specify on which ‘port‘ you’d like to run the test cases and also against which browser.
- Note: once you are done installing the packages, you can also generate the karma config file yourself by karma init my.conf.js command. Have a look at the screenshot below. The command will guide you to create it. Easy it is, isn’t it!
In our plunk example, we were seeing the result in the browser itself. That’s why we had index.html file including angular, mock and jasmine files; and browsing index.html file we are able to see the result (now you’ll relate how karma config is helping us to do the same here).
Now, follow the instructions mentioned in the repository README file and execute the commands in the command prompt.
- npm install (installs the npm packages specified in package.json)
- npm install -g grunt-cli (installs grunt cli; -g for globally)
- npm install -g karma-cli (installs karma cli; -g for globally)
The above commands install…
- the packages mentioned in package.json file
- grunt-cli and karma-cli packages (to use the command grunt directly from the command prompt)
Once done, execute command ‘grunt‘. You’ll see the result in the command prompt as below. You might need to terminate the process with ctrl+c after they are executed.
As you can see that all the fifteen test cases are executed.
Now, if you want to execute test cases for just a single file, (for example, if you want to do it just for myMathSvcSpec.js file) go to the spec file, add ‘d‘ in front of the ‘describe‘ as per below, save it, run grunt command and you can see that only those test cases are executed which are there in that spec file. The rest are skipped.
If you want to exclude some files while executing the test cases, you can mention in the karma.conf.js file. For example, if you don’t want test cases of myMathSvcSpec.js to be executed along with the others, you can mention it is karma config file as ‘exclude’ property. Have a look at the screenshot below. As you can see, five test cases of myMathSvcSpec are not executed.
Hope you had a good learning for the topic reading this post.
How do you like it? Any suggestion, question, or anything you would to say about this.
Let me know in the comments section below.
Nice explanation. I small suggestion. for code snippets, use gist instead of snap shot. this would help reader copy paste your code if they need it.
LikeLike
Copy that Shahid… thanks for your suggestion! (y)
LikeLike