Variables on controller's scope are undefined when testing a directive

Vote count:

0

I have a child directive which runs fine in the browser and also works when I unit test its parent directive. It uses a variable on the scope being passed to the controller, but I am having trouble assigning this variable to the scope when unit testing this child directive.

Here is a dumb-downed version of the directive and combined test:

describe("test child directive", function () {

  angular.module('testApp', [])
      .directive("myDir", function () {
        return {
          replace: true,
          restrict: 'E',
          scope: { 'group': '=' },
          template: '<div>{{group}}</div>',
          controller: function ($scope) {
            if (!$scope.group) {
              throw 'no scope group';
            }
            this.group = $scope.group;
          },
          controllerAs: 'myController'
        };
      });

  beforeEach(module('testApp'));
  var element, $scope;
  beforeEach(inject(function (_$compile_, _$rootScope_) {
    var $compile = _$compile_;
    var $rootScope = _$rootScope_;

    $rootScope.group = "testing";
    $scope = $rootScope.$new();
    //try assign it here as well...
    $scope.group = "testing";

    element = $compile("<my-dir></my-dir>")($scope);

    $rootScope.$digest();
    //just in case
    $scope.$digest();

  }));

  it('has created the directive', function () {
    expect(element.text()).toBe("testing");
  });

});

I have tried various methods to set $scope.group but it always throws the error no scope group since it is undefined.

How can I correctly set $scope.group?

asked 22 secs ago

row1

2,827

Variables on controller's scope are undefined when testing a directive