Testing an Angular directive with isolate scope and parent controller

Question

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();
}));

Is it all the code? It doesn't look like 'link function is definitely executing'. The first thing that would happen during compilation is an error because required sortHead is missing. — Estus Flask
– Estus Flask, Commented Sep 10, 2015 at 4:53
No that's all the code, and I added break points in my tests and the link function ran. I also thought it would fail from not having sortHead. I have also tried different approaches with having the sortHead directive in the element too, but it is exactly the same, the scope seems to be empty — Heather Roberts
– Heather Roberts, Commented Sep 10, 2015 at 6:29

Estus Flask · Accepted Answer · 2015-09-10 14:22:32Z

1

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');
}));

answered Sep 10, 2015 at 14:22

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing an Angular directive with isolate scope and parent controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related