Jasmine JS, Angular JS – Testing of an Angular Directive

We need Chutzpah to be able to run this test. Resharper has some problem when loading the directive’s template.


With the Chuzpah extensions for VS (Test Runner and Test Adapter) we can see the JS tests within the default Visual Studio Text Explorer and run them from there, in the same way we manage the standard C# tests.

Here is our test:

//References of all the .JS needed for the test
/// <reference path="../../../scripts/jquery-2.1.3.min.js" />
/// <reference path="../../../scripts/jasmine.js" />
/// <reference path="../../../scripts/angular.min.js" />
/// <reference path="../../../scripts/angular-mocks.js" />
/// <reference path="../../app/app.js" />
/// <reference path="../../app/directives/d.personsList.js" />

describe("Directive Persons List:", function () {
    describe("When the directive is compiled", function () {
        var $scope, target;
        beforeEach(function () {
            //Load the module to test
            //The inject() function is used to resolve dependencies.
            //I can then assign the dependencies that I receive here to variables
            //defined outside the function. Is possible as well to use "_" to refer
            //a dependency without overriding the related outer reference.
            //For instance i could refer the $rootScope dependency with the name
            //"_$rootScope_", to assign it to an outer reference named "$rootScope"
            inject(function ($rootScope, $templateCache, $compile) {
                //Create the test $scope
                $scope = $rootScope.$new();
                $scope.persons = [
                    { name: "name1", surname: "surname1" },
                    { name: "name2", surname: "surname2" },
                    { name: "name3", surname: "surname3" }
                //Push the directive's template on the
                //template cache (work only with Chutzpah)
                var view = $templateCache.get("/jsApp/app/directives/d.personsList.html");
                if (!view) {
                        type: "GET",
                        async: false,
                        cache: false,
                        url: "../../app/directives/d.personsList.html"
                    .done(function (data) {
                        view = data;
                    $templateCache.put("/jsApp/app/directives/d.personsList.html", view);
                //Compile the directive using the test $scope
                target = $compile("<persons-list persons='persons'></persons-list>")($scope);
        it("It should be defined", function () {
        it("It should contain a person list", function () {
            var personList = target.find("li");
            for (var n = 0; n < 3; n++) {
                    $scope.persons[n].name + " " + $scope.persons[n].surname);

Here is our directive’s code

angular.module("app.directives").directive("personsList", function () {
    return {
        restrint: "E",
        replace: true,
        templateUrl: "/jsApp/app/directives/d.personsList.html",
        scope: {
            persons: "="

Here is our directive’s template

    <li ng-repeat="person in persons">
        {{person.name}} {{person.surname}}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s