Q:

Unable to use $compile in AngularJS

I'm working on an AngularJS app that uses a custom directive.  I'm also trying to use unit testing in my app.  So, I'm trying to leverage Jasmine for that.  Currently, My unit test is the problem.  Currently, it looks like the following:
myDirective.spec.js
describe('Directive: myDirective', function () {
  describe('Function: myProcedure', function () {
    it('should word', function ($rootScope, $compile) {     
      var e = angular.element('<div><br /></div>');
    console.log($compile);
      $compile(e)($rootScope);

      expect(true).toBe(true);
    });
  });
});

This test is throwing an exception.  When the console.log line is ran, it prints: 'undefined'.  The next line throws an error to Jasmine that says: 'TypeError: undefined is not a function'. 
Its like I'm not injecting the $compile service.  However, I believe I'm doing so.  My test runner looks like the following:
<html ng-app="testApp">
<head>
    <title></title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>

    <script type="text/javascript" src="index.html.js"></script>
    <script type="text/javascript" src="directives/myDirective.js"></script>
    <script type="text/javascript" src="tests/unit/myDirective.spec.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css" />
</head>

<body>

    <a href="#" onclick="env.execute()">run tests</a>

</body>
</html>

Why cannot I not run this basic test?  What am I doing wrong? 

A:

First you must add angular mocks:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-mocks.js">
</script>

then load the modules and inject $compile/$rootScope in beforeEach blocks:
describe('Directive: myDirective', function () {
  var $compile;
  var $rootScope;

  beforeEach(module('testApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  describe('Function: myProcedure', function () {
    it('should word', function () {     
      var e = angular.element('<div><br /></div>');

      $compile(e)($rootScope);    
      expect(true).toBe(true);

    });
  });
});

Check unit testing docs: http://docs.angularjs.org/guide/dev_guide.unit-testing#directives

