javascript - Retrieving angular controller via $scope in unit test -
i'm trying retrieve controller via $scope in jasmine test, fail miserably. know why?
when using controlleras syntax, controller object put on $scope object using name specified in controlleras. running code below in browser using ng-app='myapp' bootstrap angular, can use chrome-dev tools locate , select directive element, , type $0.scope().mydirctrl
in console. yield controller object, why can't retrieve controller object in unit test?
running snippet below kick off standalone jasmine browser testing environment. spec test listed @ bottom of snippet. code i'm having issues this:
expect($scope.mydirctrl).tobedefined();
/* -------------------------------------- source code --------------------------------------*/ (function(angular) { 'use strict'; // setup template ----------------- angular.module('myapp.tpls', []) .run(['$templatecache', function($templatecache) { $templatecache.put('partials/mydirective.html', '<div>{{mydirctrl.testvalue}}</div>'); }]); // setup app ---------------------- angular.module('myapp', ['myapp.tpls']) .directive('mydirective', mydirective) .controller('mydirectivecontroller', mydirectivecontroller); function mydirective() { return { restrict : 'e', templateurl : 'partials/mydirective.html', transclude : true, controlleras : 'mydirctrl', bindtocontroller: true, scope : {}, controller : 'mydirectivecontroller' }; } mydirectivecontroller.$inject = ['$scope']; function mydirectivecontroller($scope) { var ctrl = this; ctrl.testvalue = 'only test'; } })(angular); /* -------------------------------------- test specifications --------------------------------------*/ (function (module) { 'use strict'; // define tests ------------------- describe('my directive test', function () { var $compile, $rootscope, $scope; beforeeach(module('myapp')); beforeeach(inject(function(_$compile_, _$rootscope_) { $compile = _$compile_; $rootscope = _$rootscope_; $scope = $rootscope.$new(); })); it('scope should contain controller reference', function () { var element = $compile(angular.element('<my-directive></my-directive>'))($scope); $scope.$digest(); expect($scope.mydirctrl).tobedefined(); }); }); })(module);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-mocks.js"></script>
the problem $scope
in spec not same scope used in mydirectivecontroller
. directive creates 1 more scope controller, becomes child of spec scope. should able check of angular internal properties in test:
it('scope should contain controller reference', function () { var element = $compile(angular.element('<my-directive></my-directive>'))($scope); $scope.$digest(); // controller in child scope console.log($scope.$$childhead.mydirctrl); expect($scope.mydirctrl).tobedefined(); });
but not suggest rely on these private angular properties $$childhead
, because considered private , not part of public api. think q/a angularjs - access child scope resolve issue.
Comments
Post a Comment