title: Howto mock a service used in a directive
body: <p>We have the following directive :</p>
  
  <pre><code>(function() {
      'use strict';
      ff.directive('mySwitchUserDirective', mySwitchUserDirective);
  
      mySwitchUserDirective.$inject = ['SessionService'];
  
      function mySwitchUserDirective(SessionService) {
          var directive = {
              restrict: 'E',
              template: '&lt;img ng-src="{{userImage}}" width="35px" style="border-radius: 50%; max-height: 35px;" /&gt;',
              link: linkFunc
          };
  
          return directive;
  
          function linkFunc(scope, element, attrs, ctrl) {
              scope.userImage = SessionService.get().authUser.picture;
          }
      }
  })();
  </code></pre>
  
  <p>How do I mock the <code>SessionService</code> during my test?</p>
  
  <pre><code>describe('mySwitchUser', function() {
      var $compile,
      $rootScope;
  
      beforeEach(module('myApp'));
  
      beforeEach(inject(function(_$compile_, _$rootScope_){
          $compile = _$compile_;
          $rootScope = _$rootScope_;
      }));
  
      it('Replaces my-switch-user element with the appropriate content', function() {
          var element = $compile("&lt;my-switch-user&gt;&lt;/my-switch-user&gt;")($rootScope);
          $rootScope.$digest();
          expect(element.html()).toContain("ng-src");
      });
  });
  </code></pre>
  
  <p>Currently it throws the error <code>TypeError: Cannot read property 'authUser' of undefined</code>, because I didn't mock the <code>SessionService</code>.</p>