CODEWITHSUNDEEP
angularjsunit-testingcompilationangularjs-scopedirective
Heather Roberts
Heather Roberts

Reputation: 2148

Testing an Angular directive with isolate scope and parent controller

I have a directive which creates an isolate scope and has a parent directive controller through the require option. In the link function I am adding some methods to the scope.

When I am trying to compile the directive in my test, I can't seem to get access to the methods I added in the link function, even though the link function is definitely executing.

The scope I have just seems to be an empty child scope of $rootScope. I have tried using element.isolateScope() but this just seems to give me the scope of the parent directive.

I am probably compiling something wrong, can someone help?

parent-directive.js

angular.module("app").directive("sortHead", function() {
    return {
        restrict: "A",
        controller: function ($scope) {
            $scope.sortField = undefined;
            $scope.reverse = false;

            this.setSortField = function(value) {
                $scope.sortField = value;
            };
            this.setReverse = function(value) {
                $scope.reverse = value;
            };
            this.getSortField = function(value) {
                return $scope.sortField;
            };
            this.getReverse = function(value) {
                return $scope.reverse;
            };
        }
    };
});

directive-to-test.js

angular.module("app").directive("sortHeader", function() {
    return {
        restrict: "A",
        templateUrl: "templates/sortHeader.html",
        scope: {
            title: "@",
            sort: "@"
        },
        require: "^sortHead",
        link: function(scope, element, attrs, controller) {

            scope.sortBy = function(name) {
                if (controller.getSortField() === name) {
                    controller.setReverse(!controller.getReverse());
                } else {
                    controller.setSortField(name);
                    controller.setReverse(false);
                }
            };

            scope.getSortField = function() {
                return controller.getSortField();
            };
            scope.getReverse = function() {
                return controller.getReverse();
            };
        }
    };
});

test.js

beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();

    element = angular.element("<th sort-header title='Name' sort='name'></th>");

    $compile(element)(scope);
    scope.$digest();
}));

Upvotes: 0

Views: 634

Answers (1)

Estus Flask
Estus Flask

Reputation: 223114

The test doesn't seem to be workable in its current form.

Here is a plunker with fixed spec

beforeEach(module('app'));

beforeEach(inject(function ($rootScope, $compile, $templateCache, sortHeaderDirective) {
  scope = $rootScope.$new();
  $templateCache.put(sortHeaderDirective[0].templateUrl, '');

  element = angular.element("<th sort-header title='Name' sort='name'></th>");
  element.data('$sortHeadController', {});

  $compile(element)(scope);
  scope.$digest();
}));

it("should do something", inject(function () {
    expect(element.isolateScope().title).toEqual('Name');
}));

Upvotes: 1

Related Questions