Most AngularJS developers prefer to write tests using Jasmine test framework. In this tutorial, I will show you how to run AngularJS unit test using Jasmine.

AngularJS source code

Let's assume that you have the following AngularJS controller code that you would like to test. Save it in app.js.

// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);
 
// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
    $scope.phones = [
            { name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' },
            { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' },
            { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }
        ];
});

Jasmine test code

Below is Jasmine test code to unit test PhoneListController. It will check that the length of $scope.phones array is 3.

describe('PhoneListController', function() {
    beforeEach(module('phonecatApp'));
 
    it('should create a `phones` model with 3 phones', inject(function($controller) {
        var scope = {};
        var ctrl = $controller('PhoneListController', {$scope: scope});
 
        expect(scope.phones.length).toBe(3);
    }));
});

AngularJS will load the phonecatApp module. Then, it will inject the $controller in the it() test function. From there, $controller() service is used to instantiate an instance of PhoneListController with a mock scope object.

For more details on how to unit test controllers, filters and directives, see https://docs.angularjs.org/guide/unit-testing.

Run Jasmine

You need to include angular.mock.module to run tests with Jasmine. Otherwise, you will get ReferenceError: module is not defined. Also, it is important to note that Jasmine js files must be loaded before AngularJS js files. To run Jasmine, simply add your source files and spec files in the following template. Save it in SpecRunner.html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jasmine Spec Runner v3.4</title>
 
    <link rel="shortcut icon" type="image/png"
          href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine_favicon.png">
 
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.4.0/jasmine.css">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.4.0/jasmine.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.4.0/jasmine-html.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.4.0/boot.js"></script>
 
    <-- For Jasmine to work, Jasmine js files need to be loaded before AngularJS js files. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.7.8/angular-mocks.js"></script>
 
    <!-- include source files here... -->
    <script src="app.js"></script>
 
    <!-- include spec files here... -->
    <script src="app.spec.js"></script>
 
</head>
<body/>
</html>

Results

Open SpecRunner.html with a browser. The results of your tests will look like the followings.

AngularJS, Jasmine

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.

Unit test AngularJS code using Jasmine

AngularJS source code

Jasmine test code

Run Jasmine

Results

About the author