Unit testing is crucial for test-driven development (TDD). While the broader JavaScript world has moved onto frameworks like Jest for unit tests, AngularJS (yes, it's still around!) projects often use Jasmine in combination with Karma as a test runner. Karma runs on Node.js and lets you run tests across multiple browsers and devices.
This guide shows you how to use Jasmine with Karma to test your AngularJS app.
Key Takeaways
- Jasmine and Karma are widely used for testing AngularJS applications.
- Karma allows running tests across various browsers and devices, leveraging Node.js.
- Proper configuration of Karma is crucial for efficient testing.
Getting Started
This guide assumes basic knowledge of AngularJS and Node. We’ll create a simple AngularJS controller to test. Start by installing the required dependencies via npm:
npm install karma karma-jasmine jasmine-core angular angular-mocks --save
This command installs Karma, the Karma-Jasmine adapter, Jasmine's core library, AngularJS, and Angular mocks.
Configuring your Angular App for Karma
With dependencies installed, configure Karma for your app. Use:
npx karma init
This command prompts a series of questions. For now, you can skip detailed configuration by pressing Return at each prompt. Ensure you obtain a karma.conf.js file in your root directory.
To start the Karma server, navigate to your project’s root and run:
npx karma start
You’ll find the server usually running at http://localhost:9876/.
Writing a Test Spec
Create a file in your root directory named test.spec.js and include:
test.spec.js
describe('my controller', function(){
it('runs a test', function(){
expect(0).toEqual(0);
})
})
This is a basic Jasmine setup with describe and it clauses illustrating Jasmine's behavior-driven development (BDD) approach. It’s structured to be clear and readable.
Running Our Spec
To run the test spec, configure karma.conf.js by editing it:
files: ['test.spec.js'],
singleRun: false
Setting singleRun to false allows automatic re-execution of tests on file changes, which is highly recommended for efficient development.
The files array tells Karma which files to test. Ensure paths are correct for your file locations. Run npx karma start, open the Karma server in your browser, and verify your tests are running via terminal output.
Testing AngularJS Components
The example test needs more substance related to your actual AngularJS app. To test written AngularJS controllers or services, use angular-mocks. Add the following paths in karma.conf.js:
files: [
node_modules/angular/angular.js',
node_modules/angular-mocks/angular-mocks.js',
controllers/myCtrl.js',
test.spec.js'
]
Include the myCtrl.js file for your controller:
myCtrl.js
angular.module('myModule',[])
.controller('myCtrl', function($scope){
$scope.count = 0;
$scope.add = function(){
$scope.count += 1;
};
})
Now, revise your test.spec.js to test this controller:
test.spec.js
describe('my controller', function(){
beforeEach(angular.mock.module('myModule'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope', function(){
it('adds one', function(){
var $scope = {};
var controller = $controller('myCtrl', {$scope: $scope});
$scope.add();
expect($scope.count).toEqual(1);
});
});
})
This tests the AngularJS myCtrl controller’s functionality by utilizing angular-mocks to include and instantiate a module, injecting necessary components, and asserting expected behavior.
FAQ
Why use Jasmine with Karma for AngularJS?
Jasmine, paired with Karma, provides a robust testing environment for AngularJS, offering comprehensive BDD-style testing and running tests across multiple environments.
Do I need to use angular-mocks?
Yes, angular-mocks is essential for testing AngularJS applications as it allows you to simulate AngularJS dependencies and components during tests.
Is AngularJS still supported?
AngularJS reached the end of its long-term support in 2022; however, many projects still use it, necessitating familiarity with its tools and methods.
