vendredi 26 juin 2015

Retreiving angular controller via $scope in unit test

I'm trying to retreive the controller via $scope in my jasmine test, but fail miserably. Anybody know why?

/* --------------------------------------
    Source code
   --------------------------------------*/
(function(angular) {
  'use strict';

  // Setup the template -----------------
  angular.module('MyApp.tpls', [])
  .run(['$templateCache', function($templateCache) {
    $templateCache.put('partials/myDirective.html',
                       '<div>{{myDirCtrl.testValue}}</div>');
  }]);

  // Setup the 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 a test';
  }
})(angular);



/* --------------------------------------
    Test specifications
   --------------------------------------*/
(function (module) {
  'use strict';
  
  // Define the 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 a controller reference', function () {
      var element = $compile(angular.element('<my-directive></my-directive>'))($scope);
      $scope.$digest();
      expect($scope.myDirCtrl).toBeDefined();
    });
  });
})(module);
<link rel="stylesheet" href="http://ift.tt/1QTfwL8">

<script src="http://ift.tt/1CykO2I"></script>
<script src="http://ift.tt/1CykO2K"></script>
<script src="http://ift.tt/1QTfx1q"></script>

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1CykO2M"></script>
<script src="http://ift.tt/1QTfx1s"></script>

This is perfectly valid in both angular and in browser. $0.scope().myDirCtrl does yield the controller object if I run the below code in a browser environment instead of through jasmine.

Aucun commentaire:

Enregistrer un commentaire