Javascript 测试AngularJs+；时无法获取指令中的元素；茉莉花

我有一个带有外部模板的angularjs指令。它工作得很好，但我不能为它编写jasmine单元测试。 以下是普朗克的代码：

我在同一问题上的所有尝试都失败了。Link方法在运行单元测试时获取模板的DOM元素时崩溃。它说：

TypeError:canvas在http://run.plnkr.co/YHHxxmSgCiQxjrjw/app.js （第8行）

我不知道该怎么做。请帮忙

我的简化指令代码：

茉莉花单元测试代码：

descripe（'Test directive with canvas'，function（）{
var$compile、$scope、$templateCache、defaultData、validTemplate、，
html=“”，
createDirective=函数（数据、模板）{
var-elm；
$scope.data=data | | defaultData；
elm=$compile（模板| | validTemplate）（$scope）；
$scope.$digest（）；
返回榆树；
}
在每个（模块（“应用”）之前；
beforeach（注入函数（$compile，$rootScope，$templateCache）{
$compile=\$compile；
$scope=\$rootScope\$new（）；
$templateCache=\u$templateCache；
var template=$templateCache.put（'canvas.html'，html）；
}));
描述（'创建时'，函数（）{
它（'应该呈现预期的输出'，函数（）{
var元素=createDirective（null，html）；
expect（element.find（'canvas'）.length）.toBe（1）；
});
});
});

---

此外，在Plunker上重现这个问题花了很长时间，但它仍然抛出

类型错误：createElement不是
jasmine html上的函数。我以前尝试过向文档中添加指令元素，但没有成功。我唯一错过的就是将
$document
注入测试范围<代码>文档
对象在没有它的情况下不可用。

descripe（'Test directive with canvas'，function（）{
变量$compile、$scope、$templateCache、$document、template、，
html=“”，
canvasHtml=''；
在每个（模块（“应用”）之前；
beforeach（注入函数（$compile、$rootScope、$templateCache、$document）{
$document=$document；
$compile=\$compile；
$scope=\$rootScope\$new（）；
$templateCache=\u$templateCache；
template=$templateCache.put（'canvas.html'，canvasHtml）；
}));
var createDirective=函数（）{
var elm=angular.element（html）；
$compile（elm）（$scope）；
document.body.appendChild（elm[0]）；
$scope.$digest（）；
返回榆树；
};
描述（'创建时'，函数（）{
它（'应该呈现预期的输出'，函数（）{
var元素=createDirective（）；
expect（element.find（'canvas'）.length）.toBe（1）；
document.body.removeChild（元素[0]）；
});
});
});

更新的plunker

angular.module('app', [])
  .directive('canvasDirective', canvasDirective);

  function canvasDirective () {
    var link = function () {
      var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        testText = 'Test it!';

      canvas.width = 200;
      canvas.height = 200;

      context.fillStyle = '#cccccc';  
      context.fillRect(0, 0, canvas.width, canvas.height);

      context.font = 'bold 32px Arial';
      context.textAlign = 'center';
      context.fillStyle = 'white';

      context.fillText(testText, 100, 100);
      context.strokeText(testText, 100, 100);
    }

    return {
      restrict: 'A',
      link: link,
      templateUrl: 'canvas.html'
    }
  }

describe('Test directive with canvas', function() {
  var $compile, $scope, $templateCache, defaultData, validTemplate,
      html = '<div data-canvas-directive></div>',

      createDirective = function (data, template) {
        var elm;

        $scope.data = data || defaultData;
        elm = $compile(template || validTemplate)($scope);

        $scope.$digest();

        return elm;
      }

  beforeEach(module('app'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_){
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
    $templateCache = _$templateCache_;

    var template = $templateCache.put('canvas.html', html);
  }));

  describe('when created', function () {

    it('should render the expected output', function () {
      var element = createDirective(null, html);

      expect(element.find('canvas').length).toBe(1);
    });

  });
});

describe('Test directive with canvas', function() {
  var $compile, $scope, $templateCache, $document, template,
      html = '<div data-canvas-directive></div>',
      canvasHtml = '<div class="canvas-wrapper"><canvas id="canvas"></canvas></div>';

  beforeEach(module('app'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_, _$document_){
    $document = _$document_;
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
    $templateCache = _$templateCache_;
    template = $templateCache.put('canvas.html', canvasHtml);
  }));

  var createDirective = function () {
    var elm = angular.element(html);

    $compile(elm)($scope);
    document.body.appendChild(elm[0]);
    $scope.$digest();

    return elm;
  };

  describe('when created', function () {

    it('should render the expected output', function () {
      var element = createDirective();

      expect(element.find('canvas').length).toBe(1);
      document.body.removeChild(element[0]);
    });

  });
});