how to access controller in directive [jasmine]

Question

I am having some difficulty accessing the methods and variables on a directive in order to test it. What am I doing wrong? I have attached my directive and the test file. I did not include my karma conf because I know it is correct and that is not the problem.

accountsearch.spec.js <-- this is the file with test cases

 describe("Account search directive logic tests", function (){
  var element,$scope,scope,controller,template

  beforeEach(module("Common.accountSearch"))


  beforeEach(inject( function (_$compile_, _$rootScope_,_$controller_,$templateCache) {
    template = $templateCache.get("components/account-search/account-search.html")
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;
    //scope = compiledElem.scope()
    scope = $rootScope.$new();
    element = $compile(template)(scope)


    scope.$digest();
  }));




  it(" sets the account and calls back.", inject(function () {
   //scope.$digest()
   expect(element.setAccount).toBeFunction()
   expect(element.hasClass("form-control")).toBeTruthy()
   console.log(scope.$$prevSibling)




   }));
  //httpBackend.flush()
});

this is the actual directive, I have tried so many ways to access its controller but I just don't know what I am doing wrong.

angular.module('Common.accountSearch',['ngRoute'])

.directive('accountSearch', [function() {
    return {
        controllerAs: 'ctrl',
        controller: function ($scope, $element, $routeParams, $http) {

            this.setAccount = function () {
                var response = { AccountId : $scope.ctrl.searchedAccount.AccountId }
                $scope.callback(response)
            }

            this.getAccounts = function(searchText){
                return $http.get('/api/CRMAccounts', {
                    params: {
                        retrievalLimit: 10,
                        search: searchText
                    }
                }).then(function(response){
                    return response.data;
                });

            }

        },
        scope : {
            config : '=',
            values : '=',
            callback : '='
        },
        templateUrl : '/common/components/account-search/account-search.html',
        restrict : 'EAC'
    }
}]);

score 0 · Answer 1 · answered Oct 07 '16 at 10:46

0

You need to get the controller for the directive, which holds the methods you are trying to call.

Your element variable only holds the DOM-component.

beforeEach(inject( function (_$compile_, _$rootScope_,_$controller_,$templateCache) {
    template = $templateCache.get("components/account-search/account-search.html")
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;
    scope = $rootScope.$new();
    element = $compile(template)(scope)
    scope.$digest();
    ctrl = element.controller('accountSearch');
  }));

And in your tests:

expect(ctrl.setAccount).toBeFunction()

answered Oct 07 '16 at 10:46

Amygdaloideum

3,683
2
13
16

Thank you, I followed your steps and now I have: TypeError: Cannot read property 'setAccount' of undefined – nagrom97 Oct 07 '16 at 11:05
Instead of getting the template of the directive just compile it directly like this: `element = $compile('')(scope)` – Amygdaloideum Oct 07 '16 at 11:18
Again, thank you, but now I have unexpected template get requests :( – nagrom97 Oct 07 '16 at 11:22
You can either do a `$httpBackend.whenGet('url/to/template').respond(200, template);` or use this preprocessor: https://github.com/karma-runner/karma-ng-html2js-preprocessor – Amygdaloideum Oct 07 '16 at 11:26
Check out this for more details: http://stackoverflow.com/questions/15214760/unit-testing-angularjs-directive-with-templateurl – Amygdaloideum Oct 07 '16 at 11:28
I have tried to use this and I keep getting "No more request accepted", I have had httpBackend working before, weird that it isnt now – nagrom97 Oct 07 '16 at 11:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125169/discussion-between-daniel-bornstrand-and-morgan-abbotts). – Amygdaloideum Oct 07 '16 at 11:39

how to access controller in directive [jasmine]

1 Answers1

Linked